Content on images
Where words sit on pictures in the Hero, Image with text, Image reveal, Video and page starts, and how they stay readable.
Online Store › Themes › Customize › Theme settings › Content on images
Where the words, buttons and other blocks of Hero, Image with text, Image reveal and Video sit, and the looks' words. Each section can set its own by turning off Follow Theme settings for content placement.
Content position on desktop
On the image at one of nine places, or above, below or beside it. Off the image, the content takes the section's color scheme.
Content position on phones
Text alignment on desktop
Match the position lines the text up with where the content sits.
Text alignment on phones
Content width
Beside an image, Full width is the whole column.
Distance from the image's edges
Space between blocks
Box behind the content
A color scheme's ground, or a translucent one that keeps the image showing.
Box color scheme
Words color
On the image. Automatic picks light or dark for the part of the image behind the words (Readability, below, sets how strict it is).
Shade
Shade style
Gradient darkens from the content's side (from the foot for content at the bottom); Even darkens the whole image.
Height
With the content on the image. The image's shape keeps Image shape where the section has one (else the image's own proportions); the section grows if the content needs more room.
Transparent header over a first image
When the section is first on the page and its content is on the image. Match the words takes the words' color.
Bring the content in with the scroll
The product page's Looks: the look's name, description and link come in over its picture as the page scrolls. Off, they show from the start; with reduced motion they always do. The other sections show their content from the start.
Beside the image
Content position beside the image
Image side
Image's share of the width
Text on images
How the theme colors a title set on a picture, such as a look's, when its color is Automatic. It measures the part of the picture behind each line and picks light or ink. Where neither reads well enough, the text moves outside the picture.
Readability
Strict asks for the contrast recommended for body text (4.5:1) and keeps text on fewer pictures. Balanced asks for 3:1.
Minimum contrast
4.5:1 is the contrast recommended for body text, 3:1 for large text.
Text allowed below the minimum
Past this share of the text, the color doesn't count as readable.
Lean towards
Uses this color whenever it reads well enough, even where the other would read slightly better.