Size Region Selector

[crepscity]

Hi there,

I would like to implement a size region selector on my website. The selector should allow customers to choose between different size regions (UK, EU, US). Once a customer clicks on one of the buttons, the sizes for that region should be displayed automatically.

Here’s the functionality I’m aiming for:

1. Region Selection: A set of buttons for UK, US, and EU sizes.

2. Dynamic Size Display: When a customer selects a region, the size chart for that region will be displayed, showing the appropriate sizing information.

3. Responsive Design: The selector should be easy to use across both desktop and mobile devices.

Please let me know if you need more information or further clarification.

like this website https://www.kickgame.com/products/air-jordan-air-jordan-4-retro-fear-2024-fq8138-002

[Mustafa_Ali]

hey @crepscity try this one### Step 1: Add a “Region” Option in Variants1. Go to Shopify Admin > Products and select the product you want to modify.

1. Click Edit Variants and add a new option called “Region” with values US, UK, EU.

2. Add corresponding size options for each region.

Step 2: Modify Your Product Page to Auto-Switch Sizes- Navigate to Online Store > Themes > Edit Code.

• Open main-product.liquid or product-template.liquid.

• Find the size selector and wrap it with this code: {{ product.options_by_name['Size'] | json }} Step 3: Style the Selector Open your theme’s CSS file (theme.css or base.css) and add: #size-region-selector { display: flex; gap: 10px; margin-bottom: 15px; } .size-region-btn, .size-btn { padding: 8px 12px; border: 1px solid #000; background: white; cursor: pointer; transition: 0.3s ease; } .size-region-btn:hover, .size-btn:hover { background: black; color: white; } If you want to store different size charts for each product, you can use Metafields instead of Variants. Step 1: Add Metafields for Size Data1. Go to Shopify Admin > Settings > Custom Data > Products. Click Add Definition and create a metafield called “size_chart”. Add values like this: Namespace & Key: custom.size_chart Type: JSON Example Data: { "us": ["6", "7", "8", "9", "10"], "uk": ["5", "6", "7", "8", "9"], "eu": ["39", "40", "41", "42"] } Step 2: Modify Product Page to Use Metafields- Open main-product.liquid and add: {% assign size_chart = product.metafields.custom.size_chart.value %} Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ----> if this code work please do not forget to like and mark it solution best regard MUSTUFA

[crepscity]

Hi MustafA16,

Thank you for your response.

I have over 1000 products and going through each one individually will take too long, is there a way to target all products at once?

[Mustafa_Ali]

Yes! You can apply the size region selector to all products at once using one of these method

Use Shopify Bulk Editor1. Go to Shopify Admin → Products.

1. Select all products (or filter by collection if needed).

2. Click Edit products (Bulk Editor).

3. Add a new column for Metafields (if using the metafield approach).

4. Paste the JSON size data for all products at once.

[Easify-Jolie]

Hi @crepscity

You can achieve this easily with Easify Product Options—no coding needed! It allows you to set up a size region selector with buttons for UK, US, and EU sizes. When a customer selects a region, the corresponding size chart will be displayed dynamically. Plus, it’s fully responsive, ensuring a smooth experience on both desktop and mobile. Here’s how it works:

• This is the result:

• This is the app setting:

Go to Advance Setting, using Conditional Logic to show UK size chart only when UK is selected as size region. And do the same with US and EU.

This app is straightforward, and I believe it will work well for you. Reach out to Easify if you need any assistance!

[crepscity]

Hi Easify-Jolie,

I’ve tried to follow your steps, however, it seems that this requires a paid plan to proceed.

[crepscity]

Hi MustafA16,

I’ve tried implementing your solution, but I don’t think you fully understand my requirements. The code you provided created a size chart, but that’s not what I’m looking for.

What I need is a way to target the actual default product sizes and have the UK, EU, US region selector appear at the top of the page. Customers should be able to click on their correct region and select the size associated with that region, and for the default sizes to change accordingly to EU, US, or UK.

The solution you provided only shows a size chart as a reference, but it doesn’t update the actual product size variants that customers can add to the cart based on their selected region.

This website is the best example how it should operate and look:

https://www.kickgame.com/products/air-jordan-air-jordan-4-retro-fear-2024-fq8138-002

Thank you.

[Easify-Jolie]

Hi @crepscity

Thank you for trying Easify! The options I used in the demo is completely free, it includes modal (size chart), button (size option) and conditional logic. This is what free plan provide:

If you have any trouble setting it up, our 24/7 in-app live chat is always available. Feel free to reach out to our customer service anytime. Thanks again!

[MichaelC830]

I tried Easify, the app is straight forward but you cannot apply the options set up in a universal level, you’ll have to link each individual variant one by one. This is too time consuming for most clothing/shoe stores.