Product

The product object holds everything about a single product. It is available on product pages, and you can also access it inside loops when working with collections.

Properties

Property	Type	Description
`product.id`	string	The unique ID for this product
`product.title`	string	The product title
`product.handle`	string	The URL slug (e.g. `classic-gold-ring`)
`product.description`	string	The full HTML description
`product.content`	string	Alias for `description`
`product.type`	string	The product type: `physical`, `digital`, or `service`
`product.vendor`	string	The brand or vendor name
`product.url`	string	The URL path to the product page
`product.available`	boolean	`true` if at least one variant is in stock
`product.published_at`	string	The date the product was published
`product.created_at`	string	The date the product was created
`product.has_only_default_variant`	boolean	`true` if the product has just one variant

Pricing

Prices are in the smallest currency unit (pence, cents). Use the money filter to format them.

Property	Type	Description
`product.price`	number	The current price (lowest variant)
`product.price_min`	number	The lowest variant price
`product.price_max`	number	The highest variant price
`product.compare_at_price`	number	The compare-at price, if set

<p class="price">{{ product.price | money }}</p>

{% if product.compare_at_price > product.price %}
  <p class="compare-price">Was {{ product.compare_at_price | money }}</p>
{% endif %}

Price ranges

When a product has variants at different prices, show a range:

{% if product.price_min != product.price_max %}
  <p>{{ product.price_min | money }} – {{ product.price_max | money }}</p>
{% else %}
  <p>{{ product.price | money }}</p>
{% endif %}

Images

Property	Type	Description
`product.featured_image`	image	The first image
`product.images`	array	All product images

Each image object has src, alt, width, height, and position properties. See the Image object for details.

{% if product.featured_image %}
  {{ product.featured_image | image_tag }}
{% endif %}

{% for image in product.images %}
  <img src="{{ image | img_url: '400x400' }}" alt="{{ image.alt }}" />
{% endfor %}

Variants

Property	Type	Description
`product.variants`	array	All variants for this product
`product.options`	array	Option names (e.g. `["Size", "Colour"]`)
`product.selected_variant`	variant	The variant the visitor has picked, if any

See the Variant object for all variant properties.

<select name="variant_id">
  {% for variant in product.variants %}
    <option value="{{ variant.id }}" {% unless variant.available %}disabled{% endunless %}>
      {{ variant.title }} – {{ variant.price | money }}
    </option>
  {% endfor %}
</select>

Tags and collections

Property	Type	Description
`product.tags`	array	Tags assigned to this product
`product.collections`	array	Collections this product belongs to

{% if product.tags contains 'sale' %}
  <span class="badge">On Sale</span>
{% endif %}

Metafields

Property	Type	Description
`product.metafields`	object	Custom data fields set in the admin

Access metafields by namespace and key:

{% if product.metafields.custom.care_instructions %}
  <p>{{ product.metafields.custom.care_instructions }}</p>
{% endif %}

Full example

A product card that shows the image, title, price, and a sale badge:

<div class="product-card">
  {% if product.featured_image %}
    <a href="{{ product.url }}">
      {{ product.featured_image | image_tag: class: 'product-card__image' }}
    </a>
  {% endif %}

  <h3><a href="{{ product.url }}">{{ product.title }}</a></h3>
  <p>{{ product.vendor }}</p>

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

  {% if product.tags contains 'new' %}
    <span class="badge">New</span>
  {% endif %}
</div>

On this page