The Media and text blocks section displays multiple image or video content cards in a horizontally scrollable layout. Customers can scroll through the items to explore additional promotional content, while each item can include its own label, heading, text, and call-to-action.
The section also supports a custom image or video background, making it useful for creating immersive campaign showcases, product highlights, and visual brand stories.
Use the layout settings to control how the Media with text blocks are displayed.
Desktop media placement: Choose the default position of the media on desktop:
First: Display the media before the text content.
Second: Display the text content before the media.
Use the Item width settings to control the width of each Media with text item.
Item fullwidth: Display each item at the full available width.
Item width on mobile: Set the width of each item on mobile.
Set the mobile item width below 100% to reveal part of the next item, helping customers recognize that they can swipe horizontally to view more content.
Set the height of the media area separately for different devices:
Desktop: Set the media height on desktop.
Tablet: Set the media height on tablet.
Mobile: Set the media height on mobile.
Desktop content align: Choose the alignment of the text content within each item on desktop.
Use the Appearance settings to customize the overall look of the section.
Color scheme: Select the default color scheme for the section.
Custom background type: Choose how the section background is displayed:
Inherit: Use the background from the selected color scheme.
Color: Use a custom background color.
Media: Use media as the section background.
Background media: When Media is selected as the custom background type, choose whether to use an Image or Video as the background.
Use the background settings to customize the section background.
Custom background type: Choose how the section background is displayed:
Inherit: Use the default background from the selected color scheme.
Color: Use a custom background color.
Media: Use an image or video as the section background.
Background media: When Media is selected, choose the type of background media:
Image: Use an image as the section background.
Video: Use a video as the section background.
Image / Video: Select the image or video to display as the section background.
Background overlay: Add an overlay over the background media to improve the visibility and readability of the section content.
Adjust the spacing around the section separately for desktop and mobile:
Top padding: Space above the section content on desktop.
Bottom padding: Space below the section content on desktop.
Mobile top padding: Space above the section content on mobile.
Mobile bottom padding: Space below the section content on mobile.
Click Add block to add a new Media with text item. Each block contains its own media area and content area.
Use these settings to configure the media displayed in an individual block.
Color scheme: Select the color scheme for the Media with text block.
Content maximum width: Set the maximum width of the text content area.
Media type: Choose between Image and Video.
Image: Select the image displayed in the block.
Mobile image: Select a separate image optimized for mobile devices.
When Video is selected, use the available video settings to configure the media displayed in the block.
Inside each Media with text block, click Add block to add and arrange the content displayed next to the media.
The available content can include:
Use the Label block to add a short highlight above the main content, such as:
🔥 Limited-time deals
This can be used for promotions, badges, categories, or short introductory messages.
Use the Heading block to add the main title for the item.
Heading: Enter the heading text.
Heading size: Select the size of the heading.
Heading tag: Choose the HTML heading tag, such as H1, H2, or H3. This setting can affect SEO.
Uppercase: Display the heading in uppercase.
Use the Text block to add supporting information below the heading, such as a product benefit, campaign message, or short description.
Use the Button block to add a call-to-action, such as Shop now, allowing customers to navigate to a product, collection, page, or other destination.
You can add, remove, and reorder these content blocks to create the desired content structure for each Media with text item.