product

The 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:
  • A variant selector
  • A quantity input
  • Dynamic checkout buttons
  • Input elements for line item properties

Optionally, you might want to show product recommendations on the product page.

You can access the Liquid product object to display the product details.

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 'product' parameter:

Inside the form, you need the following:

• The variant selector
• The quantity input
• Dynamic checkout buttons

A variant selector is typically structured as one or more option value inputs that enable a buyer to specify which product variant to purchase. You can refer the product variants section for an example implementation.

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:

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:

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 name="properties[property-name]", where 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 API
• Showing product recommendations

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.

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 Product recommendations.