Carousel LookBook 🔥

The Carousel Lookbook feature allows you to add interactive product hotspots directly on carousel slide images. Customers can click on these hotspots to view product information in a popup overlay without leaving the carousel.

The feature supports up to 3 lookbook points per slide, with customizable positioning and popup placement options.

Setting Carousel LookBook

Go to Storefront -> My Themes -> Customize. (If your store is a new store, you may need to go to Channel Manager -> Themes -> Edit Theme)

In the Theme Editor -> Go to Home Page / Carousel LookBook

Find Product Id

You can find the product ID in the product’s URL, as shown in the image below.

Configure Lookbook Points

For each carousel slide (starting with slide 1), you can add up to 3 lookbook points using the following theme settings:

Example settings for Slide 1:

• LookBook Slide 1 - Item 1: Product's ID - Product ID for first lookbook point

• LookBook Slide 1 - Item 1: Product's Position - Position and popup placement for first point

• LookBook Slide 1 - Item 2: Product's ID - Product ID for second lookbook point

• LookBook Slide 1 - Item 2: Product's Position - Position and popup placement for second point

• LookBook Slide 1 - Item 3: Product's ID - Product ID for third lookbook point

• LookBook Slide 1 - Item 3: Product's Position - Position and popup placement for third point

Set Position Values

The position value format is: [leftMb]-[value];[topMb]-[value];[leftTab]-[value];[topTab]-[value];[leftDesk]-[value];[topDesk]-[value]|popup-[direction]

Examples:

• leftMb-10%;topMb-24.5%;leftTab-24.3%;topTab-23.3%;leftDesk-19.9%;topDesk-35.7%

  • Mobile (Mb): 10% from left, 24.5% from top

  • Tablet (Tab): 24.3% from left, 23.3% from top

  • Desktop (Desk): 19.9% from left, 35.7% from top

• leftMb-74.5%;topMb-48.5%;leftTab-91.7%;topTab-65.5%;leftDesk-89%;topDesk-71.4%|popup-left

  • Mobile: 74.5% from left, 48.5% from top

  • Tablet: 91.7% from left, 65.5% from top

  • Desktop: 89% from left, 71.4% from top

  • Popup direction: Opens to the left (prevents overflow on right side)

When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.