Image duo with text

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

  1. Open the Theme Editor.
    Navigate to your Shopify dashboard and open the Theme Editor for your store.
  2. 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.
  3. 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.