HBN Notes / Shopify guide
How to tag products in Shopify lookbook images
Select the products shoppers can see, place markers without covering key details, and test every link against variant availability and mobile screens.
The easiest product to tag in a lifestyle photograph is not always the most useful one. A marker on every visible object can turn a calm image into a map of competing instructions.
Product tags work when they answer a likely question — “which jacket is that?” — without making the photograph harder to see. Selection, placement, and the state of the linked product all matter.
Tag the products shoppers are most likely to ask about
List the products a shopper could reasonably want to identify from the image. Prioritize the central outfit pieces, furniture, tools, or ingredients that define the composition. Background props and barely visible accessories do not need tags simply because they are sold by the store.
Use the product a shopper will actually reach. A marker should not open a collection, a similar item, or a parent product that cannot represent the photographed choice. If the image shows a specific color, make sure the product page still offers it or clearly explains the alternative.
Place each marker on the product without covering key details
Place a marker inside the visible boundary of the product so the connection is immediate. Avoid covering a logo, a garment detail, a person's face, or the feature that makes the item worth showing. For a narrow object, a nearby edge can be clearer than the exact visual center.
Keep enough space between markers for touch input. Desktop precision can hide a mobile problem: two targets that are easy to distinguish with a pointer may be frustrating under a thumb. If markers collide on a phone, reduce the number of tags or choose a closer crop; shrinking every marker is not always the readable answer.
Test recognition before interaction. Ask whether the marker and the object read as one pair before checking whether the popup works.
Adjust contrast one photograph at a time
A marker style that works on a pale studio wall may disappear against denim, foliage, or a dark interior. Use a fill, number, and outline combination that survives both the lightest and darkest areas where markers appear. An outline often protects legibility better than a more aggressive brand color.
Keep the system consistent within one photograph. Changing every marker to a different color makes the shopper learn decoration rather than meaning. If an image cannot support readable markers without obscuring the subject, it may work better as an untagged editorial photograph.
Check the product state behind every tag
Open each preview and product link. Confirm the title, featured image, price, and availability are appropriate for the intended market. Products may be active in Shopify but unavailable to a country because of publication, catalog, inventory, or delivery settings.
Decide how sold-out and archived items should be handled before the campaign runs. A temporary stockout may justify keeping the scene live if the product page communicates restock expectations. A permanently retired item usually calls for removing the tag, replacing the photo, or retiring the lookbook.
Recheck markers whenever the image changes
Replacing a photograph can preserve the list of linked products, but their positions no longer mean anything until reviewed. A new crop, aspect ratio, or mobile treatment can also move the visible object away from its original coordinate.
Finish with one narrow-screen test and one real storefront test. Tap every marker, close every preview, follow every product link, and return to the lookbook. The path should be clear in both directions.