Add to Cart Explained

Adding to Cart is, very likely, the most important action in your online store as it is the initial of several steps leading to a successful sale.
The Add to Cart process normally takes place at the Product Page. Let’s see the details.

Adding a Simple Product

We define a Simple Product as a Product without Product Options, like diferent Colors or Sizes.

To Add a Simple Product to your store’s cart, you need to build a form with:

• Action URL - contains the ID of the product. p.e. http://www.mystore.com/cart/add/753
• Method: POST

• Input Button - necessary to trigger the submit action.

  <form action="{{product.add_to_cart_url}}" method="post">
    <p>Name: {{ product.name }}</p>
    <p>Price: {{ product.price | price }}</p>
    <input type="submit" class="button" value="{% t 'Add to Shopping Cart' %}" />
  </form>
  

Adding a Product Variant

We define it as a Product with Product Options, like Colors and Sizes, and their values, like Red, Yellow and Big and Small. Each of this combination is a different Product Variant, with their own SKU, weight, stock and price.

Select a Variant via it’s Product Options

    <form action="{{product.add_to_cart_url}}" method="post">
      {% if product.options.size > 0 %}
      <h5>{% t "Product Options" %}</h5>
      {% for option in product.options %}
      <p>{{option.name}}:
      <select name="{{option.name}}">
        {% for value in option.values %}
        <option value="{{value.id}}">{{value.name}}</option>
        {% endfor %}
      </select>
      </p>
      {% endfor %}
      {% endif %}
      <input type="submit" class="button" value="{% t 'Add to Shopping Cart' %}" />
    </form>  

This code outputs a select list and a submit button. The customer can easily select different product options.

The selected the options (p.e. Color: Yellow and Size: Big) and the product id:

    {"id" => "12345", "qty" => "1", "Color" => "123", "Size" => "456"}

are submitted via a POST and used to find the Product Variant matching the selected Product Options.

{% picture js-markdown /images/pages/en/add-to-cart-options.jpg –alt Add to Cart with Options %}

Select a Variant directly

If you prefer to use radio buttons, allowing your customer to select the Product’s Variant use Radio Buttons:

      <form action="{{product.add_to_cart_url}}" method="post">
      {% if product.variants.size > 0 %}
      <h5>{% t "Product Variants" %}</h5>
      {% for variant in product.variants %}
      <p>{{variant.sku}}:
      <input type="radio" name="variants-radio" value="{{variant.id}}">
      </p>
      {% endfor %}
      {% endif %}
      <input type="submit" class="button" value="{% t 'Add to Shopping Cart' %}" />
    </form>  

This code outputs a radio-button group, allowing the customer to select only one of the options.
The unique selected radio button value e.g. value="123" is submitted and used to find the Product Variant matching the selected Product Variant.
{% picture js-markdown /images/pages/en/add-to-cart-variants.jpg –alt Add to Cart with Options %}

Add to Cart Links

You can provide direct links for the customer to buy directly from the Home Page or Category Page.

After clicking that link, the Simple Product or Product Variant, is added to the cart.

Link to add a specific Simple Product to the cart:

    <a href="{{product.add_to_cart_url}}">{{product.name}}</a>

Link to add a specific Product Variant to the cart:

    {% for variant in product.variants %}
      <a href="{{variant.add_to_cart_url}}">{{variant.sku}}</a>
    {% endfor %}

How do I “Add to Cart” a Product with a Link?

You want to provide a single like, perhaps at the “Home Page” with a direct link to add a specific product to the “cart”.

If you have a simple Product (without Variants) it’s easy, use the Liquid tag:

    {{ product.add_to_cart_url }}

if you do have Product Variants, use:

    {{ product.variants.first.add_to_cart_url }}

With Product Variants, you can define the default Variant you are using, on this case it is the first, but you could replace it with:

    {{ product.variants[2].add_to_cart_url }} or
    {{ product.variants[3].add_to_cart_url }}
    {{ product.variants.last.add_to_cart_url }}

So that you can better control when to use one of the Tags:

    <a href="" class="button add-to-cart">Comprar</a>