Shopify/Liquid, add product variant of specific size to cart

Question

im probably having this issue due to my lack of my experience with the liquid and the shopify platform in general.

Here's my issue:

In the current theme im working on, when a product is added to card it is always adding the smallest available size. Im not 100 % confident this is the code that is actually doing it but im fairly positive it is.

onclick=" Shopify.addItem('{{ product.variants.first.id}}', 1);

Currently when this code is fired the products smallest size (assuming its the first) is added to the cart.

I tried to take a look at the shopify API documentation for product.variants but it seems the theme or store is not using the latest version since I cant find any references to this first property.

What I would like if for there to be control in terms of product size when the add to cart action is triggered. Instead of adding the smallest size always it can persay add product.variants.{SIZE}.id instead (Not actual code just a guess)

If anyone could point me in the right direction of proper documentation for something like this or if you've had a similar question I would greatly appreciate it!

In addition to David Lazar's answer, one thing to keep in mind as you explore building themes for Shopify is that all Liquid code is rendered server-side to create the document that goes to the user's browser and is static from that point on. To respond to user actions on the page you will need to use Javascript and work with data dynamically (and remember to treat any Liquid variables as you would hard-coded values). Also, whenever you pass values to Javascript, be sure to use the json filter. (See shopify.dev/docs/themes/liquid/reference/filters/…) — Dave B

chefjuanpi chefjuanpi · Accepted Answer · 2020-12-08T05:15:36

this is easy :)

yes this is the code sending the product to the cart and this theme don't support product variants. You should add the variants support.

some theory:

Variants is an array. variants.first is a liquid function for easily take the first element of the array, check the liquid docs for more details.

The important part is, to add an item you need to send the variant id. always is the variant id.

now the magic:

you need to iterate on product.variants, keep on someplace the variant id and finally pass the value to the function.

onclick=" Shopify.addItem('{{ product.variants.first.id}}', 1);

by

onclick=" Shopify.addItem( {{ variant.id }}, 1);

you can use wherever you want, you can use select, or even got for a pure js / ajax solution using the cart API

extra detail the 1 is the qty, you can set it dinamic too.

I don't know your desing, so on psedo-code with multiple buttons you can do:

 {% for variant in product.variants %}
   <button onclick="Shopify.addItem('{{ variant.id }}', 1)">
     {{ variant.title }}
   </button>
 {% endfor %}

Shopify/Liquid, add product variant of specific size to cart

2 Answers