Liquid snippets
Definition
A snippet is a Liquid file rendered inside another file with the render tag, which gives it an isolated scope and named arguments. It carries no schema and no settings of its own. Snippets are how a theme keeps one implementation of a recurring thing, a product card, an image, a price, across every section that needs it.
Documented at shopify.dev, theme architecture.
How We've Used It
A snippet is where we put the thing that has to look identical everywhere and change in one place. The card rendering in a grid, a search result, a navigation rail and a recommendation carousel is one file with its options passed as arguments; so is the image pipeline behind it, and the structured data emitted per page type. Two habits keep that from turning into a mess: arguments documented at the top of the file, and per-instance overrides expressed as custom properties scoped to a generated id rather than as new classes. The failure mode is a snippet nothing renders any more, which is why working out who calls what is part of the job.
Builds Using It
- Alt-text convention that maps product media to variants without metafields — LUS Brands. Two snippets, no section and no asset, so any template can call the classifier.
- Accessible link-label helpers for repeated CTAs — Nudestix
- Tabbed collection product slider and the shared merchandising card — Three Ships
- Hero slide content renderer with per-breakpoint typography controls — Nudestix
- Mega-menu product rail (v2): a library-free slider in a theme asset, constructed per panel when the panel is seen — Nudestix
- Metafield-driven breadcrumbs across product, collection, page, blog and article — LUS Brands
- Accessible play/pause web component for autoplaying hero video — Nudestix
- Hand-authored per-market JSON-LD for the Bundles & Kits collection — Three Ships
- Price snippet with a bundle 'value' metafield line and opt-out labelled price links — Nudestix
Related Entities
- Liquid section schema and settings — the settings passed into them.
- CSS custom properties — how one snippet serves many looks.
- JSON templates — what decides where the sections calling them appear.
- Dynamic sources — the record values they render.