---
url: https://docs.youcan.shop/themes/templates/template-types/product.md
---
# 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.

```bash
└── 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](/themes/objects/product) for that product.

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

### `{% form %}` tag

Submit a [`{% form 'product' %}`](/themes/tags/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`.

```liquid
{% 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](/themes/sdk/overview).

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