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
- Open the Theme Editor.
- Click Add section and select Shoppable image to add the section to your template.
- Under Image, click Select image to choose an image from your library, or hit Explore free images to browse the stock libraries.
- Under LAYOUT, you can customize the design for desktop and mobile devices with just a few clicks.
- The TEXT settings can be used to add a Heading, Text and a Button to the image to help describe or promote the offering.
- The STYLE settings allow further customization of the section design including Hotspot color, Color scheme and Button style.
- Click Save.
- Under the Shoppable image section, click Add Hotspot (up to a maximum of three per section).
- In the Hotspot block, select a product from your inventory to highlight.
- 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.
- Once all the Hotspots are set up, click Save.
Why are my hotspots hard to see over my image?
The default hotspot color may not have sufficient contrast to stand out from the background image. Under STYLE use the color picker to select a color with greater contrast.
How can I make the shoppable image larger?
Under LAYOUT uncheck the Show text setting to hide the heading, text and button and increase the image size to full site width. You may want to consider adding a Rich text section directly above or below to help describe the offering.
Why does my image appear low quality?
If the image you have selected in step three above is smaller than the recommended 1920px wide, it will be scaled up and subsequently may loose some quality. To avoid this, consider uploading a larger image.
Image quality can also be controlled globally in Theme settings > Advanced > Image quality. Check this setting to ensure it is no set to Low (fastest page loading).