Custom Shopify Add to Cart Button

Question

I have a custom size chart in my Shopify Store and when someone clicks on the size they want and then click the Add to Cart button I would like to have that size be added to the cart. However, right now I am unsure how I can accomplish this. Any ideas?

HTML

<div class="sizes">
  {{ 'size-triangle.png' | asset_url | img_tag }} 
  {% for variant in product.variants %}
    <a href="#" class="size-btn {{ variant.title }}-product {% if variant.inventory_quantity == 0 %}outofstock{% endif %} {% if variant.title contains 'OS'%}hide{% endif %}" data-quantity="{{ variant.available }}" data-id="{{ variant.id }}" data-size="{{ variant.title }}">{{ variant.title }}</a>
  {% endfor %}
</div>

<div id="product-add">
   <input class="button" type="submit" name="add" value="Add to cart" id="purchase">
</div>

Steph Sharp Steph Sharp · Accepted Answer · 2014-05-18T09:06:37

Sounds like Line Item Properties is what you are looking for:

Line Item Properties are used to collect customization information about an item when it is added to the cart.
...
Shopify looks for form fields that have a name attribute set to properties[ANYTHING].

E.g.

<input type="text" id="monogram" name="properties[Monogram]" />

Custom Shopify Add to Cart Button

1 Answers