Variant

A variant is one version of a product. A t-shirt might come in Small, Medium, and Large. Each size is a variant with its own price, SKU, and stock level.

Access variants through the product object:

{% for variant in product.variants %}
  <p>{{ variant.title }} – {{ variant.price | money }}</p>
{% endfor %}

Properties

Property	Type	Description
`variant.id`	string	The unique ID for this variant
`variant.title`	string	The full title (e.g. `Large / Red`)
`variant.sku`	string	The stock keeping unit code
`variant.barcode`	string	The barcode value, if set
`variant.available`	boolean	`true` if in stock
`variant.inventory_quantity`	number	The number of items in stock

Pricing

Like product prices, variant prices are in the smallest currency unit.

Property	Type	Description
`variant.price`	number	The variant price
`variant.compare_at_price`	number	The compare-at price, if set

{% for variant in product.variants %}
  <div class="variant-row">
    <span>{{ variant.title }}</span>
    <span>{{ variant.price | money }}</span>
    {% if variant.compare_at_price > variant.price %}
      <span class="was">Was {{ variant.compare_at_price | money }}</span>
    {% endif %}
  </div>
{% endfor %}

Options

Each variant can have up to three option values. The option names come from product.options.

Property	Type	Description
`variant.option1`	string	First option value (e.g. `Large`)
`variant.option2`	string	Second option value (e.g. `Red`)
`variant.option3`	string	Third option value, if used

{% for variant in product.variants %}
  <p>Size: {{ variant.option1 }}, Colour: {{ variant.option2 }}</p>
{% endfor %}

Weight

Property	Type	Description
`variant.weight`	number	The weight value
`variant.weight_unit`	string	The unit: `g`, `kg`, `lb`, or `oz`

<p>Weight: {{ variant.weight | weight_with_unit }}</p>

Image

Property	Type	Description
`variant.image`	image	A variant-specific image, if one is set

When a variant has its own image, use it. Otherwise fall back to the product image:

{% assign image = variant.image | default: product.featured_image %}
{{ image | image_tag }}

Metafields

Property	Type	Description
`variant.metafields`	object	Custom data fields for this variant

{% if variant.metafields.custom.lead_time %}
  <p>Ships in {{ variant.metafields.custom.lead_time }}</p>
{% endif %}

Building a variant picker

A common pattern is to build a form that lets the visitor choose a variant:

{% form 'product', product %}
  {% for option in product.options %}
    <label>{{ option }}</label>
    <select name="option{{ forloop.index }}">
      {% for variant in product.variants %}
        <option value="{{ variant.id }}">
          {{ variant.title }} – {{ variant.price | money }}
          {% unless variant.available %} (Sold out){% endunless %}
        </option>
      {% endfor %}
    </select>
  {% endfor %}

  <button type="submit" {% unless product.available %}disabled{% endunless %}>
    Add to Cart
  </button>
{% endform %}