How to Create Shoppable Images for Your Shopify Store

May 06, 2024, 10:02 AM

Image Hotspots For Shopify

Install Spot Layer: Hotspot Images

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

Install Spot Layer: Hotspot Images

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.

Create Your First Shoppable Image

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.

Add Shoppable Images To a Shopify Store

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.

Image Hotspot Settings

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.

Embed-The-Shoppable-Image-Into-Your-Shopify-Shop

Navigate to your theme and click the customize button.

Theme Editor

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.

Add 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.

Hotspot Image Placement Within The Page

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.

Alternative Embed Option

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.

Click The Show Html Button

Then paste the previously copied code and save the page.

Paste The Embed Code

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.

Hotspot Image Within A Content Section