Image duo with text
The "Image Duo with a Text" section is a flexible feature that enhances web pages by displaying a pair of images or videos with accompanying text and optional buttons. This combination of visuals and text showcases additional details of a product in an attractive format.
✅ Steps
-
Open the Theme Editor.
Navigate to your Shopify dashboard and open the Theme Editor for your store. -
Add the Image duo with text section.
Click on 'Add section' and select 'Image duo with text' to integrate this section into your page layout. -
Save your changes.
After customizing the Image duo with text section, click 'Save' to implement your adjustments.
Edit Section Settings:
Color Scheme:
Customize the color theme to match your brand and design preferences.
Desktop Layout Settings:
Full Width Toggle: Choose whether the section spans the full width of the page.
Image Height Slider: Adjust the height of images or videos between 400px and 600px.
Text Position Setting: Place text in one of four positions: Top Right, Top Left, Bottom Right, Bottom Left.
Text Alignment: Align the text to the left, center, or right of the section.
Margins: Set the top and bottom margins to ensure the section fits well within the overall page layout.
Mobile Settings:
Image Height Slider: Modify the image or video height from 300px to 700px to optimize for mobile devices.
Text Alignment: Choose text alignment as left, center, or right for mobile viewers.
Margins: Adjust the top and bottom margins to suit mobile presentation.
Customize Blocks:
Image (or Video) Block:
Pick a Picture
or Paste a Video URL: Supports Youtube, Vimeo, and MP4 files, allowing for flexibility in content display. For more information on handling images and videos, visit this guide.
Media Toggle: Choose between displaying an image or a video for both mobile and desktop views.
Image Link: Provide the URL for the image or link to a dynamic source.
Text Block:
Includes subheading, heading, and Rich Text Editor (RTE) Body Text for comprehensive content creation.
Button Block:
Two buttons can be added to this section, enhancing navigation or calls-to-action.
Button Label: Define the text that appears on the button.
Button Style: Select from Primary, Secondary, or Link styles to match the button with your site's theme.
Button Width: Can be set to full width or normal, fitting the content area defined.