> For the complete documentation index, see [llms.txt](https://docs.webexp.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webexp.dev/supra-shopify-theme/supra/sections-and-features/filmstrip.md).

# 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`](/supra-shopify-theme/supra/metafields/badge.md) 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.