Hotspot Studio video guides

0:00 · Create a section Let’s turn a photo into a shoppable image, step by step. Four steps, no code. Open Hotspot Studio in your Shopify admin, and click Create section. You get a new, unsaved section. Nothing goes live until you publish. Give it a name you’ll recognize. Then add a photo. Upload one, or pick one from your store’s files. Room shots with a few clear products work best.

0:29 · Place hotspots Click a product in your photo. A small menu asks what the hotspot is: a product, a collection, a note, or a link. Choose Product, then pick it from your catalog. Search for it, tick the box, and click Add. The pin lands where you clicked, and the live preview shows the popup your shoppers will see. Add a pin for every product in the photo. Each pin opens its own product, with its price and options. To fine-tune a spot, drag the pin, or nudge it with your arrow keys. Phones get their own pin positions, so check the Mobile preview too. Next, let’s choose what the popup shows.

1:15 · Popup details Click a pin to edit it. Tick View product, and shoppers get a button to the full product page. Then choose a description. Product description uses the text you already wrote in Shopify. The live preview shows exactly what your shoppers will see.

1:35 · Phone image & crop Phones show the same photo, unless you add one just for them. Under Media, add a phone image. Here, it’s the same room photo. Click Crop, pick a square, and drag the frame to keep the products in view. Apply crop saves it as a new image. The original stays in your files. Your pins move with the crop, so they stay on the products. Check them in the Mobile preview.

2:01 · Choose where it shows Now save the section. Saving unlocks assigning and publishing. Next, choose where it shows. Collections, pages, blog posts and the home page are all in this list. For product pages, click Assign products, find the product, tick the box, and click Add.

2:17 · Publish The section appears on those product pages automatically. Click Publish now. Your section is published. The first time, there’s one more step.

2:33 · Add to theme If your theme doesn’t have the Hotspot Studio block yet, this yellow notice tells you. Click Add block in theme editor. The theme editor opens on your product, with the block already added. It lands at the bottom of the page. Drag it up, under the product details. There’s nothing to fill in. The block shows the section assigned to each product by itself. Need space above or below it? Set Top and Bottom under Padding. Left and right padding is in your style preset, under Layout. Click Save. Back in the app, the notice is gone. You only do this once for your product pages.

3:16 · See it live Open the product page, and there is your shoppable image. Shoppers click a pin to see the product, its description, and the View product button. On phones, they get the square photo you cropped. That is your first shoppable image.

0:00 · Spot the problem When a section runs right up to the edges of the screen, side padding fixes it. Here is how. On some themes, or with a section set to full width, the image reaches the very edge of the page. On computers, the photo touches the left edge, and the button touches the right. On phones, there is no space on either side. Here, the theme editor sets this section’s width to Full.

0:26 · Add side padding Open your section, and click the pencil next to its style preset. In Layout, find Section padding. Left and right is for computers and tablets. Forty pixels matches this theme. Left and right on phones works up to 749 pixels wide. Sixteen is a good start. Click Save. It goes live on every section that uses this preset.

0:52 · Check your store On computers, the section now lines up with the rest of the page. On phones, it keeps a small margin on both sides. Need space above or below? Use the block’s Padding in the theme editor. That is it. No more sections stuck to the edges.