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:

circle-info

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.

Last updated

Was this helpful?