> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/sections/theme-sections/shoppable-image.md).

# Shoppable image

The **Shoppable image** section promotes multiple products in a single image with **Hotspot** links for each product. For an alternate layout, see the Shoppable image editorial section.

{% columns %}
{% column %}
![](/files/sk6SLSdRJWPgqSKjyJqQ)
{% endcolumn %}

{% column %}
{% embed url="<https://youtu.be/NkNmuWaqxW0>" %}
{% endcolumn %}
{% endcolumns %}

***

{% columns %}
{% column width="58.333333333333336%" %}

#### Set up section

In the editor side panel, click **(+) Add section** and select **Shoppable image**. Use the drag handles **`⋮⋮`** to re-order sections.

Click the section to edit general **section styles**, like colors, width, padding, and the section header.

{% hint style="info" %}
Editing templates change all pages that use that template. For unique pages, [use new templates](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [dynamic metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}
{% endcolumn %}

{% column width="41.666666666666664%" %}

#### <mark style="color:$info;">Section style guides</mark>

<table data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section header</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-header">/pages/nxNcI6zBaofEs4kObMMf#section-header</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section colors</strong></mark></td><td></td><td><a href="/pages/ugnuWgDX3bpXquEJrAeA#color-schemes">/pages/ugnuWgDX3bpXquEJrAeA#color-schemes</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section width</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-width">/pages/nxNcI6zBaofEs4kObMMf#section-width</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Padding and divider</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-padding">/pages/nxNcI6zBaofEs4kObMMf#section-padding</a></td></tr></tbody></table>
{% endcolumn %}
{% endcolumns %}

***

<h2 align="center">Add feature image</h2>

***

Upload a single image of two or more of your products together. Adjust the aspect ratio (shape) of your image before adding the hotspots next.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on the **Shoppable image** section to open the settings.
2. Under *Image*, use the **Select image** button to add an image featuring multiple products.

   > There are no required image dimensions but we recommend uploading an image with a minimum width of 2500px for optimal quality across devices.
3. Select the **Image aspect ratio** to crop your image to **Square**, **Landscape**, or **Portrait**.

   The **Natural** setting displays the original shape of your image.

   ![](/files/RFmWGT0O4EPQmXP8F5si)
4. Click **Save**.

</details>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="170">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image</mark></td><td>Select or upload one image that will have hotspot links overlayed on top.<br><br>We recommend uploading an image with a minimum width of 2500px for optimal quality</td></tr><tr><td><mark style="color:blue;">Image aspect ratio</mark></td><td>Crop the shape of your images to Square, Landscape, or Portrait.<br><br>Choose Natural to display the original image shape.</td></tr></tbody></table>

<h2 align="center">Add hotspots</h2>

***

Hotspots are clickable icons that mark the different products in your shoppable image. Select what products to link to and position them over the products in your image.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click **(+) Add Hotspot** and/or click on the Hotspot block to open its settings.
2. Click on a **Hotspot block** to open the settings.

   > Click **(+) Add Hotspot** to add new blocks.

   > Click **Remove block** or the eye icon to delete or hide a block.
3. Click **Select product** and select which product the hotspot should link to.

   > The hotspot displays a popup with the product name and price. Customers can click this popup to go to the product page.
4. Use the **Horizontal position** slider to move the **Hotspot** from left to right until it is aligned with the product in the image.
5. Use the **Vertical position** slide to move the **Hotspot** from bottom to top until it is aligned with the product in the image.
6. Click **Save**.

</details>

<sub><mark style="color:$info;">Click Hot spot block to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="222">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Product</mark></td><td>Select the product that the hotspot links to.</td></tr><tr><td><mark style="color:blue;">Horizontal position</mark></td><td>Use the slider to move the hot spot from left to right to align the hot spot with the product's horizontal position.</td></tr><tr><td><mark style="color:blue;">Vertical position</mark></td><td>Use the slider to move the hot spot from bottom to top to align the hot spot with the product's vertical position.</td></tr></tbody></table>

### <mark style="color:$primary;">Hot spot colors</mark>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="222">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Hot spot color scheme</mark></td><td>Select the color scheme to apply the background and text colors to the hot spot.</td></tr></tbody></table>

***

> **Related links**
>
> [Shoppable image editorial](/stiletto/sections/theme-sections/shoppable-image-editorial.md)\
> [Complete the look](/stiletto/sections/theme-sections/complete-the-look.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/stiletto/sections/theme-sections/shoppable-image.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.