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 allow shoppers to submit the form, create an input with the attribute
type="submit" inside the form tags.
There are a handful of form elements you can include within the product form.
|Line item property||
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.
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.
Support dynamic checkout
You can learn more about dynamic checkout buttons in Adding dynamic checkout buttons to your online store.
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.
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:
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
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. This is useful for customizations such as engravings, monograms, and uploads of T-shirt designs.