I’m building a clothing store and want to add clickable product pins to lifestyle photos. For example, customers could click on the dress, shoes, or bag a model is wearing and go directly to the product.
What’s the easiest way to set this up on Shopify? Any app recommendations?
The quickest route is to check your current theme before installing an app:
Go to Online Store → Themes → Customize, open the page or template, then choose Add section. Search for “shop the look,” “shoppable image,” or “image hotspot.” The sections available depend on the theme and theme version.
If your theme has no suitable section, use a shoppable-image/hotspot app block, or add a small custom theme section. Before publishing, test hotspot positioning on mobile, product and variant links, loading speed, and accessible labels.
If this is only one image with a few products, a theme section is often cleaner than adding a large app.
Which theme are you using, and do you need the pins only on the home page or across product and collection pages?
Thanks for the suggestions! I’m using a custom theme cloned from Dawn.
I want to add images for new collections on the homepage, with each collection having a different image and clickable product pins on the image.
Besides linking the pins to products, it would be even better if the section/app also supported an Add to Cart feature, so customers could add the item directly on the current page.
Thanks for the recommendation! I quickly checked the demo store and it looks really good.
However, I couldn’t find an Add to Cart feature in the demo, and I also couldn’t find any information about it on the app’s page. I’ll install it and take a closer look to see if the feature is available.
That detail changes the scope: a pin-only lookbook app is not enough.
With a Dawn-based theme, there are two practical paths:
An app that explicitly supports shoppable hotspots plus a quick-add or variant picker.
A custom homepage section where each hotspot stores its position and product reference, then uses the theme’s product-form/cart behavior.
The deciding point is variants. If the clothing has size or color variants, a one-click Add to Cart either needs a chosen fixed variant or an inline chooser; silently adding the first available variant can create wrong orders.
Before committing to an app, I would test: separate images per section instance, multiple pins, variant selection, sold-out behavior, cart-drawer update without a reload, and mobile pin positioning.
Do these products have size/color variants, and should a pin open a chooser or add one fixed variant? That answer will tell you whether an app block is enough or a small custom section is the cleaner path.
You could also try searching the Shopify App Store with keywords like “shoppable image” or “image hotspots” There are a few apps that support adding product pins directly to images, so you may find one that also has an Add to Cart option.
Thanks for your helpful information. My client is looking for a simple Add to Cart button, but I’ll ask them for more details about the variants and how they want the feature to work.
Developer here, so bias disclosed — I build Hotspot Studio: Shop the Look, and the part you couldn’t find in the other apps is exactly what it does:
• Add to Cart happens right on the image: each pin opens a popup with the live price, an inline variant picker and an add-to-cart button. It adds to the real cart and updates the theme’s cart drawer in place, no page reload — works on Dawn and Dawn-cloned themes as-is.
• On the variant question kai_xing raised: the popup covers both cases — a full variant chooser when the product has options, one-tap add when it doesn’t. Sold-out variants show a disabled label instead of a button that fails at the cart.
• One image per collection on the homepage: each section is its own image + pins, and you add as many app blocks as you need in the theme editor.
• Mobile: you upload a separate phone image and position its pins independently, so the dots stay on the dress/shoes/bag in the tighter crop.