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.

Adding the section

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 with Blocks

Image or Video Block

  • Media type: Choose what this slot shows: a still image, an uploaded (Shopify) video, a YouTube or Vimeo video, or mixed media (both an image and an uploaded video together).
  • Image: Choose the image. Available when the media type is Image or Mixed media.
  • Video: Pick the video file from your library. Available when the media type is Video or Mixed media.
  • Video URL: Paste a YouTube or Vimeo link.
  • External video’s aspect ratio: Set the video aspect ratio (default 16:9).
  • Media link: Optional URL for the whole media area so a click sends visitors to a page or resource. Can be a normal link or tied to metafields.
  • Mixed media: When mixed media is selected, you set both an image and a hosted video. The video is used when it is available, and the image is the backup when the video is missing, helpful if you use dynamic sources.

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.