Using the Liquid Form Helper

You can create an add to cart form by using the Liquid form helper. To do this you first find the product you want to add the form for and then use the form helper to wrap your HTML code in a form.

For example:

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

{% form "add-to-cart", product_id: product.id %}
<div class="AddToCart">
  <div class="Field">
    <label>
      Quantity
    </label>
    <input value="1"
           placeholder="Quantity"
           min="1" max="100"
           class="AddToCart_quantity"
           type="number"
           name="quantity"
           id="quantity">
  </div>
  <input type="submit"
         name="commit"
         value="Add to bag"
         class="Button Button-primary Button-expanded u-s-mb u-text-uppercase"
         data-disable-with="Add to bag">
</div>
{% endform %}

If your product has variants in it, you could handle this by allowing the user to select a specific variant:

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

{% form "add-to-cart", product_id: product.id %}
<div class="AddToCart">
  <div class="Field">
    <label>
      Quantity
    </label>
    <input value="1"
           placeholder="Quantity"
           min="1" max="100"
           class="AddToCart_quantity"
           type="number"
           name="quantity"
           id="quantity">

    <select id="variant_size" name="variant[size]" autocomplete="off">
      <option value="37">Size 37</option>
      <option value="38">Size 38</option>
      <option value="39">Size 39</option>
      <option value="40">Size 40</option>
    </select>

    <select id="variant_color" name="variant[color]" autocomplete="off">
      <option value="white">White</option>
      <option value="multi">Multi</option>
    </select>

  </div>
  <input type="submit"
         name="commit"
         value="Add to bag"
         class="Button Button-primary Button-expanded u-s-mb u-text-uppercase"
         data-disable-with="Add to bag">
</div>
{% endform %}

Note, if the combination of options is not available due to stock or other reasons, the user will be shown the product page with an error message to select an available option.

 

 
Back to Documentation