Skip to Content
DeveloperSnippets

Snippets

Reusable Liquid partials in snippets/. The seo-schema-*, seo-structured-data, seo-head-extra, seo-llms-content and seo-agents-content snippets are covered under SEO & GEO; the rest are below.

product-card

snippets/product-card.liquid

The reusable product grid card.

  • Params: card_product, show_quick_add (bool), eager (bool for LCP)
  • Image with optional hover image, vendor (optional), title, price
  • Discount badge, color swatches, quick-view button

Used by collections, featured-collection, recommendations and search.

facets

snippets/facets.liquid

The collection filter UI — price range, option dropdowns with swatches, and checkboxes. Renders Shopify’s native facet data.

swatch

snippets/swatch.liquid

A single color/texture swatch for a variant option. Resolution order:

  1. Native Shopify swatch on the variant option
  2. Text map in the swatch_config setting (e.g. Sage: #9caf88, one per line)
  3. Fallback: first letter on a neutral chip
  • Param: value (option value or string)

discount-badge

snippets/discount-badge.liquid

Sale badge (percentage, amount, or both) computed from compare_at_price vs price. Controlled by show_discount_badge / discount_badge_type; renders nothing when disabled or not on sale.

free-shipping-bar

snippets/free-shipping-bar.liquid

Progress bar: “$X away from free shipping” or “Free shipping unlocked!”. Threshold from cart_free_shipping_threshold.

marquee-track

snippets/marquee-track.liquid

Shared animation scaffold for the marquee sections — renders the message blocks twice for a seamless CSS loop (the second pass is inert for accessibility) with a keyboard pause/play control.

customer-address-fields

snippets/customer-address-fields.liquid

Address form fields (name, company, address lines, city, postal code, country, province) used across the customer account pages.

css-variables

snippets/css-variables.liquid

Inlines the design-token system and color-scheme classes — documented under Architecture → Styles.

meta-tags

snippets/meta-tags.liquid

Open Graph + Twitter cards + canonical, plus product pricing meta on product pages.

meta-tags.liquid also deduplicates Shopify’s native product structured data when Citera’s own Product schema is enabled.