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 %}

Core properties

Property	Type	Description
`variant.id`	number	The unique variant ID
`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.url`	string	URL to the product page with this variant selected
`variant.position`	number	The sort order of this variant
`variant.available`	boolean	`true` if in stock
`variant.selected`	boolean	`true` if this is the currently selected variant
`variant.inventory_quantity`	number	The number of items in stock
`variant.requires_shipping`	boolean	`true` if this variant needs to be shipped

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
`variant.cost`	number	The cost price (for margin calculations)

{% 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 %}

Tier pricing

Q7 supports multi-tier pricing for B2B and membership models. These fields are only populated when the store has tier pricing enabled.

Property	Type	Description
`variant.retail_price`	number	The retail tier price
`variant.retail_sale_price`	number	The retail tier sale price
`variant.wholesale_price`	number	The wholesale tier price
`variant.wholesale_sale_price`	number	The wholesale tier sale price

{% if customer.tier == 'wholesale' and variant.wholesale_price %}
  <p>Trade price: {{ variant.wholesale_price | money }}</p>
{% else %}
  <p>{{ variant.price | money }}</p>
{% endif %}

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 }}, Color: {{ 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 }}{{ variant.weight_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 %}

On this page