Shop-the-look pins: sold out, unpublished and variant rules

Pinning a product onto a photo is the easy part. The questions arrive later: the jacket in the shot was pinned in rust, rust sold out, and now the pin says Sold out while blue sits in stock. Or a product in a lookbook was unpublished for the season and the pin simply vanished. Or a shopper in Canada sees a price and a shopper in Germany sees another. None of these are bugs, but all of them are decisions Snug Gallery makes on your behalf, and this guide explains each so you can pin accordingly.

What a pin actually stores

A pin is four values: a horizontal and a vertical position as percentages of the image, the product it points at, and optionally one variant of that product. Positions are percentages rather than pixels so the pin lands on the same part of the photo whether it is rendered 300 or 1,400 pixels wide, and whether the layout crops the image or shows it whole. The product and variant are Shopify's own identifiers, which is why the pin keeps working after you rename the product or change its price.

Whether a pin carries a variant is decided when you place it. In the product picker, picking a product pins the product; expanding it and ticking exactly one variant pins that variant. The editor shows which is which next to each pin, as the variant title or the words Any variant. That single choice drives most of what follows.

Product pin or variant pin

A product pin opens a card with a dropdown of the product's variants, preselected to Shopify's usual default, which is the first available one. The shopper picks a size or colour and adds it. Options that are sold out stay in the list with a Sold out suffix, so a shopper can see that the colour exists even when they cannot buy it today.

A variant pin opens a card locked to that variant. There is no dropdown; the card shows the variant's title, its own image if it has one, and its price. This is the right choice when the photo shows a specific colour and sending a shopper to the wrong one would feel like a bait and switch. It is the wrong choice for anything with sizes, because a pin locked to Medium is useless to everyone else. For sized goods, pin the product and let the dropdown do the work; for colourways, pin the variant.

Both kinds of card carry a View product link to the product page, so a shopper who wants the full description, more photos or a size guide is one tap away. Adding from the card uses Shopify's cart endpoint, the same one the theme's own add-to-cart buttons use, and the gallery then asks the cart for its new count and updates the header bubble if the theme exposes one. Themes that listen for a cart refresh event get one too, which is how most cart drawers open themselves.

When the pinned variant sells out

The card renders from live store data on every page load, so inventory is never stale by more than the page cache. A variant pin whose variant has no stock shows the price as usual and a disabled button reading Sold out instead of Add to cart. The pin itself still appears on the photo, because the product is still something the shopper might want to know about, and the View product link still works, which matters if the product page offers a back-in-stock form.

A product pin behaves better here: the preselected variant is the first available one, so if rust is out and blue is in, the card opens on blue. The shopper can still choose rust from the dropdown and see it marked sold out. If every variant is out, the button is disabled whichever option is chosen.

There is one more check at the moment of adding. Shopify's cart endpoint refuses an add for several reasons, among them stock that ran out since the page loaded and a cart that already holds the maximum quantity. When that happens the card shows the store's error message, and if the refusal looks like a stock problem it quietly re-reads the product and flips the button to Sold out so the shopper is not invited to try again. A photo that has been open in a tab for an hour during a drop behaves sensibly.

If a colour has sold out for good, re-pin. Open the image, remove the pin and place a new one on the product or on the replacement variant. Pins do not update themselves when you delete a variant in Shopify; the old pin falls through to the next rule.

When the product is unpublished, archived or hidden

The gallery renders on the storefront with the products the storefront can see. A product that is unpublished from the Online Store channel, archived, in draft, or simply deleted is not visible to the theme, and a pin that points at such a product is skipped: no dot, no card, no error. The rest of the image renders normally. This is intentional. A visible pin that opens an empty card, or a link to a page that returns 404, is worse than no pin, and galleries outlive the products in them.

The quiet skip has a cost: nothing tells you. A lookbook pinned last season can lose half its pins over the summer and look as though it was never shoppable. Two habits help. First, when you archive or unpublish a product, search for it in the gallery editor and move the pin to its successor. Second, open your shoppable pages in a private window after any large catalogue change, because the editor shows pins by count and does not know whether the storefront can see each product. The product picker already hides draft and archived products when you place a pin, so new pins start out valid; it is later changes that drift.

Products published to the Online Store but hidden from search and collections still render. Hidden is a visibility setting for navigation, not for the theme, and a pin is a direct reference. That makes pins a tidy way to sell a product that only exists in a lookbook, such as a limited collaboration piece, without it appearing in your collection grids.

Prices, compare-at and markets

The card's price is formatted by Shopify at render time in the currency and format of the market the shopper is browsing, so a visitor on your Canadian subfolder sees Canadian dollars and a visitor in Germany sees euros with the comma in the right place. You do not configure any of this in Snug Gallery; it follows whatever your store does for product pages.

If the variant has a compare-at price above its price, the card shows it struck through next to the current price. That means a sale set by lowering the price and keeping the old one as compare-at shows up on pins automatically. A sale run as an automatic discount applied at checkout does not, because the product price has not changed; the card shows the full price and the discount appears in the cart. Shoppers notice the difference, so if your sale is checkout-based, say so in the caption beside the photo.

Switching variants in the dropdown updates the price, the compare-at and the image without a page load, from a small block of variant data written into the page when it rendered. That data is per product, not per pin, so pinning the same product on five photos costs one block each; the weight is trivial next to the images themselves, which is the subject of gallery page speed and lazy loading.

Pin styles, and which to use when

In the theme editor the block offers three styles for pins, plus a colour. Dot is a plain marker and the default. Numbered adds a number to each dot, counting pins on that image from one. Product name tag writes the product's title next to the dot. The choice applies to every pinned image in that block, so decide per page rather than per photo.

Numbered pins pair naturally with the Lookbook layout, which lists the pinned products beside the image in the same order, so a shopper can match the 2 on the sleeve to the second product in the list. Name tags are the most self-explanatory and the most cluttered; they suit photos with one or two products and plenty of background. Dots are right for busy editorial shots and for a grid where captions already do the explaining. Whatever you pick, each pin is a real button with the product's name as its accessible label, so screen readers announce Shop followed by the product title; see the accessibility checklist for the rest of what the block does there.

What happens on the Free and Standard plans

Shop-the-look is an Unlimited plan feature. You can place pins on any plan, and they are saved with the image, but the storefront only renders them when the store is on Unlimited; on other plans the photos display without pins and the script that powers the cards is not loaded at all, so there is no weight on the page. Moving to Unlimited later switches every saved pin on without any re-editing. If you are building a lookbook ahead of a launch, that lets you prepare the pins before paying for the month in which you need them.

The first setup of a shoppable page, from choosing photos to placing the block, is walked through in How to make a shoppable lookbook on Shopify. This guide is what to expect once the lookbook has been live for a while and the catalogue underneath it has moved on, which it always does. Snug Gallery resolves each pin against the live store on every page view, so the gallery never shows a product you cannot sell; your job is to point the pins at the products you can.

Frequently asked questions

Should I pin the product or a specific variant in a shoppable gallery?

Pin the variant when the photo shows a specific colour or finish and the shopper should land on exactly that. Pin the product when the choice is size, so the card offers a dropdown instead of locking everyone to one size. In Snug Gallery you pin a variant by ticking exactly one variant in the product picker; otherwise the pin is for the whole product.

What does a shop-the-look pin show when the product is sold out?

The pin still appears and opens its card, which shows the price and a disabled Sold out button in place of Add to cart. The View product link still works. For a product pin, the card opens on the first variant that is available, so a sold-out colour does not block the others.

Why did a pin disappear from my Shopify gallery?

The pinned product is no longer visible to the storefront: it was unpublished from the Online Store channel, archived, moved to draft or deleted. Snug Gallery skips pins it cannot resolve rather than showing a dead marker. Re-pin the image to the replacement product in the gallery editor.

Do shop-the-look prices follow Shopify Markets?

Yes. The card's price and compare-at price are formatted by Shopify when the page renders, in the currency of the market the shopper is browsing, exactly as on the product page. Nothing is configured in Snug Gallery for this.