Size Conversion by Region on Product Page - Dawn Theme

[crepscity]

Hey everyone,

I've added a custom size selector on my product page using region-based buttons (UK, EU, US). Everything looks fine visually — sizes display correctly per region. However, the issue I'm facing is that when I select a size and click "Add to Cart", nothing shows on the cart drawer.

Here are the codes I'm using:

main-product.liquid (HTML for buttons):

liquid

<div class="size-region-container">
<div class="region-tabs">
<button class="tab active" data-region="UK" onclick="switchRegion('UK')">UK</button>
<button class="tab" data-region="EU" onclick="switchRegion('EU')">EU</button>
<button class="tab" data-region="US" onclick="switchRegion('US')">US</button>
</div>

<div class="sizes-grid">
{% for variant in product.variants %}
{% assign title = variant.title | upcase %}
{% if title contains 'UK' %}
<button
class="size-btn"
data-region="UK"
data-size="{{ title }}"
data-variant-id="{{ variant.id }}"
{% unless variant.available %}disabled{% endunless %}
>
{{ title | remove: 'UK ' }}
</button>
{% elsif title contains 'EU' %}
<button
class="size-btn"
data-region="EU"
data-size="{{ title }}"
data-variant-id="{{ variant.id }}"
{% unless variant.available %}disabled{% endunless %}
>
{{ title | remove: 'EU ' }}
</button>
{% elsif title contains 'US' %}
<button
class="size-btn"
data-region="US"
data-size="{{ title }}"
data-variant-id="{{ variant.id }}"
{% unless variant.available %}disabled{% endunless %}
>
{{ title | remove: 'US ' }}
</button>
{% endif %}
{% endfor %}
</div>
</div>

---

JavaScript for size and region switching:

html

<script>
document.addEventListener("DOMContentLoaded", function () {
switchRegion('UK');

document.querySelectorAll('.size-btn').forEach(btn => {
btn.addEventListener('click', function () {
document.querySelectorAll('.size-btn').forEach(b => b.classList.remove('selected'));
this.classList.add('selected');
});
});
});

function switchRegion(region) {
document.querySelectorAll('.region-tabs .tab').forEach(tab => {
tab.classList.toggle('active', tab.dataset.region === region);
});

document.querySelectorAll('.size-btn').forEach(btn => {
btn.style.display = (btn.dataset.region === region) ? 'flex' : 'none';
btn.classList.remove('selected');
});
}
</script>

---

CSS Styling (base.css):

css

.region-tabs {
display: flex;
justify-content: flex-end;
gap: 0rem;
margin-bottom: 1rem;
}

.region-tabs .tab {
width: 40px;
height: 30px;
border: 1px solid #000;
background: #fff;
font-size: 1.2rem;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0px;
transition: all 0.2s ease;
}

.region-tabs .tab.active {
border: 1px solid #000;
background-color: #fff;
}

.sizes-grid {
display: flex;
flex-wrap: wrap;
margin: 0;
}

.size-btn {
width: 80px;
height: 50px;
font-size: 1.2rem;
font-weight: 500;
border: 1px solid #ccc;
background-color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0px;
transition: all 0.2s ease;
margin: 0;
}

.size-btn.selected {
border: 1px solid #000;
}

.size-btn[disabled] {
opacity: 0.4;
cursor: not-allowed;
}

I think the issue has something to do with how the HTML and JavaScript are working together. If anyone has a fix or can suggest what I should change, I'd really appreciate it.

[mageplaza-cs]

Hi @crepscity 

I am from Mageplaza - Shopify solution expert.

I have reviewed your code above. Currently, you are displaying the product variants very well. However, the value of the input field with the name attribute 'id' is not being updated after you click on each variant. Please replace your JavaScript code with the following script.

<script>
    document.addEventListener("DOMContentLoaded", function () {
        switchRegion('UK');
        let productVariantId = document.querySelector('.product-variant-id');
        document.querySelectorAll('.size-btn').forEach(btn => {
            btn.addEventListener('click', function () {
                document.querySelectorAll('.size-btn').forEach(b => b.classList.remove('selected'));
                this.classList.add('selected');
                productVariantId.value = this.getAttribute('data-variant-id');
            });
        });
    });

    function switchRegion(region) {
        document.querySelectorAll('.region-tabs .tab').forEach(tab => {
            tab.classList.toggle('active', tab.dataset.region === region);
        });

        document.querySelectorAll('.size-btn').forEach(btn => {
            btn.style.display = (btn.dataset.region === region) ? 'flex' : 'none';
            btn.classList.remove('selected');
        });
    }
</script>

Please let me know if it works as expected!

Best regards!

[crepscity]

Hello,

Thanks for taking the time to review the code!

I tried implementing the updated JavaScript you provided, but unfortunately, it didn’t work as expected the input field with the name attribute id still isn’t updating when selecting a size therefore, incorrect size is getting added to cart.

If you have any other suggestions or if I might have missed something in the implementation, I’d really appreciate the help!

URL: https://crepscity.com/products/union-la-x-air-jordan-4-retro-guava-ice

[mageplaza-cs]

@crepscity 

Could you provide me with the staging site where you're conducting this test? The website you showed me appears to be the production environment, and it looks like the changes you're testing haven't been deployed there yet.

screenshot:

[crepscity]

Hi,

Apologies, I’m working on a duplicate theme using the Dawn theme, where I’ve built the custom size conversion system directly in main-product.liquid. 

Testing Theme URL: https://m5k6fbhudi5w4dcm-64748617967.shopifypreview.com/products/travis-scott-x-wmns-air-jordan-1-re...

[mageplaza-cs]

@crepscity 

I have checked your website.

The reason why the product variant cannot be added to the cart as expected is because you have completely removed the default variant product of the system. To fix this issue, please do not remove the default variant. Instead, use CSS style display: none; to hide it and only display your custom options. Please refer to the following screenshot:

[crepscity]

Hi,

I followed your advice and hid the default variant. However, I’m still running into the issue:

when I select a new size variant (like UK 10), it still adds the first/default size to the cart instead of the one I picked.

Do you know what could be causing that? Is there something else I need to adjust to make sure the selected size is the one that actually gets added?

Also, I noticed that in the Shopify theme editor, the new variant picker is showing up as “Price” instead of “Variant picker” could that be part of the issue? It seems like Shopify isn’t recognizing it as a true variant selector, which might explain why it’s not updating the cart properly.

Here’s the testing theme URL:
https://crepscity.com/products/air-jordan-4-retro-military-black-2

Appreciate your help!

[mageplaza-cs]

@crepscity 

I have debugged this JavaScript code. The issue is that the input element containing the variant ID does not have the class 'product-variant-id'. Therefore, please update the above script with my code below:

<script>
    document.addEventListener("DOMContentLoaded", function () {
        switchRegion('UK');
        let productVariantId = document.querySelector('input[name=id]');
        document.querySelectorAll('.size-btn').forEach(btn => {
            btn.addEventListener('click', function () {
                document.querySelectorAll('.size-btn').forEach(b => b.classList.remove('selected'));
                this.classList.add('selected');
                productVariantId.value = this.getAttribute('data-variant-id');
            });
        });
    });

    function switchRegion(region) {
        document.querySelectorAll('.region-tabs .tab').forEach(tab => {
            tab.classList.toggle('active', tab.dataset.region === region);
        });

        document.querySelectorAll('.size-btn').forEach(btn => {
            btn.style.display = (btn.dataset.region === region) ? 'flex' : 'none';
            btn.classList.remove('selected');
        });
    }
</script>

[crepscity]

Hi,

Ive tried this new java script and unfortunately im still running to that issue when I select a new size variant (like UK 11), it still adds the first/default size to the cart instead of the one I picked.

URL: https://crepscity.com/products/air-jordan-4-retro-og-fire-red-2021

[mageplaza-cs]

@crepscity 

Please give me your Staging page for me to check it. The current Staging page link has expired.

[crepscity]

HI,

URL: https://i6a0f6lo5v6cfi2b-64748617967.shopifypreview.com

[mageplaza-cs]

@crepscity 

Please update the Productvariantid variable in the script code

let productVariantId = document.querySelector('.product-form input[name=id]');

[crepscity]

Hi,

The JavaScript is now working correctly — the right variant size is being selected and passed to the cart when I click a size button.

However, I would like to request one adjustment:
Currently, when adding to the cart from the EU or US regions, it still shows the UK size only. While the selected variant is technically correct, I would prefer if the size was displayed in a full format like this:

UK 6.5 | EU 40 | US 7

This would make it clearer for customers shopping from different regions.

Let me know if you need any more details from my side. Thanks

[crepscity]

Hello,

I'm facing an issue, I've successfully set up custom size regions for specific collections on my store (for example, for the 'Nike' collection), and they are working perfectly. These collections now display sizes in multiple regions (UK, EU, US) as intended, and the experience is seamless for customers browsing those specific products.

However, I'm encountering an issue with my other collections that (GUCCI, LV DIOR ect), that are not targeted for custom regions. Instead of displaying the default sizes for those products, the size grid appears blank. I'm looking for a way to ensure that non-targeted collections show the default size variants as expected, rather than a blank grid.

Could you guide me on how to fix this issue? Any help would be greatly appreciated!

Thank you in advance for your support.

Link:https: //97ee47882ybye2r0-64748617967.shopifypreview.com

[mageplaza-cs]

Hi @crepscity 

Regarding the issue of displaying only UK sizes, I have rechecked it. Please see the image below.

As you can see, the variants for UK, EU, and US sizes are the same. This is the main reason why only UK sizes are being displayed. I believe the issue comes from incorrect variant setup for each market. You can refer to my variant setup in the image below.

In case you have already set up the variants correctly, the issue might be caused by some custom code you’ve added in a certain file. Could you please provide me with the name of that file so I can look into it further?

[crepscity]

Hi,

File name: sections/main-product.liquid - Line (255- 409). 

Theme Name: 24/04/2025

HTML & JAVA code below:

[mageplaza-cs]

@crepscity 

As for the issue of product variants not being displayed—for example, a product like the one in the image you sent—the cause could be that the variants are simply labeled '10' instead of 'UK 10'. Therefore, please go to the admin panel and double-check the exact names of the variants for that product. The screenshot of the code you shared earlier is related.

[crepscity]

I’ve tested this before and changed the variant name to UK 9 (instead of just 9), but unfortunately the size grid still doesn’t display any sizes for that product. I’ve double checked the product setup and the variant titles, and everything seems correct, but the size grid remains blank.

Let me know if there’s anything else I should check or try.

[crepscity]

Hi,

Any update on this?

Thank you in advance.

[mageplaza-cs]

@crepscity 
Could you please provide me with the website URL again? The current link has expired.

[crepscity]

Hi, 

URL: https://pqtdkzto3rk9zg0s-64748617967.shopifypreview.com

[crepscity]

Hi,

Just an update, after setting up the collections like Nike, Air Jordan, Yeezy, Adidas, etc. display the region selectors (UK/EU/US) correctly, and the sizes populate as expected, everything works smoothly there.

I've also managed to exclude collection products from the regional setup using {% unless product.title contains 'AMIRI' %} — those show their default size variants as intended.

CODE: 

Top Section:

liquid

{% unless product.title contains 'AMIRI' %} <div class="size-region-container"> <div class="region-tabs"> <button class="tab active" data-region="UK" onclick="switchRegion('UK')">UK</button> <button class="tab" data-region="EU" onclick="switchRegion('EU')">EU</button> <button class="tab" data-region="US" onclick="switchRegion('US')">US</button> </div> {% endunless %}

Bottom Section:

liquid

{% if product.title contains 'AMIRI' %} <div class="size-region-container"> <div class="sizes-grid"> {% for variant in product.variants %} <button class="size-btn" data-size="{{ variant.title | strip }}" data-variant-id="{{ variant.id }}" {% unless variant.available %}disabled{% endunless %}> {{ variant.title }} </button> {% endfor %} </div> </div> {% endif %}

Javascript&colon;

js

<script> document.addEventListener("DOMContentLoaded", function () { {% unless product.title contains 'AMIRI' %} document.querySelector('.sizes-grid').style.visibility = 'hidden'; setTimeout(() => document.querySelector('.sizes-grid').style.visibility = 'visible', 100); switchRegion('UK'); {% endunless %} }); </script>

The issue I'm still facing is with other designer/apparel collections (like Balenciaga slides , Dior sneakers, LV sneakers, etc.) — they are supposed to use the region tabs too, and while the tabs appear, the size grid is blank, even after I update the variant titles to UK sizing ("UK 7", "UK 8"). but i have returned there size variants back to normal for the mean time.

So, to sum up:

•  Nike/Yeezy/Air Jordan, etc. — region selectors + sizes show correctly 👍

•  AMIRI — bypasses regions and shows default sizes by targeting the brand names 👍

• Gucci sneakers/LV sneakers/Dior sneakers — region selectors show, but sizes do not populate ❌

here is the full code below:

[crepscity]

Hi,

Did you gat the chance to take a look?

URL: https://x7ordss7idxghst1-64748617967.shopifypreview.com

Thank you in advance.