Filmstrip
The horizontal run of narrow product slivers.
A side-scrolling strip of tall, narrow product slivers — 49px wide, ruled 2px apart. Hovering one shows the product name as a tooltip; clicking goes to the product.
Filling it
Two ways, and blocks win where both are set.
Products, one at a time. Add Product blocks and arrange them by hand. A strip is window dressing and which garment sits beside which is worth deciding — this is the finer instrument.
A collection. Set the collection and a maximum. The strip keeps itself current as the collection changes.
Image zoom
100–250%. This is the setting people need and don't expect.
Product photography is shot for a grid — garment centred, room around it. A 49px sliver cuts a vertical slice where that room is most of what you see, so a strip of studio shots comes out mostly white. Raising the zoom crops further into each photo from its centre, so the strip fills with product instead of background.
Start at 100%, look at the strip, and raise it until the slivers are full.
Per-product image override
Each Product block has an optional Image. It replaces that product's own photo in the strip while the click still goes to the product — this is how you put a lookbook crop in the run without giving up the link.
Image blocks
An Image block is a sliver that isn't a product at all: image, optional link, optional label. Useful for a season card or a graphic between garments. Blocks render in the order you arrange them, so a picture dropped between two products stays between those two products.
'new' tags
Show 'new' tags marks a sliver whose product carries the tag new in Shopify — add it under Products → Tags. Products without it are left unmarked.
This is a product tag, not the custom.badge metafield the collection grid uses. They're separate systems.
On phones
Category menu (default) or The strip.
A run of 49px slivers is a poor thing to hand a thumb, so the reference shows a plain list of categories on phones instead. Pick the menu and the strip is replaced by ruled rows down there. Leave the menu empty and the strip stays — a strip beats an empty list.
Last updated