Shopify/Liquid, add product variant of specific size to cart (products.api)

Technical Q&A
1

Hello! I’m 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!

2

were you able to figure this issue out?

My site is having the same problem! I have to contact everyone that orders a small item to make sure that’s what they wanted, and almost all of them have been the wrong size!

I am desperately seeking help for this. I’m losing money everyday because of this issue

Derrick from Relish

3

@Relish_Brand
@mattheli198

This is a bit of a broad question, but I’d suggest to do this with AJAX. The easiest/simplest way is to use Cart.JS

You’d just need to pass the product’s ID, quantity and variant into the CartJS’ addItem function.

CartJS.addItem(12345678, 5, { "size": "XL" });

More information can be found here.