Image with products

Pair a large lifestyle image with up to four products. Use it to connect inspiration with products shoppers can buy.

---

Pro feature. This section requires a Pro or Max License key. Without one, it's hidden on your live store and shows a 🔒 Pro notice in the theme editor. Learn about plans and License keys

The Image with products section shows a large image, with optional text and a button on it, next to a grid of up to four products. Use it to tell a story with an image and promote the products in it.

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

Steps:

• In the theme editor, click Add section.

• Locate Image with products.

• Click Save.

The section is added with one Image block and one Products block. Drag them to swap sides.

2. Section settings

• Color scheme: The colors of the section's background, text and buttons.

• Section header

  • Heading: The title above the image and products. Leave it blank to hide it.

  • Heading size: 15–80px.

  • Heading alignment: Left / Center.

• Corner radius

  • Image: Rounds the corners of the large image, 0–40px.

• Section

  • Top padding and Bottom padding: 0–100px.

3. Image block settings

• Image: The large image.

• Image overlay opacity: Darkens the image so the text on it is easier to read, 0–100%.

• Text

  • Heading: A title shown on the image.

  • Heading size: 15–80px.

  • Description: Supporting text under the heading.

  • Content position: Where the text sits on the image: Top left / Top center / Top right / Middle left / Middle center / Middle right / Bottom left / Bottom center / Bottom right.

  • Button label and Button link: A button on the image. Leave the label blank to hide it.

  • Use outline button style: Shows an outlined button instead of a solid one.

4. Products block settings

• Product list: Select up to 4 products.

• Product card

  • Font size scale: Size of the product titles, 100–200%.

  • Content alignment: Left / Center.

  • Image ratio: Adapt to image / Portrait / Square / Arch.

  • Show second image on hover: Shows the product's second image when shoppers hover over the card.

  • Add image padding: Adds space around the product image inside the card.

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

  • Show vendor: Shows the product's vendor.

  • Show product rating: Shows star ratings. Requires a product rating app.

  • Show color swatches: Shows color/variant swatches on the product cards. Set the swatch style in Theme settings → Swatches.

  • Enable quick add button: Lets shoppers add a product to the cart without leaving the page.

• Mobile layout

  • Columns on mobile: 1 column / 2 columns.

  • Enable swipe on mobile: Turns the products into a swipeable slider on phones.

5. Tips

• Choose products that appear in the image, so shoppers can see them in context.

• Use four products for a full 2 × 2 grid next to the image.

• On mobile, turn on Enable swipe on mobile to keep the section short.