# Shoppable image editorial

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

## Watch tutorial

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

## Set up section

***

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](https://help.fluorescent.co/stiletto/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/stiletto/general/adapting-your-theme/dynamic-content-with-metafields)
{% endhint %}

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

Click the section to edit the general **section styles:** [Padding](https://help.fluorescent.co/stiletto/sections/using-sections#section-padding) | [Top divider](https://help.fluorescent.co/stiletto/sections/using-sections#section-top-divider) | [Animation](https://help.fluorescent.co/stiletto/sections/using-sections#section-animations)

&#x20;

## Add feature image

***

Upload a single image of two or more of your products together. Adjust the position, size, and 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 editorial** 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 2050px for optimal quality.
3. Change the **Image position** to display the image on the **Left** or **Right** side of the section.
4. Use the **Image size** slider to make your image between 50 - 65% of the width of the section.
5. Select the **Image aspect ratio** to crop your image to **Square**, **Landscape**, or **Portrait**.

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

   ![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-18e593ad0edf007db92b2db4471c455059562ccf%2Faspect-ratio.jpeg?alt=media)
6. Click **Save**.

</details>

&#x20;

`Click section for settings`

<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 <strong>Square</strong>, <strong>Landscape</strong>, or <strong>Portrait</strong>.<br><br>Choose <strong>Natural</strong> to display the original image shape.</td></tr><tr><td><mark style="color:blue;">Image position</mark></td><td>Show the image on the <strong>Left</strong> or <strong>Right</strong> side of the section.</td></tr></tbody></table>

&#x20;

## Add hotspots

***

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>

&#x20;

`Click hotspot block to find settings`

<table><thead><tr><th width="196.5">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>

&#x20;

## Section header

***

The **Section header** appears above the section. Add a **Heading**, **Subheading**, and optional **Button**.

`Click section for settings`

<table><thead><tr><th width="186">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading</mark></td><td>Change or remove the title of the section.</td></tr><tr><td><mark style="color:blue;">Heading tag</mark></td><td>Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics.<br><br>This option doesn't change the heading's appearance.</td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td> Set the heading text to Small, Medium, or Large.</td></tr><tr><td><mark style="color:blue;">Subheading</mark></td><td>Add multiple lines of rich text below the heading.</td></tr><tr><td><mark style="color:blue;">Button link</mark></td><td>Select or paste a URL for the button.</td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>Enter text to display as the button label. Leave this field blank to remove the button.</td></tr><tr><td><mark style="color:blue;">Button style</mark></td><td>Select a button style: either <strong>Solid</strong>, <strong>Outline</strong>, or <strong>Text</strong>.</td></tr><tr><td><mark style="color:blue;">Content position</mark></td><td>In the section settings, choose to show the headings above or beside the image.</td></tr></tbody></table>

&#x20;

&#x20;

***

> **Related links**
>
> [Shoppable image](https://help.fluorescent.co/stiletto/sections/theme-sections/shoppable-image)\
> [Complete the look](https://help.fluorescent.co/stiletto/sections/theme-sections/complete-the-look)


---

# Agent Instructions: 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-editorial.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.