product​

The product template shows the product detail page, which includes media and content.

Location​

The products/detail template is in the theme's templates folder:

└── theme
    ├── layout
    ├── templates
    |   ...
    |   ├── product.json
    |   ...
    ...

Content​

You should include the following in the product template or in a section within the template:

• The product object
• The product form, which has these parts:
  • A variant selector
  • A quantity input
  • Dynamic checkout buttons

You may also want to show product recommendations on the product page.

The product object​

You can use the Handlebars product object to show product details.

The product form​

The product form is the main way customers add product variants to the cart. You can include the product form using the Handlebars form tag with the 'product' parameter, and pass in the related product object and a unique custom form id:

  {{#form "product" product id="form-id"}}
    {{! form details }}
    <div class="wrapper">
      <input type="submit" value="Add to cart">
    </div>
  {{/form}}

Inside the form, you need the following:

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

The variant selector​

The variant selector is an input element with the name="id" attribute. Its value reflects the variant id to add to the cart.

Usually, the variant selector is a <select> element with <option> elements populated by looping through all product variants. You can also use the product object selected_or_first_available_variant attribute to select a variant by default based on the link or availability:

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

The quantity input​

You should include a quantity input to let customers choose how many of the variant to add to the cart. This input needs the name="quantity" attribute, and the value must be an integer greater than 1:

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

Dynamic checkout buttons​

You should include dynamic checkout buttons to let customers quickly buy the product they are viewing. These can be added using the payment_button Handlebars helper:

{{#form "product" product id="form-id"}}
  {{! form details }}
  <div class="wrapper">
    <input type="submit" value="Add to cart">
    {{payment_button}}
  </div>
{{/form}}

Usage​

When using the product template, you should be familiar with the following:

• The Cart AJAX API
• Showing product recommendations

The Cart AJAX API​

You can use the Cart API (part of the AJAX API) to let customers add variants to the cart without being redirected to the cart page.

Show product recommendations​

You can use the product recommendations API (part of the AJAX API) to upsell related products to customers. For more details on how to use this API, see Product Recommendations.