Shoppable image

What is the shoppable image section? #

Easy to use and quick to set up, the Shoppable image is an excellent way to create an interactive ‘Shop the Look’ section, to assist with upselling or guiding customers to complementary products. Up to three clickable hotspots can be added to the section, each linking directly to a product from your inventory, displaying high-level information such as product Title, Vendor and Price.

If you wish to visually highlight product USPs or key features on your store, consider using the product features section instead. The main difference being that with the Product features section, images and text can be combined to help describe or promote specific product features via maximum of five hotspots.

How to set up the shoppable image section #

Steps

1. Open the Theme Editor.
2. Click Add section and select Shoppable image to add the section to your template.
3. Under Image, click Select image to choose an image from your library, or hit Explore free images to browse the stock libraries.
4. Under LAYOUT, you can customize the design for desktop and mobile devices with just a few clicks.
5. The TEXT settings can be used to add a Heading, Text and a Button to the image to help describe or promote the offering.
6. The STYLE settings allow further customization of the section design including Hotspot color, Color scheme and Button style.
7. Click Save.
8. Under the Shoppable image section, click Add Hotspot (up to a maximum of three per section).
9. In the Hotspot block, select a product from your inventory to highlight.
10. Position the hotspot over the relevant part of the image using the Horizontal position and Vertical position sliders. There’s no need to do this for desktop and mobile – one placement works for all devices.
11. Once all the Hotspots are set up, click Save.