product

You can use the product variable in the following templates: product.liquid.

The liquid variable product has the following attributes:

product.available
{% if product.available %}
  This product is available.
{% endif %}

Returns "false" if all variants' quantities are zero and their product settings are set to "stop selling when sold out."

product.collections
<p>This product belongs in the following collections:</p>
<ul>
{% for collection in product.collections %}
    <li>{{ collection.title }}</li>
{% endfor %}
</ul>

Returns a list of all of the collections a product is listed in.

product.compare_at_price_max
{% if product.compare_at_price > product.price %}
<span>{{ product.price | money }}</span>
<span>{{ product.compare_at_price_max | money }}</span>
{% else %}
<span>{{ product.price | money }}</span>
{% endif %}

Returns the higher end of the "compare at" price. Shop owners may use this feature to show the difference between their lower retail price and their competitors. Use one of the money filters to return the value in a monetary format.

product.compare_at_price_min
<small>{{ product.compare_at_price_min | money }}</small>

Returns the lower end of the "compare at" price. Shop owners may use this feature to show the difference between their lower retail price and their competitors. Use one of the money filters to return the value in a monetary format.

product.compare_at_price_varies
{{ product.compare_at_price_varies }}

Returns "true" if the compare_at_price_min is different from the compare_at_price_max.

product.compare_at
{% if product.compare_at_price > product.price %}
<span>{{ product.price | money }}</span>
<span>{{ product.compare_at_price_max | money }}</s>
{% else %}
<span>{{ product.price | money }}</span>
{% endif %}

product.content
<div>
  {{ product.content }}
</div>

Returns the description of the product. Alias of product.description.

product.description
<div>
  {{ product.description }}
</div>

Returns the description of this product.

product.featured_image
<div>
  <img src="{{ product.featured_image | product_img_url: 'medium' }}" alt="{{ product.featured_image.alt | escape }}" />
</div>

Returns the filename with a relative path of the featured image. The featured image is generally the first image for a product.

product.featured_image.alt
{% if product.images.size == 0 %}
<div>
<a href="{{ product.featured_image.src | product_img_url: 'original' }}" rel="gallery">
<img src="{{ product.featured_image.src | product_img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}" />
</a>
</div>
{% endif %}

Returns the alt description of an image.

product.handle
<div class="product-{{ product.handle }} clearfix">
  This is a product!
</div>

Returns the handle of the product.

product.id
<div class="{{ product.id }}">
  {% for image in product.images %}
    {% if forloop.first %}
      <img src="{{ image | product_img_url: 'large' }}" alt="{{ product.title }}">
    {% endif %}
  {% endfor %}
</div>

Returns the id of the product.

product.images
{% for image in product.images %}
  {{ image.src | product_img_url: 'medium' }}
{% endfor %}

Returns a collection of all of the image filenames for this product.

product.options
<!-- If a product has more than one option -->
{% if product.options.size > 1 %}
  Display the variants as drop-downs.
{% else %}
  Display the variants as radio buttons.
{% endif %}

Returns a list of the product's options. By default, there is always at least one option but there can be up to three. You can check to see how many options a product has using the "size" filter.

product.price
{% if product.compare_at_price > product.price %}
<span>{{ product.price | money }}</span>
<span>{{ product.compare_at_price_max | money }}</span>
{% else %}
<span>{{ product.price | money }}</span>
{% endif %}

Returns the price of the product. Use one of the money filters to return the amount in monetary format.

product.price_max
<div>
  You could be spending this: {{ product.price_max | money }}
  But why not spend this: {{ product.price_min | money }}
</div>

Returns the maximum price of the product. Use one of the money filters to return the amount in monetary format.

product.price_min
<div>
  You could be spending this: {{ product.price_max | money }}
  But why not spend this: {{ product.price_min | money }}
</div>

Returns the minimum price of the product. Use one of the money filters to return the amount in monetary format.

product.price_varies
{% if product.price_varies %}
  between {{ product.price_min | money }} to {{ product.price_max | money }}
{% else %}
  {{ product.price_min | money }}
{% endif %}

Returns "true" if the product's variants have varying prices. Returns "false" if all of the variants have the same price.

product.tags
{% if product.tags contains 'custom to order' %}
  <!-- Output custom to order form HTML here -->
{% endif %}

Returns a list of all of the product's tags.

product.title
<h1>{{ product.title }}</h1>

Returns the title of the product.

product.type
<div><span>type: {{ product.type | link_to_type }}</span><span>Vendor: {{ product.vendor | link_to_vendor }}</span></div>

Returns the type of the product. For example "snowboard," "clothes," etc.

product.url
<meta content="{{ shop.url }}{{ product.url }}" />

Returns the URL of the product. The product.url is used to link to the product's detail page from any place in the store.

product.variants
{% assign hide_default_title = false %}
{% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
{% assign hide_default_title = true %}
{% endif %}       

Returns a collection of all of the product's variants. To learn more about the liquid variable, variant click here.

product.vendor
{% assign product_vendor_handle = product.vendor | handle %}

Returns the vendor of the product. For example, "Apple," "Shopify," etc.


Variant

The liquid variable variant has the following attributes:

variant.available
{% if variant.available == true %}
  We currently have {{ variant.inventory_quantity }} in stock!
{% else %}
  Sold out!
{% endif %}

Returns whether the variant is available for sale or not.

variant.barcode
{% for variant in product.variants %}
  {{ variant.barcode }}
{% endfor %}

Returns the variant's barcode.

variant.compare_at_price
<ul>
{% for variant in product.variants %}
  <li>{{ variant.price | money }}, competitor's price: {{ variant.compare_at_price | money }}</li>
{% endif %} 
</ul>

Returns the variant's recommended retail price.

variant.id
<div>
<select>
{% for variant in product.variants %}
<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% endfor %}
</select>
</div>   

Returns the variant's unique id.

variant.inventory_management
  {% for variant in product.variants %}
    <p>This product's inventory is tracked by: {{ variant.inventory_management }}</p>
  {% endfor %}

Returns the variant's inventory tracking service.

variant.inventory_policy
{% if product.available %}
  {{ variant.inventory_policy }}
{% endif %}

Returns the word "deny" if back-ordered items cannot be added to the cart, or "continue" if they can.

variant.inventory_quantity
{% if variant.inventory_quantity > 0 %}
This {{ variant.title }} is in stock!
{% endif %}

Returns the number of variants that are in stock for this shop.

variant.option1
variant.option2
variant.option3
{{ product.variants.first.option1 }}

Returns the values of option 1, 2, or 3 for a given variant.

variant.price
<div class="{% if hide_default_title %} hidden{% endif %}">
<select>
{% for variant in product.variants %}
<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% endfor %}
</select>
</div>  

Returns the variant's price. Use one of the money filters to return the value in a monetary format.

variant.sku
{% for variant in product.variants %}
  {{ variant.sku }}
{% endfor %}

Returns the variant's SKU.

variant.title
<div class="{% if hide_default_title %} hidden{% endif %}">
<select class="hidden">
{% for variant in product.variants %}
<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% endfor %}
</select>
</div>    

Returns the concatenation of all the variant's option values, joined by " / ". For example, if variant option1 is "Large" and option2 is "Red" the variant.title will return "Large / Red."

variant.weight
{% for variant in product.variants %}
  {{ variant.weight | weight_with_unit }}
{% endfor %}

Returns the variant's weight.

Ready to put what you've learned into action?

Build an online store with Shopify Try it Free

Experience the future of retail now

Shopify Point of Sale Try it Free