The Multiple media with text section is a versatile layout that allows you to showcase different content blocks with images and corresponding text side by side. It’s perfect for highlighting multiple store locations, product categories, or featured content in a visually organized way.
This section supports tab navigation and customizable layouts for both desktop and mobile.
You can access a Multiple media with text by following these simple steps:
Step 1: From Shopify Admin, click on Online Store > Select Themes > In the Current theme section, click the Customize button.
Step 2: In the theme editor (Customize), click the Sections button > Click the Add section button > In the Sections tab, scroll through the list or use the search bar to find and select Multiple media with text.
You can configure some general options for the Multiple media with text section below:
Desktop image position: Choose whether the image should appear on the left or right side of the text content on desktop view.
Desktop content width: Controls how wide the text block is in pixels. A higher number gives more space to the text.
Desktop content spacing: Sets the space (in pixels) between the text block and the image.
Auto-rotate tabs: When enabled, the tabs will automatically rotate or switch.
Change tabs every: Define the interval time between each tab rotation in seconds.
Top padding: Sets the space between the top of the video section and the element above it (in pixels).
Bottom padding: Sets the space between the bottom of the video section and the element below it (in pixels).
Mobile top padding: Sets the space between the top of the video section and the element above it (in pixels) on mobile devices.
Mobile bottom padding: Sets the space between the bottom of the video section and the element below it (in pixels) on mobile devices.
To add a Media with text block, click the Add Media with text button (plus icon ➕) under the Multiple media with text section.
Tab label: Sets the label for this block when used in a tab layout. Only appears if 2 or more blocks exist in the section.
Color scheme: Choose the color scheme to style this block's background and text.
Image: Upload or select the main image that will appear in the block on desktop.
Mobile image: Optional image specifically for mobile view. Overrides the main image on smaller screens.
Subheading: Enter optional introductory text that will appear above the main heading.
Subheading font: Choose between using a Heading font style or Body text style for the subheading.
Subheading size: Select the text size: Small, Medium, or Large.
Heading: Enter the main title or headline for this block. You can format the text using bold, italic, link...
Heading size: Choose the size for the heading text. Options included like Large, Medium, Smalll, Extra small, Extra extra small.
Heading tag: Sets the HTML tag of the heading, which does affect SEO. You can also change the Heading tag to:
+ H1-H6: Sets the HTML tag of the heading, which does affect SEO.
+ div: A generic container element with no semantic meaning.
+ span: An inline element, also with no semantic value.
+ p: Wraps the heading in a paragraph tag, meaning it's treated as regular text (not a heading).
Description: Add supporting text or information below the heading. This can be styled with bold, italics, bullet list, etc.
Button label: Enter the text displayed on the button.
Button link: Enter the URL or select a page/product to link the button to. When clicked, users will be directed to the specified destination.
Button size: Choose the size of the button, options included: Small, Medium, or Large
Button style: Select the button appearance. Common options include: Solid, Outline, Link, or Solid 3D
Button position: Decide where the button appears relative to the text
+ Inside: Button appears inside the content area.
+ Outside: Button appears outside the main content block, often below it.
