How to Create Shoppable Images for Your Shopify Store

Install Spot Layer: Hotspot Images

Navigate to https://apps.shopify.com/hotspot-images and install the app on your store.

Create your First Shoppable Hotspot Image

Click on the "Create an image" button and select an image to upload. After the upload, you will be redirected to the image editor.

Add The Clickable Dots To The Image

Click on the image to add interactive hotspots. After clicking, a dot will appear, along with a form where you can provide additional product information and set the product link.

Customize The Hotspot Image

After setting the dots, you can customize the appearance of your newly created interactive hotspot image by clicking the settings button.

Embed The Hotspot Image Into Your Shopify Shop

When you think the image is ready to go live, click the "Embed" button and copy the image id.

Navigate to your theme and click the customize button.

Within the theme editor, navigate to the page you want to add the hotspot image to, click the "add section" button and choose the hotspot image section.

Once the Hotspot Image section is chosen, an input field will appear where you can place the previously copied id. Press the save button and you are done.

Alternative Embed Option

Alternatively, you can copy the embed code and paste it in the content area of one of your pages or blog posts.

Navigate to the page you want to place the hotspot image into and click on the "show html" button to switch to the code view.

Then paste the previously copied code and save the page.

If you now navigate to this page, the hotspot image should appear within the content section. This way the image can be placed easily between paragraphs within your blog post.