Media with content
Overview
Displays media alongside customizable content using image or video blocks, with responsive layouts, typography, positioning, and spacing controls.
Section Header Settings
| Setting | Description |
|---|---|
| Tagline | Add a short label above the heading. |
| Tagline Size | Choose Large, Medium, or Small. |
| Tagline Weight | Set the tagline weight from Thin to Black. |
| Tagline Case | Choose None, Uppercase, Capitalize, or Lowercase. |
| Tagline Family | Use the Default or Heading font family. |
| Tagline Background | Set the tagline background color. |
| Tagline Color | Set the tagline text color. |
| Heading | Add the main section heading. |
| Heading Size | Choose H1–H6, Large, Medium, or Small. |
| Heading Weight | Set the heading weight from Thin to Black. |
| Heading Case | Choose None, Uppercase, Capitalize, or Lowercase. |
| Heading Level | Set the semantic heading level from H1 to H6. |
| Heading Family | Use the Default or Body font family. |
| Heading Color Style | Apply the Default or Body color style. |
| Heading Link Style | Apply the Default or Link style. |
| Description | Add supporting rich text. |
| Text Size | Choose Large, Medium, or Small. |
| Text Weight | Set the text weight from Thin to Black. |
| Text Case | Choose None, Uppercase, Capitalize, or Lowercase. |
| Text Family | Use the Default or Heading font family. |
| Text Color Style | Apply the Default or Headings color style. |
| Button Label | Add the button text. |
| Button Link | Add the button destination URL. |
| Button Type | Choose Primary, Secondary, Link, Icon Primary, or Icon Secondary. |
| Button Case | Choose None, Uppercase, Capitalize, or Lowercase. |
| Open Link in New Tab | Open the button link in a new browser tab. |
| Header Margin – Desktop | Set the bottom margin on desktop. |
| Header Margin – Mobile | Set the bottom margin on mobile. |
Media Settings
| Setting | Description |
|---|---|
| Enable Video Autoplay | Enable or disable video autoplay. |
| Media Content Position | Position media content at the Top or Bottom. |
| Media Tagline Size | Choose Large, Medium, or Small. |
| Media Tagline Weight | Set the tagline weight from Thin to Black. |
| Media Tagline Case | Choose None, Uppercase, Capitalize, or Lowercase. |
| Media Tagline Family | Use the Default or Heading font family. |
| Media Tagline Color | Set the media tagline text color. |
| Media Heading Size | Choose H1–H6, Large, Medium, or Small. |
| Media Heading Weight | Set the heading weight from Thin to Black. |
| Media Heading Case | Choose None, Uppercase, Capitalize, or Lowercase. |
| Media Heading Level | Set the semantic heading level from H1 to H6. |
| Media Heading Family | Use the Default or Body font family. |
| Media Heading Color Style | Apply the Default or Body color style. |
| Media Text Size | Choose Large, Medium, or Small. |
| Media Text Weight | Set the text weight from Thin to Black. |
| Media Text Case | Choose None, Uppercase, Capitalize, or Lowercase. |
| Media Text Family | Use the Default or Heading font family. |
| Media Text Color Style | Apply the Default or Headings color style. |
| Desktop Text Alignment | Set the media text alignment on desktop. |
| Mobile Text Alignment | Set the media text alignment on mobile. |
Grid Settings
| Setting | Description |
|---|---|
| Desktop Grid Spacing | Set the spacing between grid columns on desktop. |
| Mobile Grid Spacing | Set the spacing between grid columns on mobile. |
Layout Settings
| Setting | Description |
|---|---|
| Show Topo Lines | Show or hide the decorative topo lines. |
| Desktop Media Position | Place media first or second on desktop. |
| Content Alignment | Align content to the Top, Middle, or Bottom. |
| Desktop Media Height | Choose Adapt, Small, Medium, or Large. |
| Mobile Media Height | Choose Adapt, Small, Medium, or Large. |
| Container Layout | Choose Container, Contained Content, or Container Fluid. |
| Container Size | Set the container width from 50% to 100%. |
| Desktop Text Alignment | Set the section text alignment on desktop. |
| Mobile Text Alignment | Set the section text alignment on mobile. |
| Color Scheme | Select the color scheme for the section. |
Inner Spacing
| Setting | Desktop | Mobile |
|---|---|---|
| Top | 70px | 35px |
| Bottom | 70px | 35px |
| Left | 50px | 15px |
| Right | 50px | 15px |
Outer Spacing
| Setting | Desktop | Mobile |
|---|---|---|
| Top | 0px | 0px |
| Bottom | 0px | 0px |
| Left | 0px | 0px |
| Right | 0px | 0px |
Blocks Configuration
Video
| Setting | Description |
|---|---|
| Video | Select a Shopify-hosted video. |
| Embedded Video | Add a YouTube or Vimeo video URL. |
| Desktop Image | Select the desktop video cover image. |
| Mobile Image | Select the mobile video cover image. |
| Alt Text | Add alternative text for the video. |
| Tagline | Add a tagline for the video content. |
| Heading | Add the video content heading. |
| Description | Add supporting video content text. |
Image
| Setting | Description |
|---|---|
| Desktop Image | Select the desktop image. |
| Mobile Image | Select the mobile image. |
| Tagline | Add a tagline for the image content. |
| Heading | Add the image content heading. |
| Description | Add supporting image content text. |