Media with text

The Media with text section combines images or videos with text content, ideal for storytelling, highlighting features, or emphasizing brand values.

This section allows you to highlight key messages alongside visual content, creating an engaging and informative section on your store pages.

1, How to add section in theme editor:

1

In your theme editor (Customize), scroll to the bottom of the template and select Add section.

2

In the list, locate and select Media with text section. The section will now be added to your page, ready for customization.

2, Section settings:

The section settings allow you to configure the media

• First mage: Upload or select the first image displayed in the section.

• Second image: Optionally upload a second image, shown as a fallback or decorative element.

• Video: Upload a video directly to the store’s files for use instead of images. Great for showcasing products or behind-the-scenes footage.

Note: When more than one media (image or video) is uploaded, navigation arrows will appear, allowing customers to browse through the media in a slideshow format.

• Media height: Adjust the vertical space the media occupies:

  • Adapt to first media size: Retains original image/video height.

  • Small / Medium / Large: Predefined fixed heights for consistent layout.

  • Adapt to content height: Auto-adjusts media height to match content block height (If content height is smaller than min-height, media height equals min-height).

• Desktop media width: Adjusts the horizontal width of the media block relative to the section: Small, Medium, Large

Note: Media is automatically optimized for mobile — ensures performance and responsiveness on smaller screens.

• Desktop media placement: Determines whether media appears on the left or right of the content on desktop.

• Desktop content position: Aligns the vertical position of the text content relative to the media block: Top, Middle or Bottom.

• Desktop content alignment: Aligns text horizontally within the content area: Left, Center or Right.

• Add space between media and text: If enabled, a visible gap is added between the media and the text block—improving clarity and layout balance.

• Mobile content alignment: Sets the alignment of the text block on mobile devices: Left, Center or Right.

3, Block settings

The Media with text section offers several blocks to customize content presentation, each with specific settings.

• Heading block: Add a heading for the Image with text section. Choose a font from the theme’s default font or options in the Shopify font library. Select from Small, Medium, Large, Extra large, or Extra extra large for heading size. Emphasize keywords in the heading with: Change the color of highlighted text, or Underline selected phrases for emphasis.

• Text block: Add a description to support the heading. Typically used for providing more context or details.

• Caption block: Add a caption for additional context or emphasis. Choose from Subtitle or Uppercase for caption style.

• Collapsible content block: Add a Q&A format block with collapsible content. Select an icon to appear beside each question. When clicked, the question expands to reveal the answer.

• Image block: Select an additional image to display within the section. Adjust the image size from 30px to 200px.

• Countdown timer block: Add a countdown timer to create urgency for special promotions.

  • Set a specific date and time for the timer to count down to.

  • Enable "Hide when countdown reaches zero: Once the countdown ends, the timer will automatically disappear

  • Choose whether or not to add a border around the timer.

• Button block: Enter a label for the button. If left blank, the button won’t display. Assign a URL link to the button. Choose from available button styles: Solid, Outline, Text. And use the provided options to customize the button color.

• Icon block: Create a block with text and an icon. The text appears to the left of the icon.

• Feature columns block: Each block consists of settings for two features displayed side-by-side. The layout is a 50-50 split to fit both feature columns. Each feature includes:

  • Icon next to/above the heading. Toggle icon visibility on or off based on preference.

  • Description below the heading.

• Divider block: is used to visually separate content within the section, creating a clear structure and improving content readability. You can adjust the line opacity (0–100%) to control its visibility, set the width (10–100%) to define how long the divider appears, and align it left, center, or right within the section. Additionally, under Block spacing, the bottom padding (0–50px) lets you control the space between the divider and the block below it.