How to tag products on a photo with Shop the look
Put numbered product spots on a lifestyle photo. Shoppers tap a spot to see the product and add it to their cart, without leaving the page.
A photo of your products being worn or used sells the whole outfit or setup. Shop the look lets shoppers tap each product in the photo and add it straight to their cart.
TL;DR
Go to Store Widgets, click Create Widget and pick Shop the look. Replace the sample photo with your own, click the photo where each product is, and choose the product. Click Publish, then Add to store. Choose your look in the Nudgesmart widget block's Widget setting and click Save.
Step 1 · Create the widget
In Nudgesmart, open Store Widgets and click Create Widget. Pick Shop the look. It's under Products & cart.
Widget library with the Shop the look widget highlighted under Products & cart
Screenshot coming soon
A new widget starts with one look that uses a sample photo, so you can see how it works.
Step 2 · Add your photo
In the Items tab, open the look and click Replace the photo. Upload your own.
A look in the Items tab with the photo, the Caption field and the Product spots section
Screenshot coming soon
Use a JPG, PNG or WebP. A clear photo of your products being worn or used works best, with each product easy to see. You can also add a Caption of up to 120 characters, such as "Weekend linen edit".
If you publish while a look still has the sample photo, Nudgesmart asks you to confirm: "You're still using the sample photo. Replace it with your own."
Step 3 · Add product spots
Under Product spots, click the photo where a product is. Shopify's product picker opens. Choose the product.
A numbered spot appears where you clicked. Repeat for each product in the photo.
- 3 to 6 spots work best. More than 6 can crowd the photo, and Nudgesmart warns you. A photo can have up to 8.
- To move a spot, click it, then use the arrow keys. Hold Shift for bigger steps. Or type exact positions in left to right (%) and top to bottom (%).
- To change or remove a spot, use Change product or Remove in the list under the photo.
If a product you tagged is later deleted or set to draft, the list marks it This product is no longer available. On your store, that spot is hidden.
You can add more looks to the same widget, up to 6. Each one has its own photo and spots.
Step 4 · Pick a style
Open the Design tab and choose a Style.
Step 5 · Publish and add it to your store
In the Visibility card, click Publish. Then click Add to store.
Add to store suggests The home page, under your banner. Click the button to open the theme editor there, with the Nudgesmart widget block added. Choose your look in the block's Widget setting, then click Save. Shop the look also works on product pages, collection pages and other pages.
To add it by hand, go to Online Store → Themes → Customize, open the page, click Add block, then Apps, and pick Nudgesmart widget.
What shoppers see
- Numbered spots on the photo. Every spot is always visible. Shoppers don't need to hover to find them.
- A product card when they tap a spot. It shows the product's photo, name and price, with Add to cart, or Choose options for a product with sizes or colors. Tapping outside it, or the close button, closes it.
- A list of every product in the look. On phones it sits under the photo. On bigger screens it sits beside it. The numbers match the spots, so shoppers who miss a spot can still find each product.
When a shopper has a code
If your popups give shoppers a discount code, each product can show an estimate of its price with that code. Under When a shopper has a code, tick Show the price with the code. It's off by default.
The product then shows a line such as "≈ $45 with your code". It's an estimate, never a crossed-out price, because other apps' discounts can't be seen and checkout sets the final price. It only shows for codes with no minimum spend.
Tips
- Use photos you took. Real outfits, rooms or routines from your own shoot show shoppers exactly what they'll get.
- Put spots on the product, not next to it. A spot on the jacket itself is clearer than one in the space beside it.
- Tag what you sell. Leave props and items you don't stock untagged.
Common pitfalls
- I clicked Publish and it didn't publish. A look needs at least one product spot: "Add at least one product spot before you publish." Click the photo and choose a product, then click Publish again.
- A spot doesn't show on my store. Its product may be deleted, in draft, or not sold in the shopper's country. Choose another product with Change product, or remove the spot.
- The whole look doesn't show. If none of a look's spots still has a product on your store (each was deleted, put in draft or isn't sold in the shopper's country), the look is hidden. A sold-out product keeps its spot, marked sold out. In the theme editor, it says "Add product spots to this photo in Nudgesmart."
What to read next
How to show a row of products: suggestions, your picks or recently viewed
Add a row of products to your product, cart or home page: Shopify's suggestions, products you pick, or what a shopper recently viewed. Show it as a slider, a grid or a bundle shoppers add in one tap.
How to add product labels like New or 20% off
Put a small label on your product cards across your store, such as New, 20% off, Bestseller or Sold out, from simple rules you set once.