The Shoppable Image Hotspots app by Convertify Apps makes it possible to create mapped images with multiple "hotspots" to products (or to other pages) embedded into the image.

For example, your image may show a woman wearing a blouse, skirt, heels, necklace, earrings and a bracelet and carrying a purse (i.e. 7 unique products). You could add a unique hotspot for each of these 7 products and "map" the hotspots to a specific position on the image (i.e. right next to each of the products). When your visitor mouses over (or taps on) one of the hotspots, a box will appear showing the product's title, price and additional text (if desired) along with an 'Add to Cart' button (if desired).

This help article is organized into 3 sections:

1. Install the 'Shoppable Image Hotspots' app
2. Create a shoppable image on the app 'Settings' page
3. Add a 'Shoppable Image Hotspots' section/block to a page in your theme

Install the 'Shoppable Image Hotspots' App

Click here to download the Shoppable Image Hotspots app from the Shopify App Store. On this page, click the green 'Add app' button and then follow the prompts to add the app to your Shopify store. You'll see that our app includes a 7-day free trial before the first $7.99 monthly billing (which is processed by Shopify as part of your regular monthly Shopify subscription).

Create a Shoppable Image on the App 'Settings' Page

Within your Shopify admin panel, click the 'Apps' link in the left menu and then select the 'Shoppable Image Hotspots' app. Then click the 'Settings' tab at the top of the page.

To create a new shoppable image, click the green 'Create New' button. When the page refreshes, you'll see that all of the settings are in a box on the left and a preview of the shoppable image section/block is in a box on the right. The settings (on the left) are organized into 3 expandable sections:

1. General Settings
2. Hotspot(s) - one per hotspot
3. Advanced Settings

Below the settings are a 'Save' button as well as an 'Add New Hotspot' button (which you can click to insert an additional hotspot into the image).

Let's go through each of the 3 expandable settings sections...

General Settings

The 'General Settings' section contains the following fields and settings:

• Section heading text - Enter your desired heading text for the section/block. This text will appear at the top of the section/block above the shoppable image. If you prefer not to show a heading, simply leave this field blank. (Note: Options for the font size, spacing and alignment of the heading text are in the Advanced Settings section below.)
• Image - Click the 'Add image' button and upload an image from your computer. This will be the shoppable image. You can upload a GIF, JPG or PNG image.