How can I automatically display available color options upon size selection?

Shopify Discussion

Topic summary

A Shopify store owner is struggling with variant display logic for a product with two options: Size (A, B) and Color (1, 2).

The Problem:

  • Only variants A1 and B2 actually exist in inventory (A2 and B1 were deleted)
  • When selecting Size B, Shopify defaults to showing the non-existent B1 variant
  • Customers must manually click Color 2 to see the available B2 variant and purchase options
  • This issue persists even when using the Glo Color Swatch app to hide unavailable colors

Attempted Solution:
The user tried implementing JavaScript code (found online) in the theme editor to automatically select the first available color when switching sizes. The code attempts to:

  • Fetch product data when size changes
  • Check which variants are available for the selected size
  • Auto-populate and select the matching color option

However, the code is not working. The user is seeking a way to automatically display and select the available color variant when customers switch size parameters, eliminating the need for manual color selection.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

Ok let’s make it as simple as i can:

  1. I have a product let’s call it “Shoes” (its a specific model like: NIke Air Max 90 - just for context)
  2. I created variants of it with 2 separators Size (A and B) and Colour (1 and 2).
  3. Shopify created all options A1 A2 B1 B2 - the problem is i have only A1 and B2, so i deleted A2 and B1 from variants list below, and for existing ones i add product pictures.
  4. Now the fun beggins: On product page when i choose this model (“Shoes”) i see A1 variant displayed, when i want to change Size separator to B - shopify show me B1 (which doesn’t exist in my store - buy options are not avaliable on page)
  5. Then I have to manualy click to colour 2 option (after that i see B2 variant and buy options are avaliable again)
  6. Im using Glo Color Swatch - I hide there not avaliable colour variants so in size B page i can only see color 2 indicator but i have to manualy click it to display it after switching size from A1 option), but the problem exist even with this app beeing off - I see all color options but stil have to manualy click it form not existing color variant (color name is crossed) to a avaliable one color variant in this size parameter.

Is there a way to automaticaly switch it to display avaliable color option variant after switching size parameter?

I search the internet and have tried this one and paste it in theme-editor.js but its not working at all:

document.querySelector('[name="Size"]').addEventListener('change', function(e) {
  var sizeSelect = e.target;
  var size = sizeSelect.value;
  var colorSelect = document.querySelector('[name="Color"]');

  // Fetch product data
  fetch('/products/' + size + '.json')
    .then(response => response.json())
    .then(data => {
      var product = data.product;

      // Populate color select options
      product.variants.forEach(function(variant) {
        // Check if the variant is available and matches the selected size
        if (variant.available && variant.option1 === size) {
          var option = document.createElement('option');
          option.value = variant.id;
          option.textContent = variant.option2; // Assuming option2 is color

          // Automatically select the first available color
          if (!colorSelect.value) {
            option.selected = true;
          }

          colorSelect.appendChild(option);
        }
      });
    });
});
1 Like