Liquid How-To Form Helper

This article is intended for advanced users and our partners as it requires advanced web development or Salesforce admin or programming knowledge. While the functionality is part of StoreConnect, we do not provide end user assistance to implement it beyond our help documentation. If you need help or are unsure on how to do this, you can hire one of our StoreConnect partners.

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