Create an add-to-cart form using Liquid

Use the Liquid form helper to build your own add to cart form. Find the product you want the form for, then use the form helper to wrap your HTML in a form.

A simple product

This example adds a fixed product to the cart with a quantity field:

```liquid

{% assign product = all_products[“aloe-foaming-cleanser-100ml”] %}

{% form “add-to-cart”, product: product %}

{% endform %} ```

The form accepts the fields quantity, price, product_bookable_location_id, booking_start and booking_end. See Add to cart form for the full reference.

A product with variants

Each variant is a separate Product record with its own ID and its own page. You add a variant to the cart by its own ID, not by posting option values against the master.

A product that has variants cannot be added to the cart itself. If you point an add to cart form at one, the customer is redirected back to the product page with a message asking them to select an option, so the form never completes.

Build the variant flow in two parts. First, on the master product, link to each variant:

```liquid

{% assign product = all_products[“tennis-shoe”] %} {% assign variants = product.variants | depaginate %}

{% if product.master? and variants.size > 0 %}

{% for variant in variants %}
• {{ variant.variant_title }} {% unless variant.can_add_to_cart? %} Currently unavailable {% endunless %}
{% endfor %}

{% endif %} ```

Then, on the variant’s own page, render the add to cart form against current_product:

```liquid

{% if current_product.variant? and current_product.can_add_to_cart? %} {% form “add-to-cart”, product: current_product %}

{% endform %} {% endif %} ```

Pass product: rather than product_id: when you already have the product object. The form then skips a product lookup, which matters on a page rendering many forms.

:::note The built-in theme handles this differently. It renders the variant selector outside the form and disables the add to cart button until the selection resolves to a single variant, then loads that variant’s page. Build your own only if you need behavior the theme does not give you. :::

Submitting either form adds the product to the cart and returns the customer to the page they came from.