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.

---

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.

Editing templates change all pages that use that template. For unique pages, use new templates or dynamic metafields

Section style guides

Section header

Section colors

Section width

Padding and divider

---

Add feature image

---

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.

STEPS

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.

   
4. Click Save.

_{Click section to find settings}

Setting	Description
Image	Select or upload one image that will have hotspot links overlayed on top. We recommend uploading an image with a minimum width of 2500px for optimal quality
Image aspect ratio	Crop the shape of your images to Square, Landscape, or Portrait. Choose Natural to display the original image shape.

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.

STEPS

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.

_{Click Hot spot block to find settings}

Setting	Description
Product	Select the product that the hotspot links to.
Horizontal position	Use the slider to move the hot spot from left to right to align the hot spot with the product's horizontal position.
Vertical position	Use the slider to move the hot spot from bottom to top to align the hot spot with the product's vertical position.

Hot spot colors

_{Click section to find settings}

Setting	Description
Hot spot color scheme	Select the color scheme to apply the background and text colors to the hot spot.

---

Related links

Shoppable image editorial Complete the look