Products and Hotspots
What this section does
Section titled “What this section does”The Products tab connects products to the featured image. Each product row controls what shoppers see and where its hotspot appears.
Add products
Section titled “Add products”- Open a look and select Products.
- Select Add product.
- Open the new product row.
- Search for and select the product.
- Choose the variant you want shoppers to add.
- Repeat for the other products in the image.
You can add up to eight products to one look.
Adjust product details
Section titled “Adjust product details”Each product row can include:
- Variant: The exact option shoppers will see and add.
- Display name: Optional shopper-facing wording that replaces the product title in the look.
- Color label: Optional wording for the selected color or finish.
- Sale price: Optional display price. Use a value of zero or higher.
- Discount code: An optional active Shopify discount assigned to that product.
These display settings change the look presentation without changing the product itself.
Place hotspots
Section titled “Place hotspots”- Open the product row you want to position.
- Select Drop pin.
- Select the matching product in the preview image.
- Drag the hotspot to fine-tune its position.
- Use the directional controls when you need a smaller adjustment.
- Repeat until every product has a hotspot.
The active product row and its hotspot stay linked, which helps you avoid placing the wrong pin.
Reorder or remove products
Section titled “Reorder or remove products”- Use the up and down controls to change product order.
- Select Remove to delete a product row from the look.
- At least one product must remain in the editor.
- Place a hotspot on a clear part of the product, not over a face or important text.
- Keep nearby hotspots far enough apart to be comfortable on mobile.
- Recheck variant and sale price after changing the selected product.
- Use Full screen when precise placement is difficult in the smaller preview.
Why does the look remain a Draft after I added all products?
Section titled “Why does the look remain a Draft after I added all products?”Every product also needs a hotspot. Open each row and confirm that its pin has been placed.
Why can I not add another product?
Section titled “Why can I not add another product?”The look has reached the maximum of eight products.
Does a display name rename the product in Shopify?
Section titled “Does a display name rename the product in Shopify?”No. It changes only the shopper-facing label inside this look.
Why is a discount code not listed?
Section titled “Why is a discount code not listed?”Confirm that the code is active in Shopify. If it was created recently, reopen the selector and try again.
Related guides
Section titled “Related guides”Need help?
Section titled “Need help?”If you still need help, contact support via the Contact page.