> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/bc-nimo-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/bc-nimo-documentation/home-decor/carousel-lookbook.md).

# Carousel LookBook 🔥

<figure><img src="/files/4mQOkSzL4mZRGmYTuQXJ" alt=""><figcaption></figcaption></figure>

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**. <mark style="color:red;">(If your store is a new store, you may need to go to</mark> <mark style="color:red;"></mark><mark style="color:red;">**Channel Manager -> Themes -> Edit Theme**</mark><mark style="color:red;">)</mark>

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

<figure><img src="/files/8gl5Bj30JiuF6f9HTpNB" alt=""><figcaption></figcaption></figure>

### Find Product Id

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

<figure><img src="/files/A4zTPm7BJxyK3X7IXJVn" alt=""><figcaption></figcaption></figure>

### 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%`&#x20;
  * **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
* &#x20;`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)

{% hint style="info" %}
When you are happy with your changes, don't forget click **Save** and **Publish** to repackage the edited theme.
{% endhint %}