> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/unicorn-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/lookbook/shoppable-items.md).

# Shoppable items

Lets you add an interactive hotspot to the Lookbook image.

{% hint style="success" %}
**Tip:** To add a new hotspot over the image, use the **"Shoppable item"** block.\
The given block can be added by pressing the **"Add block"** button.
{% endhint %}

## Shoppable item

When customers hover over the hotspot, a pop-up displays the selected product or collection, making it easy to explore and shop featured items directly from the image.

Source\
Use the option to choose what the hotspot displays. You can link it to either a product or a collection.

* **"Product"**. Select the option if you use the "[<mark style="color:blue;">Product</mark>](#product)" block.
* **"Collection"**. Set the option to use the "[<mark style="color:blue;">Collection</mark>](#collection)" block.

**Horizontal position**\
Use the slider to place the hotspot along the width of the image. Increase or decrease the value until the hotspot is positioned over the desired area.

**Vertical position**\
Use the slider to place the hotspot along the main image height. Adjust the value to align the hotspot with the featured product or collection in the image.

**Alignment**\
Controls where the product or collection pop-up appears relative to the hotspot: "Top", "Bottom", "Left", or "Right". Choose the alignment that provides the best visibility and prevents the pop-up from extending beyond the image boundaries.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FcjZLCjdYiDvANqo8uvmG%2Flookbook_shoppable%20item.png?alt=media&amp;token=0f710bda-03c4-4360-823f-6e4f91382b34" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
The "Shoppable item" includes two additional blocks: **"Product"** and **"Collection"**.
{% endhint %}

***

### Product

**Product**\
Connect a desired product to the section using the source selector. To create a new product, press the **"Create product"** button to navigate to your *Shopify admin -> Products*.

**Image**\
Use the picker to replace the default image with a custom one.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Fn1gjjNJ37s7fSENn3yAa%2Flookbook_product.png?alt=media&amp;token=5505e519-c89e-4feb-91df-b085e13896ff" alt=""><figcaption></figcaption></figure>

***

### Collection

**Collection**\
Set the required collection by pressing the **"Select"** button.

**Image**\
Use the picker to assign a collection image or replace the default image with a custom one.

**Description**\
Use the field to introduce a collection. Leave the field empty to deactivate the description.