The product.liquid file renders a detailed page for an individual product. It includes an HTML <form> that visitors use to select a variant and add it to the cart.

Build the HTML form

Add items to your cart

To add items to your cart, the product variant and quantity selectors must be output inside a {% form 'product' %} tag. The form must be given the product object as a form parameter.

To allow shoppers to submit the form, create an input with the attribute type="submit" inside the form tags.

{% form "product", product %}
  /* Additional HTML and Liquid to allow selecting product
     variants and setting the quantity */

  <input type="submit" value="Add to cart" />
{% endform %}

There are a handful of form elements you can include within the product form.

Input Attribute name Required
Product variant id Yes
Quantity quantity No
Line item property properties[] No

Select a product variant

To allow customers to select the product variant added to their cart, you will need a form element with the attribute name="id". In this form element, set the attribute value to the variant ID of the product variant you want to add.

It is recommended that you use a <select> element that loops through all product.variants and displays them as options. You can use the liquid variable product.selected_or_first_available_variant to automatically select a product variant in the drop down based on either the variant linked in the URL, or the product variants' stock level.

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

The example above outlines the most basic approach to outputting variant selection for your customers. For more advanced methods that use JavaScript, see Template considerations.

Set the quantity

You might want to allow customers to set the quantity of the added variant before submitting the form. To do this, include an input element with the attribute name="quantity". The attribute type is not important, but to successfully add items to the cart the value submitted must be an integer.

<input type="text" value="1" name="quantity" />

Support dynamic checkout

You can learn more about dynamic checkout buttons in Adding dynamic checkout buttons to your online store.

Template considerations

option_selection.js and callbacks

A product can have up to three options: for example, a t-shirt can have options for Size, Color, and Material. In these scenarios, it is recommended that you use the global option_selection.js script to output a drop down for each option, making it easier for the visitor to select a specific variant.

A Javascript-based callback function can then be used to trigger an event every time the visitor selects a different variant. This allows you to display information of the currently selected variant, such as the variant image, price, SKU, inventory quantity, etc.

More information on option_selection.js and callbacks can be found in this article.

Consider the availability of the product's variants

Each variant in a product has its own inventory quantity and policies; as such it is important to make it clear to the visitor if a variant is available for sale or not. Within the callback, include some code to disable/enable the Add to Cart button if the selected variant is sold out. A jQuery example is shown below:

var selectCallback = function(variant, selector){
    if(variant && variant.available){
        // Enable the Add to Cart button
        $('.options .price').html('<strong>'+Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}")+'</strong>');
        // Show price of the currently selected variant
        $('#add-to-cart').addClass('disabled').attr('disabled', 'disabled');
        // Disable the Add to Cart button
        $('.options .price').text("Sold Out!");
        // Swap price with a 'Sold Out' message

This prevents visitors from seeing a sold out variant when the product page is loaded, which may give them the impression that the entire product is sold out.

Support variant images

Merchants often associate a specific product image with a variant. For example, the merchant may have a T-shirt with several color variants with a different product image for each color. Inside the product.liquid template, you can make it so that the featured image swaps with the image of the selected variant using various Liquid and Javascript helpers. See Updating a theme to use variant images for more details.

Additional options for visitors

  • Quantity box: allows visitors to add multiple quantities of a variant at a time
  • Recommended products: upsell related products to the visitors
  • Ajax API: allows visitors to add a variant to the cart without being redirected to the cart page.
  • Line item properties: allows visitors to enter additional information to products: useful for customizations such as engravings, monograms, t-shirt design uploads, etc