Image with products

This section helps bridge inspiration and conversion by visually connecting products with real-life context.


The Image with products section combines a visual banner with a curated product list, helping you highlight a lifestyle image while directly promoting related products. It’s ideal for storytelling and driving product discovery in a single layout.

1. Our guide to set up a Image with products section:

circle-info

Steps:

  • In the theme editor, click Add section.

  • Locate Image with products.

  • Click Save.

2. Section settings

  • Heading: Add a title for the section.

  • Heading size: Adjust the prominence of the heading.

  • Color scheme: Controls background, text, and button colors across the section.

  • Corner radius: Adjusts the roundness of the Image block.

3. Image block settings

This block acts as the visual focal point of the section.

  • Image: Upload the main image for the section.

  • Image overlay opacity: Adds a dark/light overlay to improve text readability on the image.

  • Text settings:

    • Heading: Add a title displayed on the image.

    • Heading size: Adjust text size.

    • Description: Add supporting text to provide more context.

    • Content position: Control where the text appears on the image.

    • Button label: Add CTA text.

    • Button link: Assign a destination link.

    • Use outline button style: Switch between solid and outline button styles.

4. Products block settings

Displays a curated list of products alongside the image.

  • Product list: Select up to 4 products to feature in the section.

  • Product card settings:

  • Font size scale: Adjust product title size.

  • Content alignment: Align product information within the card.

  • Image ratio: Control how product images are displayed.

  • Show second image on hover: Displays alternate product image on hover.

  • Add image padding: Adds spacing inside the image container for a softer layout.

  • Show image border: Adds a border around product images.

  • Show vendor: Displays brand/vendor name.

  • Show product rating: Displays product ratings (requires a rating app).

  • Show color swatches: Displays variant color options.

  • Enable quick add button: Allows customers to quickly view or add products without leaving the page.

Last updated

Was this helpful?