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.

Ex product

Build the HTML form

Adding items to your cart

To add items to your cart, the product variant and quantity selectors must be output inside a <form> with the attributes action="/cart/add" and method="post". To submit the form, create an input with the attribute type="submit".

<form action="/cart/add" method="post">

  /* Additional HTML and Liquid to allow selecting product
     variants and setting the quantity */

  <input type="submit" value="Add to cart" />

Selecting 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.

Setting 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">

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.

Multiple options

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.

Supporting 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

Want to discuss this page?

Visit the Shopify Community