Shopify Snippet Library

Shopify Snippet Library

Snippet Documentation Format

All snippets should include documentation using Liquid comments:

{% comment %}
  Snippet: [Name]
  Description: [What this snippet does]

  Parameters:
  - param_name {type} - Description [required/optional]

  Usage:
  {% render 'snippet-name', param_name: value %}

  Example:
  {% render 'product-card', product: product, show_vendor: true %}
{% endcomment %}

Common Snippet Patterns

1. Product Card

{% comment %}
  Snippet: Product Card
  Description: Displays a product with image, title, vendor, and price

  Parameters:
  - product {product} - The product object [required]
  - show_vendor {boolean} - Show product vendor (default: false) [optional]
  - image_size {number} - Image width in pixels (default: 400) [optional]
  - class {string} - Additional CSS classes [optional]

  Usage:
  {% render 'product-card', product: product, show_vendor: true, image_size: 600 %}
{% endcomment %}

{%- liquid
  assign show_vendor = show_vendor | default: false
  assign image_size = image_size | default: 400
-%}

{%- if product == blank -%}
  <div class="product-card product-card--empty {{ class }}">
    <p>Product not available</p>
  </div>
{%- else -%}
  <article class="product-card {{ class }}">
    <a href="{{ product.url }}" class="product-card__link">
      {%- if product.featured_image -%}
        <div class="product-card__image">
          <img
            src="{{ product.featured_image | image_url: width: image_size }}"
            alt="{{ product.featured_image.alt | escape }}"
            loading="lazy"
            width="{{ image_size }}"
            height="{{ image_size | divided_by: product.featured_image.aspect_ratio | ceil }}"
          >
        </div>
      {%- endif -%}

      <div class="product-card__info">
        {%- if show_vendor and product.vendor != blank -%}
          <p class="product-card__vendor">{{ product.vendor | escape }}</p>
        {%- endif -%}

        <h3 class="product-card__title">{{ product.title | escape }}</h3>

        <div class="product-card__price">
          {%- if product.compare_at_price > product.price -%}
            <span class="product-card__price--sale">{{ product.price | money }}</span>
            <span class="product-card__price--compare">{{ product.compare_at_price | money }}</span>
          {%- else -%}
            <span>{{ product.price | money }}</span>
          {%- endif -%}
        </div>
      </div>
    </a>
  </article>
{%- endif -%}

2. Button / Link

{% comment %}
  Snippet: Button
  Description: Renders a customizable button or link

  Parameters:
  - text {string} - Button text [required]
  - url {string} - Button URL (makes it a link) [optional]
  - style {string} - Button style: 'primary', 'secondary', 'outline' (default: 'primary') [optional]
  - size {string} - Button size: 'small', 'medium', 'large' (default: 'medium') [optional]
  - class {string} - Additional CSS classes [optional]

  Usage:
  {% render 'button', text: 'Add to Cart', style: 'primary', size: 'large' %}
  {% render 'button', text: 'Learn More', url: '/pages/about', style: 'outline' %}
{% endcomment %}

{%- liquid
  assign style = style | default: 'primary'
  assign size = size | default: 'medium'
  assign btn_class = 'btn btn--' | append: style | append: ' btn--' | append: size
  if class
    assign btn_class = btn_class | append: ' ' | append: class
  endif
-%}

{%- if url != blank -%}
  <a href="{{ url }}" class="{{ btn_class }}">
    {{ text | escape }}
  </a>
{%- else -%}
  <button type="button" class="{{ btn_class }}">
    {{ text | escape }}
  </button>
{%- endif -%}

3. Icon (SVG)

{% comment %}
  Snippet: Icon
  Description: Renders an SVG icon

  Parameters:
  - name {string} - Icon name (e.g., 'cart', 'heart', 'search') [required]
  - size {number} - Icon size in pixels (default: 24) [optional]
  - class {string} - Additional CSS classes [optional]

  Usage:
  {% render 'icon', name: 'cart', size: 20, class: 'icon-primary' %}
{% endcomment %}

{%- liquid
  assign size = size | default: 24
  assign icon_class = 'icon icon-' | append: name
  if class
    assign icon_class = icon_class | append: ' ' | append: class
  endif
-%}

<svg class="{{ icon_class }}" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
  {%- case name -%}
    {%- when 'cart' -%}
      <path d="M9 2L8 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4H16L15 2H9Z" stroke="currentColor" stroke-width="2"/>
    {%- when 'heart' -%}
      <path d="M20.84 4.61C19.91 3.68 18.69 3.17 17.42 3.17C16.15 3.17 14.93 3.68 14 4.61L12 6.61L10 4.61C9.07 3.68 7.85 3.17 6.58 3.17C5.31 3.17 4.09 3.68 3.16 4.61C1.22 6.55 1.22 9.69 3.16 11.63L12 20.47L20.84 11.63C22.78 9.69 22.78 6.55 20.84 4.61Z" stroke="currentColor" stroke-width="2"/>
    {%- when 'search' -%}
      <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
      <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2"/>
    {%- when 'close' -%}
      <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2"/>
    {%- else -%}
      <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
  {%- endcase -%}
</svg>

4. Form Input

{% comment %}
  Snippet: Form Input
  Description: Renders a form input field with label

  Parameters:
  - type {string} - Input type (text, email, tel, number, etc.) [required]
  - name {string} - Input name attribute [required]
  - label {string} - Input label [required]
  - required {boolean} - Make field required (default: false) [optional]
  - placeholder {string} - Placeholder text [optional]
  - value {string} - Default value [optional]
  - class {string} - Additional CSS classes [optional]

  Usage:
  {% render 'form-input', type: 'email', name: 'email', label: 'Email Address', required: true %}
{% endcomment %}

{%- liquid
  assign required = required | default: false
  assign input_id = 'input-' | append: name
-%}

<div class="form-field {{ class }}">
  <label for="{{ input_id }}" class="form-field__label">
    {{ label | escape }}
    {%- if required -%}
      <span class="form-field__required" aria-label="required">*</span>
    {%- endif -%}
  </label>

  <input
    type="{{ type }}"
    id="{{ input_id }}"
    name="{{ name }}"
    class="form-field__input"
    {%- if placeholder -%}placeholder="{{ placeholder | escape }}"{%- endif -%}
    {%- if value -%}value="{{ value | escape }}"{%- endif -%}
    {%- if required -%}required{%- endif -%}
    {%- if type == 'email' -%}autocomplete="email"{%- endif -%}
  >
</div>

5. Image with Fallback

{% comment %}
  Snippet: Responsive Image
  Description: Renders a responsive image with fallback

  Parameters:
  - image {image} - The image object [required]
  - width {number} - Image width (default: 800) [optional]
  - height {number} - Image height [optional]
  - alt {string} - Alt text (uses image.alt if not provided) [optional]
  - class {string} - Additional CSS classes [optional]
  - loading {string} - Loading attribute: 'lazy' or 'eager' (default: 'lazy') [optional]

  Usage:
  {% render 'image', image: product.featured_image, width: 600, alt: product.title %}
{% endcomment %}

{%- liquid
  assign width = width | default: 800
  assign loading = loading | default: 'lazy'
  assign alt_text = alt | default: image.alt
-%}

{%- if image != blank -%}
  {%- if height -%}
    <img
      src="{{ image | image_url: width: width, height: height }}"
      alt="{{ alt_text | escape }}"
      width="{{ width }}"
      height="{{ height }}"
      loading="{{ loading }}"
      class="{{ class }}"
    >
  {%- else -%}
    <img
      srcset="
        {{ image | image_url: width: 400 }} 400w,
        {{ image | image_url: width: 800 }} 800w,
        {{ image | image_url: width: 1200 }} 1200w
      "
      sizes="(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw"
      src="{{ image | image_url: width: width }}"
      alt="{{ alt_text | escape }}"
      width="{{ width }}"
      height="{{ width | divided_by: image.aspect_ratio | ceil }}"
      loading="{{ loading }}"
      class="{{ class }}"
    >
  {%- endif -%}
{%- else -%}
  <div class="image-placeholder {{ class }}" role="img" aria-label="No image available"></div>
{%- endif -%}

6. Price Display

{% comment %}
  Snippet: Price
  Description: Displays product price with sale indication

  Parameters:
  - product {product} - The product object [required]
  - show_compare {boolean} - Show compare at price (default: true) [optional]
  - class {string} - Additional CSS classes [optional]

  Usage:
  {% render 'price', product: product %}
  {% render 'price', product: product, show_compare: false %}
{% endcomment %}

{%- liquid
  assign show_compare = show_compare | default: true
  assign
  if product.compare_at_price > product.price
    assign
  endif
-%}

<div class="price {{ class }}{% if on_sale %} price--on-sale{% endif %}">
  {%- if on_sale -%}
    <span class="price__sale">{{ product.price | money }}</span>
    {%- if show_compare -%}
      <span class="price__compare">{{ product.compare_at_price | money }}</span>
    {%- endif -%}
  {%- else -%}
    <span class="price__regular">{{ product.price | money }}</span>
  {%- endif -%}
</div>

7. Badge / Tag

{% comment %}
  Snippet: Badge
  Description: Displays a badge or tag

  Parameters:
  - text {string} - Badge text [required]
  - style {string} - Badge style: 'sale', 'new', 'featured', 'default' (default: 'default') [optional]
  - class {string} - Additional CSS classes [optional]

  Usage:
  {% render 'badge', text: 'Sale', style: 'sale' %}
  {% render 'badge', text: 'New Arrival', style: 'new' %}
{% endcomment %}

{%- liquid
  assign style = style | default: 'default'
  assign badge_class = 'badge badge--' | append: style
  if class
    assign badge_class = badge_class | append: ' ' | append: class
  endif
-%}

{%- if text != blank -%}
  <span class="{{ badge_class }}">
    {{ text | escape }}
  </span>
{%- endif -%}

8. Loading Spinner

{% comment %}
  Snippet: Loading Spinner
  Description: Displays a loading spinner

  Parameters:
  - size {string} - Spinner size: 'small', 'medium', 'large' (default: 'medium') [optional]
  - class {string} - Additional CSS classes [optional]

  Usage:
  {% render 'loading-spinner', size: 'large' %}
{% endcomment %}

{%- liquid
  assign size = size | default: 'medium'
  assign spinner_class = 'spinner spinner--' | append: size
  if class
    assign spinner_class = spinner_class | append: ' ' | append: class
  endif
-%}

<div class="{{ spinner_class }}" role="status" aria-label="Loading">
  <svg class="spinner__svg" viewBox="0 0 50 50">
    <circle class="spinner__circle" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
  </svg>
  <span class="sr-only">Loading...</span>
</div>

Best Practices

1. Always Document Parameters

{% comment %}
  Parameters:
  - param {type} - Description [required/optional]
{% endcomment %}

2. Provide Defaults

{%- liquid
  assign show_vendor = show_vendor | default: false
  assign image_size = image_size | default: 400
-%}

3. Validate Required Parameters

{%- if product == blank -%}
  <p class="error">Product parameter is required</p>
  {%- return -%}
{%- endif -%}

4. Handle Empty States

{%- if image != blank -%}
  <!-- Image markup -->
{%- else -%}
  <div class="placeholder">No image available</div>
{%- endif -%}

5. Escape User-Provided Content

<h3>{{ product.title | escape }}</h3>
<p>{{ customer.name | escape }}</p>

6. Use Semantic HTML

<article>  {%- # For products -%}
<nav>      {%- # For navigation -%}
<aside>    {%- # For sidebars -%}
<section>  {%- # For content sections -%}

7. Include Accessibility Attributes

<button aria-label="Add {{ product.title | escape }} to cart">
  Add to Cart
</button>

<img src="..." alt="{{ image.alt | escape }}">

<div role="status" aria-live="polite">
  Item added to cart
</div>

Create well-documented, reusable snippets that are easy to understand and maintain.