Shop the look

Show a styled photo with clickable hotspots next to the products in it. Use it to let shoppers buy a complete look.

---

The Shop the look section shows a lifestyle image with hotspots that point to products, next to cards for those same products. Shoppers can explore the look and buy each item from one place.

1. Our guide to set up a Shop the look section:

Steps:

• In the theme editor, click Add section.

• Locate Shop the look.

• Click Save.

The section is added with two Product blocks. You can add up to 6.

2. Section settings

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

• Heading: The title of the section. Leave it blank to hide it.

• Heading size: 15–80px.

• Desktop layout: Image first / Image second. Places the image on the left or right of the products.

• Image settings

  • Image: The lifestyle photo that shows the look.

  • Image overlay opacity: Darkens the image so hotspots stand out, 0–100%.

  • Corner radius: Rounds the image corners, 0–40px.

• Product card

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

  • Content alignment: Left / Center.

  • Image ratio: Portrait / Square / Arch.

  • Show second image on hover: Shows the product's second image when shoppers hover over 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.

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

• Hotspot

  • Hotspot icon: Bag / Cart.

  • Hotspot color: Light / Dark. Pick the one that stands out against your image.

• Section

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

This section doesn't show color swatches on its product cards. Swatch styles for other sections are set in Theme settings → Swatches.

3. Product block settings

Each block is one product, with its own hotspot on the image.

• Product: The product to show and link to.

• Hotspot position

  • Horizontal: Moves the hotspot from left (0%) to right (100%).

  • Vertical: Moves the hotspot from top (0%) to bottom (100%).

4. Tips

• Use an image where each product is clearly visible, then place each hotspot right on the item.

• Preview the section on mobile to check that the hotspots still sit on the right products.

• Try both Hotspot color options to see which stands out best on your image.