product

The product template handles the rendering of the product page. It is responsible for displaying the product's information, media, and the appropriate forms for variant selection and adding to cart.

Location

The product template is located in the templates directory of the theme.

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

Usage

Renders for a request whose slug resolves to a product. Unknown slugs return the 404 page. The template receives the product object for that product.

There are two ways to add a product to the cart. Pick one per theme.

{% form %} tag

Submit a {% form 'product' %} with the chosen variant id and a quantity. It posts to the cart endpoint and reloads the page, so it works without JavaScript. Use product.selected_or_first_available_variant as the default and swap the id as the customer picks options from product.options.

{% form 'product' %}
  <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
  <input type="number" name="quantity" value="1">
  <button {% unless product.available %}disabled{% endunless %}>{{ 'product.add_to_cart' | t }}</button>
{% endform %}

YouCan JS SDK

Call youcanjs.cart.addItem() from your section script for an async add with no reload, for example to drive a cart drawer. See the SDK docs.

await youcanjs.cart.addItem({
  productVariantId: variantId,
  quantity: 1,
});