Shopify Snippets: Reusable Liquid Code Patterns

Snippets live in the snippets/ folder as partial Liquid files—reusable markup fragments included via the render tag. Sections are full-width theme editor modules with schema; snippets are developer-facing components without their own settings UI (unless you pass settings in as parameters). Use sections when merchants need toggles, blocks, and presets. Use snippets when the same markup repeats across sections and templates—product cards, price displays, swatches, icons, breadcrumbs.

Snippets keep DRY themes maintainable. Without them, a price-formatting change requires editing collection grids, search results, cart lines, and recommendations separately. One snippets/price.liquid updated once fixes everywhere. ADSPOC themes typically carry 40–80 snippets organized by domain: snippets/product/, snippets/icons/, snippets/cart/—Shopify flattens to snippets/icon-cart.liquid naming but we prefix for mental grouping in IDE file trees.

Syntax: {% render 'snippet-name', param: value, other: foo %}. The snippet name matches snippets/snippet-name.liquid without extension. Parameters become variables inside the snippet—{% render 'product-card', product: product, show_vendor: true, lazy: true %} exposes product, show_vendor, and lazy. Variables from the parent template are not visible unless passed—this isolation prevents accidental overwrites of loop variables like product when rendering nested cards.

Pass literals, objects, or captured strings. For optional behavior, pass booleans and default in the snippet: {% unless show_vendor == false %}—or use Liquid's default filter on parameter reads. render supports for loops with the shorthand {% render 'icon' for icon in icon_list %} in newer Liquid (check theme API version). Avoid the deprecated {% include %} tag; Shopify docs mark it legacy and its scope leakage causes subtle bugs in large themes.

ADSPOC snippet headers document parameters in comments: {% comment %} Params: product (required), lazy (bool), aspect_ratio (string: 'square'|'portrait') {% endcomment %}. Required params get guarded at the top: {% if product == blank %}{% break %}{% endif %} inside loops or early return via empty output. Split presentation from logic: snippets/price.liquid handles money formatting; snippets/product-card.liquid orchestrates image, price, badges, and swatches by rendering child snippets.

Limit snippet depth to three levels to avoid render stack confusion—card renders price and badge, not another card. Shared CSS classes live in BEM-style naming tied to the snippet: product-card__title, icon--cart. JavaScript hooks use data attributes: data-product-card, data-variant-swatch—never couple snippets to IDs that repeat on a page. For theme editor preview compatibility, snippets must render identically in Design Mode and live—avoid JavaScript-only content injection for core product data.

Icon systems in Shopify themes usually centralize SVGs in snippets/icon.liquid with a name parameter: {% render 'icon', icon: 'cart', class: 'header__icon' %}. Inside, case/when or if/elsif branches output inline SVG paths—no external sprite HTTP request, good for CSP and caching. Keep viewBox and stroke consistent; size via CSS width/height on the svg element or class modifiers icon--sm, icon--lg.

For accessibility, pass aria labels when icons are interactive: {% render 'icon', icon: 'close', label: 'Close cart' %} renders aria-hidden="true" on decorative icons and aria-label on standalone buttons. ADSPOC ships icon snippets with currentColor fill so icons inherit text color from parent buttons—one less parameter for merchants theming accent colors in CSS variables.

product-card.liquid is the highest-leverage snippet in commerce themes. Accept product, lazy (default true), show_quick_add, and collection for contextual URLs. Image: second media on hover optional via product.media[1] with fallback when missing. Price: render child snippet with variant or product.price_min when ranges exist. Badges: sale (compare_at > price), sold out (!available), and metafield-driven labels from product.metafields.custom.badge.

Link the card with product.url within collection context: {{ product.url | within: collection }} preserves collection breadcrumbs for analytics. Structured data belongs at template level, not duplicated per card in loops—avoid JSON-LD inside every card render. ADSPOC cards expose a single data-product-id hook for recommendation tracking and limit above-the-fold cards to eager loading (lazy: false) on the first row only—passed from the section loop via forloop.index.