> 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-editorial.md).

# 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.

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

#### Watch tutorial

{% endcolumn %}

{% column width="66.66666666666667%" %}
{% 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 editorial**. Use the drag handles **`⋮⋮`** to re-order sections.

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

{% 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 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 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.

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

</details>

<sub><mark style="color:$info;">Click section for 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 <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>

<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 hotspot block to find settings<mark style="color:$info;"></sub>

<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>

### <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>

<h2 align="center">Content</h2>

***

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

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

<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>

***

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