Media with text
Overview:
The Media with text section allows you to display images or videos alongside supporting content. This flexible layout can be used to highlight brand stories, promotions, or product features. It supports autoplay slideshows, vertical pagination, and responsive alignment of media and text.
Section Configuration:
Heading & Description
| Setting | Description |
|---|---|
| Heading | Displays a heading above the content column. |
| Heading Size | Sets the size of the heading text (H1–H6). |
| Heading Weight | Adjusts the font weight of the heading. |
| Description | Adds an optional rich text description below the heading. |
| Description Size | Sets the size of the description text. |
| Description Weight | Sets the font weight of the description text. |
Layout
| Setting | Description |
|---|---|
| Media Position (Desktop) | Determines if the media appears on the left or right side. |
| Media Height (Desktop) | Sets the height of the media container on desktop. |
| Media Height (Mobile) | Sets the height of the media container on mobile. |
| Content Position (Desktop) | Aligns the text block vertically: top, middle, or bottom. |
| Container Layout | Chooses between a fixed-width container or full-width layout. |
| Text Alignment (Desktop) | Sets horizontal alignment of text on desktop devices. |
| Text Alignment (Mobile) | Sets horizontal alignment of text on mobile devices. |
| Color Scheme | Applies a selected color scheme to the entire section. |
Slideshow Settings
| Setting | Description |
|---|---|
| Enable Pagination Dots | Displays pagination indicators when multiple media blocks are present. |
| Enable Slideshow Autoplay | Automatically rotates through media slides (disabled when video is present). |
| Slideshow Interval | Sets the time (in milliseconds) between slide transitions. |
Section Spacing
| Setting | Description |
|---|---|
| Top Padding | Adds vertical spacing above the section. |
| Bottom Padding | Adds vertical spacing below the section. |
Blocks Configuration:
Block: Image
| Setting | Description |
|---|---|
| Image | Uploads the image to be displayed in the slideshow. |
| Button Label | Adds a call-to-action button over the image. |
| Button Type | Chooses the button style (primary or secondary). |
| Button URL | Sets the link destination for the image button. |
| Open in New Tab | Opens the button link in a new browser tab when enabled. |
| Bottom Margin (Button) | Adds spacing below the button to adjust layout vertically. |
Block: Video
| Setting | Description |
|---|---|
| Cover Image | Optional placeholder image displayed before the video plays. |
| Video Title | Alternative text or heading for the video content. |
| Upload Video | Allows uploading a video file via Shopify’s video picker. |
| Embed URL | Adds an embedded video using a YouTube or Vimeo link. |