How can I display clothing sizes in UK, US, and EU formats?

Store Design
, ,
1

Hi everyone, Im looking for a way I can present to customers a way to change their sizes to UK, EU, and US. Im looking for something exactly like this website if someone can help me on what to do.

https://www.kickgame.co.uk/products/nike-dunk-low-black-white-dd1391-100

Screenshot 2023-02-19 at 18.05.34.png
Screenshot 2023-02-19 at 18.05.34.png1316×700 168 KB

2

Hi @kaidickson ,

Thank you for getting in touch. We have a guide on adding a size chart to your product pages on the Shopify Help Center which walks you through how to do this, although this guide is for vintage Shopify themes. You can also look into hiring a Shopify Expert if you’d like a professional proficient with coding to help you make this change.

There are also a number of apps on the Shopify App Store that can help you add a size guide to your store. I’d recommend checking out some of the following:

There are many apps to choose from but these are three of the more popular options.

3

I am curious how to build a simultaneous UK/US/EU sizing layout on the product page for clothing variants, to replace Shopify Apps or using a Shopify developer?

4

You can try this app Kiwi Size Chart & Recommender.

5

Hey @kaidickson ,
Welcome to the Shopify Community!

I understand you’d like to give customers the option to switch between UK, EU, and US sizes on your product page - similar to what you see on Kick Game’s website. This can be done by setting up a simple size toggle with a grid display.

Place this where you want the size selector to appear (e.g., inside your product form in product-template.liquid or a custom section):

<div class="size-selector">
  <label for="size-format">Show sizes in:</label>
  <select id="size-format">
    <option value="uk">UK</option>
    <option value="eu">EU</option>
    <option value="us">US</option>
  </select>

  <div id="size-grid" class="size-grid"></div>
</div>

Add CSS:

You can add this to your theme’s CSS file to make the grid clean and user-friendly:

.size-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 15px;
}

.size-grid button {
  padding: 10px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.size-grid button:hover {
  background: #000;
  color: #fff;
}

Add JavaScript:

This script controls the size toggle and dynamically updates the grid. Add it to your theme’s theme.liquid just before the closing tag:

const sizes = [
  { uk: "5.5", eu: "39", us: "6" },
  { uk: "6",   eu: "40", us: "7" },
  { uk: "6.5", eu: "40.5", us: "7.5" },
  { uk: "7",   eu: "41", us: "8" },
  { uk: "8",   eu: "42", us: "9" },
  { uk: "9",   eu: "43", us: "10" },
  { uk: "10",  eu: "44", us: "11" },
  { uk: "11",  eu: "45", us: "12" },
  { uk: "12",  eu: "46", us: "13" }
];

const sizeGrid = document.getElementById("size-grid");
const sizeFormat = document.getElementById("size-format");

function renderSizes(format) {
  sizeGrid.innerHTML = "";
  sizes.forEach(size => {
    const btn = document.createElement("button");
    btn.textContent = size[format];
    btn.addEventListener("click", () => {
      alert(`Selected size: ${size[format]} (${format.toUpperCase()})`);
    });
    sizeGrid.appendChild(btn);
  });
}

sizeFormat.addEventListener("change", (e) => {
  renderSizes(e.target.value);
});

// Default view
renderSizes("uk");

If you’d like help connecting this directly to your product variants so customers can checkout with the right size, feel free to reach out.

Here’s my portfolio where you can also find my contact details:-https://rajatweb.dev/

Best Regards,

Rajat | Shopify Expert