Shop the look

This section is ideal for creating an immersive, editorial-style shopping experience that encourages customers to explore and shop complete looks.

---

The Shop the look section allows you to showcase a styled image with interactive hotspots that link directly to products. This creates a highly engaging shopping experience where customers can explore and purchase items directly from a visual “look”.

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.

2. Section settings

• Color scheme: Applies colors to the section background, text, and buttons for a cohesive look.

• Heading: Add a title for the section (e.g., Shop the look).

• Heading size: Adjust the size of the heading.

• Desktop layout: Controls whether the main image appears on the left or right side of the product list.

• Image settings

  • Image: Upload the main lifestyle image that represents the “look”.

  • Image overlay opacity: Adds a dark overlay to improve hotspot visibility and contrast.

  • Corner radius: Adjusts rounded corners of the image for a softer or sharper appearance.

• Product card settings: Control how linked products are displayed next to the image:

  • Font size scale: Adjusts product title size.

  • Content alignment: Aligns product information within cards.

  • Image ratio: Controls the shape of product images.

  • Show second image on hover: Displays an alternate product image when hovering.

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

  • Show vendor: Displays brand/vendor name.

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

  • Show color swatches: Displays variant color options.

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

• Hotspot settings: Hotspots are clickable icons placed on the image to highlight products.

  • Hotspot icon: Choose the icon style: Bag or Cart.

  • Hotspot color: Adjust contrast depending on image background.

3. Product block settings

Each block represents one product linked to a hotspot on the image.

• Product: Select a product from your store to display and link.

• Hotspot position: Defines where the hotspot appears on the image:

  • Horizontal: Controls left → right position.

  • Vertical: Controls top → bottom position.