Media with text overlay section
The Media with text overlay section of Local shows image or video cards with a caption, title, subtitle and button over the media.
Applies to: Local 4.2.1 and later. Added in: Local 1.0.0. Last checked: 2026-10-13 against Local 4.2.1.
The Media with text overlay section shows cards with an image or a video in the background and text on top: a caption, a title, a subtitle and a button. You choose the number of columns, the card height and the text style, and every card has its own colors, so it adapts to any background.
Where to find it: Online Store → Themes → Customize → Add section → Media with text overlay
Content
- Desktop layout sets 1, 2 (default) or 3 cards per row on desktop. On phones the cards stack.
- Card height sets the minimum height of the cards, as a share of the screen height: Small (40 percent), Large (60 percent, default) or Extra large (80 percent). Cards grow taller when the text needs more room.
Text style
These settings apply to every card of the section:
- Text alignment places the text in one of nine positions over the media (default Left bottom).
- Text container width sets Medium (default) or Large text width.
- Caption size (Small, Regular, Large), Title size (Small, Regular, Large) and Subtitle size (Regular, Large) set the size of each line.
- Button size (Regular, Large) and Button style (Outline, Solid) set the button.
The section background, Heading text color and the margins are the standard Section design settings: they color the area around the cards, not the cards. See General section styling.
Image blocks
Each Image block is one card.
- Image is the background of the card; Mobile image (optional) replaces it on phones.
- Video background plays a video behind the text, muted and looping. The Image shows while the video loads and when it cannot play.
- Use different media on mobile plays Mobile video background on phones, with its own Mobile video aspect ratio.
- Caption, Title and Subtitle are the text lines. Leave a line empty to hide it. The title's tag is under SEO → Heading tag.
- Button label adds a button. Link is where the button goes; Open link in a new window opens it in a new tab.
- Under Custom card design, Overlay tints the media to keep the text readable, Text sets the text color, and Hide border and Hide shadow remove the card border and shadow.
The Link goes on the button. Without a button, it goes on the title. Without a button, title and subtitle, the whole card becomes the link.
Which video files can I use as a background?
Videos you upload to Shopify. Video background opens Shopify's video picker: select a video you already have in Shopify admin → Content → Files, or upload a new one in the picker. YouTube and Vimeo links are not supported here; use the Video section for those.
Video backgrounds must be videos hosted by Shopify (for example MP4 files). Select or upload them in the Video background picker; they are stored in Shopify admin → Content → Files.
Why is the whole card not clickable?
Because the card has a title, a subtitle or a button. The whole card is a link only when all three are empty. Otherwise the Link goes on the button, or on the title when there is no button.
All Media with text overlay settings
Every setting, with its type and default.
Accepts these blocks: Image.
Media with text overlay section: Heading
Where to find it: Media with text overlay → Heading
The Media with text overlay section uses the standard Heading settings, listed in General section styling.
Heading (text field, default: "Media with text overlay").
Subheading (text field, default: "Promote your best products").
Text alignment (dropdown, default: Left). Options: Left, Center.
Show section link (checkbox, default: off): Adds a text link next to the section heading. Fill Link text and Link too.
Link text (text field). Shown only when Show section link is on.
Link (link). Shown only when Show section link is on and Link text is set.
Open link in a new window (checkbox, default: off). Shown only when Link is set and Show section link is on and Link text is set.
These settings differ from the standard ones or exist only here:
Heading (text field, default: "Media with text overlay").
Subheading (text field, default: "Promote your best products").
Media with text overlay section: Content
Where to find it: Media with text overlay → Content
Desktop layout (dropdown, default: 2 columns): The layout adapts itself for mobile devices. Options: 1 column, 2 columns, 3 columns.
Card height (dropdown, default: Large): Sets the minimum height of the cards as a share of the screen height: Small 40, Large 60, Extra large 80 percent. Cards grow when the text needs more room. Options: Small, Large, Extra large.
Media with text overlay section: Text style
Where to find it: Media with text overlay → Text style
Text alignment (dropdown, default: Left bottom): Places the text over the media, in one of nine positions. Options: Left top, Center top, Right top, Left middle, Center middle, Right middle, Left bottom, Center bottom, Right bottom.
Text container width (dropdown, default: Medium). Options: Medium, Large.
Caption size (dropdown, default: Regular). Options: Small, Regular, Large.
Title size (dropdown, default: Small). Options: Small, Regular, Large.
Subtitle size (dropdown, default: Regular). Options: Regular, Large.
Button size (dropdown, default: Large). Options: Regular, Large.
Button style (dropdown, default: Solid). Options: Outline, Solid.
Media with text overlay section: Section design
Where to find it: Media with text overlay → Section design
The Media with text overlay section uses the standard Section design settings, listed in General section styling.
Background color (color, default: transparent).
Background gradient (gradient).
Heading text color (color, default: transparent): Sets the color of the text outside the cards, mostly the section heading.
Descrease top margin (checkbox, default: off): Sets the space above the section to the grid gap of Theme settings → Layout → Horizontal space, instead of the full space between sections. Shown only when Remove top margin is off.
Remove top margin (checkbox, default: off): Removes the space above the section, so it touches the section before it. Shown only when Descrease top margin is off.
Media with text overlay section: SEO
Where to find it: Media with text overlay → SEO
The Media with text overlay section uses the standard SEO settings, listed in General section styling.
Heading tag (dropdown, default: H2): Sets the HTML tag of the heading for search engines. It does not change how the heading looks. Options: H1, H2, H3, H4, span.
Media with text overlay section: Visibility
Where to find it: Media with text overlay → Visibility
The Media with text overlay section uses the standard Visibility settings, listed in General section styling.
Section visibility (dropdown, default: Show always): Shows the section on every screen, only below 768 px (mobile) or only from 768 px (desktop, tablets included). A hidden section is still in the page. Options: Show always, Show only on mobile, Show only on desktop.
Image block
Where to find it: Media with text overlay → Add block → Image
Image (image).
Mobile image (optional) (image).
Video background (video): Plays a Shopify-hosted video behind the text, muted and looping. Select or upload it in the picker.
Use different media on mobile (checkbox, default: off). Shown only when Video background is set.
Mobile video background (video). Shown only when Use different media on mobile is on.
Mobile video aspect ratio (dropdown, default: Natural). Options: Natural, Wide (16:9), Short (4:3), Square (1:1), Tall (5:6), Taller (2:3), Tallest (9:16). Shown only when Use different media on mobile is on and Mobile video background is set.
Image block: Text content
Where to find it: Media with text overlay → Add block → Image → Text content
Caption (text field, default: "Introducing").
Title (text field, default: "Your best promotion yet").
Subtitle (text field, default: "Write about it").
Link (link): Goes on the button. Without a button, on the title. Without button, title and subtitle, on the whole card.
Open link in a new window (checkbox, default: off). Shown only when Link is set.
Button label (text field, default: "Show more").
Image block: Custom card design
Where to find it: Media with text overlay → Add block → Image → Custom card design
Overlay (color, default: transparent): Tints the media so the text stays readable.
Text (color, default: transparent).
Hide border (checkbox, default: off).
Hide shadow (checkbox, default: off).
Image block: SEO
Where to find it: Media with text overlay → Add block → Image → SEO
Heading tag (dropdown, default: H3): Sets the HTML tag of the heading for search engines. It does not change how the heading looks. Options: H1, H2, H3, H4, span.