product template renders the product page, which contains a product's media and content, as well as a form for customers to select a variant and add it to the cart.
product template is located in the
templates directory of the theme:
You should include the following in your
product template or a section inside of the template:
- The product object
- The product form, with the following components:
Optionally, you might want to show product recommendations on the product page.
The product objectAnchor link to section titled "The product object"
You can access the Liquid
product object to display the product details.
The product formAnchor link to section titled "The product form"
The product form is the main method for customers to add a product variant to the cart. You can include the product form with the Liquid
form tag and accompanying
Inside the form, you need the following:
The variant selectorAnchor link to section titled "The variant selector"
The variant selector is an input element with an attribute of
name="id". Its value reflects the variant ID of the variant to be added to the cart.
Typically, the variant selector is a
<select> element, whose
<option>s are populated with a loop through all the product's variants. You can also select a variant by default, based on a variant link, or availability, using the
selected_or_first_available_variant attribute of the
The quantity inputAnchor link to section titled "The quantity input"
You should include a quantity input to allow customers to choose the quantity of a variant that they're adding to the cart. This input needs to have an attribute of
name="quantity", and the value must be an integer greater than 1:
Dynamic checkout buttonsAnchor link to section titled "Dynamic checkout buttons"
You should include dynamic checkout buttons to allow customers to quickly buy the product they're viewing. These can be added with the
payment_button Liquid HTML filter:
Line item propertiesAnchor link to section titled "Line item properties"
You can give customers the option to include additional information for a variant that's added to the cart by using line item properties. You can use line item properties to enable customers to customize orders or provide supplementary information. For example, you can capture monogram or engraving text, or let a customer upload a file.
These properties are captured through input elements with an attribute of
property-name is the name of your custom property. Any property inputs need to be included inside the product form:
When working with the
product template, you should familiarize yourself with the following:
The Cart AJAX APIAnchor link to section titled "The Cart AJAX API"
You can use the Cart API, which is part of the AJAX API, to allow customers to add a variant to the cart without redirecting them to the cart page afterwards.
Show product recommendationsAnchor link to section titled "Show product recommendations"
You can use the Product Recommendations API, which is part of the AJAX API, to upsell customers on related products. To learn more about how to use this API, refer to Show product recommendations.