Custom Size Selector – Wrong Variant Being Added to Cart (Dawn Theme)

[crepscity]

Hey everyone,

I’ve recreated a size selection feature similar to what I’ve seen on Laced or Kick Game — for example, these product pages:
https://www.laced.com/products/nike-p-6000-anthracite-smoke-grey
https://www.kickgame.com/products/air-jordan-air-jordan-4-retro-fear-2024-fq8138-002

I’m working on a duplicate theme using the Dawn theme, where I’ve built a custom size selection system directly in main-product.liquid. It uses custom HTML and JavaScript to allow users to choose between UK, EU, and US size formats.

I’ve also hidden Shopify’s default size grid and created a completely custom one to give full control over the layout and behavior.

The structure works visually — users can switch regions and click sizes.

The issue:
Even after selecting a different size, when "Add to Cart" is clicked, Shopify still adds the default (first) variant instead of the one selected by the user.

Here is the HTML and JavaScript I’m using — am I missing any functions or steps in the JavaScript?

[sizzlecentral]

Hi,

What does your "add to cart" function look like? It looks like your JS is trying to update the form element with the "data-variant-id" attribute from the size buttons, but what happens after the add to cart event we can't see.

Is it reading from that attribute of the form to see what variant to add, or is maybe looking at the ATC button attributes instead? If it is targeting the form attribute, are you sure that is being set correctly on variant click? What is that variantInput change event being used for? 

These are some questions that should steer you in the right direction - hope it helps!

Don

[crepscity]

Hey,

I’ve been trying to follow what you’re saying but honestly I’m still a bit confused on what exactly needs to happen in the JavaScript. I understand the concept updating the input[name="id"] with the selected variant ID but I think I might be missing something with how it's hooked into the form.

Would you mind sharing a working example of the JavaScript you’d use in this case so that the form adds the correct variant to the cart?

Really appreciate your help.

Thank you in advance.

[sizzlecentral]

We want to know what happens when you click the "add to cart" button - that isn't shown in the code you've shared. It should be gathering the variant ID and the quantity, then sending a post request to Shopify with those details. Either the element the code is trying to get the variant ID from is not being updated correctly (on size button click), or those updates are working and it's looking at the wrong element to get the ID from.

[mageplaza-cs]

Hi @crepscity 

I am from Mageplaza - Shopify solution expert.

I have seen the JavaScript code from your screenshot.

Please debug that JavaScript code and make sure the value of the variantInput variable is updated after clicking the size-btn button.

If you're unable to do that, you can provide me with your website URL.

Best regards!