Media with text overlay section
The Media with text overlay section of Combine shows image or video cards with a caption, title, subtitle and button on top.
Applies to: Combine 4.2.0 and later. Added in: Combine 1.0.0. Last checked: 2026-10-13 against Combine 4.2.0.
The Media with text overlay section shows image or video cards with a caption, a title, a subtitle and a button on top of the media. Use one full-width card as a banner, or two or three cards side by side as promotion tiles.
Where to find it: in the theme editor, select Add section and choose Media with text overlay (two cards) or Fullwidth media with text (one full-width card).
Layout
- Desktop layout sets how the cards sit on desktop: Full width: 1 column (one card edge to edge), Boxed: 1 column, Boxed: 2 columns (the default) or Boxed: 3 columns within the page width. On screens narrower than 768 px the cards stack, one per row.
- Card height sets the minimum height of the cards, as a share of the screen height: Small (40 percent), Large (60 percent, the default) or Extra large (80 percent). On portrait screens, such as phones, the cards are lower: 25, 40 and 55 percent.
- Cards grow taller when their text needs more space.
Text style
- Text alignment places the text in one of nine positions, from Left top to Right bottom (default Left bottom).
- Text container width limits how wide the text can get: Medium (60 percent of the card, the default) or Large (90 percent).
- Caption size, Title size and Subtitle size set the size of each line of text.
- Text spacing sets the gap between the lines, from -12 to 60 px (default 18 px).
Button
Button style sets the look of the card buttons: Solid (the default) or Outline.
Custom card design
Border radius rounds the corners of the cards, 0 to 30 px. The section heading, background colors, margins and heading tag work as described in General section styling. Background color and Background gradient color the section around the cards, not the cards; Heading text color colors only the section heading.
Blocks
Image
Each card is an Image block. Select Add block inside the section to add one.
- Image is the card background. It fills the card and is cropped at the edges.
- Video plays muted in a loop instead of the image; the image shows when the video cannot play. Use different media on mobile shows Mobile video file on small screens, with its own Mobile video aspect ratio.
- Caption, Title and Subtitle are the three lines of text, from top to bottom. Leave any of them empty to hide it.
- Link is where the card goes. With a Button label, the link is on the button only. Without a button label, the whole card becomes the link.
- Button label sets the button text (default "Show more").
- Overlay under Custom card design puts a color over the media to make the text easier to read. Use a color with transparency.
- Text sets the color of the card text.
- Show horizontal line draws a short line under the title instead of the underline animation.
- Heading tag under SEO sets the HTML level of the card title (default H3).
Please note that the video backgrounds require MP4 files. Upload them straight from the card's Video setting, or pick one you already have in Shopify admin → Content → Files.
How do I make the whole card clickable?
Fill in Link and leave Button label empty. The card then works as one link. With a button label, only the button opens the link.
Why is my text hard to read over the image?
Because the image is light or busy where the text sits. Set Overlay to a dark color with some transparency, change Text, or move the text with Text alignment to a calmer part of the image.
All Media with text overlay settings
Every setting of this section, with its type and default.
Accepts these blocks: Image.
Media with text overlay section: Section heading
Where to find it: Media with text overlay → Section heading
The Media with text overlay section uses the standard Section heading settings, listed in General section styling.
Heading (text field, default: "Media with text overlay"): Sets the section title. Leave Heading, Subheading and Button label empty to hide the heading area.
Subheading (formatted text, default: "Share your best offers").
Heading size (dropdown, default: Regular). Options: Regular, Large.
Text alignment (dropdown, default: One row: Left). Options: One row: Left, Two rows: Left, Two rows: Center.
Button label (text field): Adds a button to the heading area on desktop; below 768 px it shows under the section as a full-width button.
Button link (link). Shown only when Button label is set.
These settings differ from the standard ones or exist only here:
Heading (text field, default: "Media with text overlay"): Sets the section title. Leave Heading, Subheading and Button label empty to hide the heading area.
Media with text overlay section: Layout
Where to find it: Media with text overlay → Layout
Desktop layout (dropdown, default: Boxed: 2 columns): Sets how the cards sit on desktop: one card edge to edge, or one, two or three cards within the page width. Below 768 px the cards stack. Options: Full width: 1 column, Boxed: 1 column, Boxed: 2 columns, Boxed: 3 columns.
Card height (dropdown, default: Large): Sets the minimum card height as a share of the screen height: Small 40 percent, Large 60, Extra large 80; lower on portrait screens. Cards grow with their text. 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 card text 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): Limits the width of the text: Medium 60 percent of the card, Large 90. Options: Medium, Large.
Caption size (dropdown, default: Regular). Options: Regular, Large, Extra large.
Title size (dropdown, default: Regular). Options: Regular, Medium, Large.
Subtitle size (dropdown, default: Regular). Options: Regular, Large, Extra large.
Text spacing (slider -12 to 60 px, default: 18 px): Sets the gap between the caption, title, subtitle and button.
Media with text overlay section: Button
Where to find it: Media with text overlay → Button
Button style (dropdown, default: Solid): Sets the look of the card buttons. Options: Outline, Solid.
Media with text overlay section: Custom card design
Where to find it: Media with text overlay → Custom card design
Border radius (slider 0 to 30 px, default: 0 px): Rounds the corners of the cards.
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): Fills the section around the cards, not the cards.
Background gradient (gradient).
Heading text color (color, default: transparent): Sets the color of the section heading and subheading only.
Media with text overlay section: Gutter
Where to find it: Media with text overlay → Gutter
The Media with text overlay section uses the standard Gutter settings, listed in General section styling.
Decrease top margin (checkbox, default: off): Makes the space above the section smaller.
Remove top margin (checkbox, default: off): Removes the space above the section, so it touches the section before it.
Remove bottom margin (checkbox, default: off): Pulls the next section up, so the two sections touch.
These settings differ from the standard ones or exist only here:
Remove top margin (checkbox, default: off): Removes the space above the section, so it touches the section before it.
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 level of the section heading for search engines; span gives it no level. It does not change the size. Options: H1, H2, H3, H4, span.
Image block
Where to find it: Media with text overlay → Add block → Image
Image (image): Sets the card background. It fills the card and is cropped at the edges.
Video (video): Plays a muted, looping video instead of the image. The image shows when the video cannot play.
Use different media on mobile (checkbox, default: off): Shows a different video on screens narrower than 768 px. Shown only when Video is set.
Mobile video file (video). Shown only when Use different media on mobile is on and Video is set.
Mobile video aspect ratio (dropdown, default: Natural): Sets the shape of the mobile video. Natural keeps the video's own proportions. 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 file is set and Video 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): Sets where the card goes. With a Button label the link is on the button only; without one the whole card is the link.
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): Puts a color over the media to make the text easier to read. Use a color with transparency.
Text (color, default: transparent): Sets the color of the card text.
Show horizontal line (checkbox, default: off): Draws a short line under the title instead of the underline animation.
Image block: SEO
Where to find it: Media with text overlay → Add block → Image → SEO
Heading tag (dropdown, default: H3): Sets the HTML level of the card title for search engines. Options: H1, H2, H3, H4, span.
Related pages
- Flex slideshow section: slides with theme blocks over the media.
- Promotion cards section: cards with the text under the media.
- Rich text section: a text card next to an image.
- General section styling: the standard section settings.