Need help fixing variant picker :)

[JrShEw]

We’ve got our variant picker almost working how we’d like, but are stuck on the last part.
We’d like to offer two versions of a product, regular and premium, the color and size options are dependent on regular vs premium. The color options are working great. But when you change from regular to premium, the size options disappear until you pick a color, and then the size options appear. Why aren’t they just always there?
We are using the Dawn theme. We got this far by adding:

.js.product-form__input.product-form__input–pill input.disabled + label {
display: none;
}

to the end of the base.css file.

[rajweb]

Hey @JrShEw .

Great job getting the variant picker working that far—Dawn’s variant system can be a bit tricky when you have dependencies like you’re dealing with!

What you’re running into is due to how Shopify’s Dawn theme (and product.js) renders variant options dynamically based on available variants. When you switch the product type (Regular or Premium), the color options update immediately because they’re directly tied to that change. But size doesn’t show up until a color is picked, because at that moment, Shopify finally knows a valid product variant (combination) and reveals size accordingly.

How to fix it:

1. Modify your JavaScript to show size options based on ProdType, even before color is selected.

Find your product form logic in assets/product.js (Dawn) or possibly global.js depending on the version. Look for the variant change logic—around onVariantChange() or updateOptions(). Insert logic like:

document.querySelectorAll('[name="options[ProdType]"]').forEach((input) => {
  input.addEventListener('change', () => {
    const selectedProdType = document.querySelector('[name="options[ProdType]"]:checked').value;

    // Show size options based on selected ProdType
    document.querySelectorAll('[name="options[Size]"] + label').forEach((label) => {
      const input = label.previousElementSibling;
      const labelText = label.textContent.trim();
      
      // You may want to define which sizes belong to Regular vs Premium
      const regularSizes = ['S', 'M', 'L', 'XL', '2XL'];
      const premiumSizes = ['XS', 'S', 'M', 'L', 'XL'];

      const isRelevant = selectedProdType === 'Regular'
        ? regularSizes.includes(labelText)
        : premiumSizes.includes(labelText);

      if (isRelevant) {
        label.style.display = '';
      } else {
        label.style.display = 'none';
      }
    });
  });
});

2. Remove the CSS hiding disabled labels:

.js.product-form__input.product-form__input--pill input.disabled + label {
  display: none;
}

This line hides size options prematurely. If you need to visually differentiate disabled ones, use:

.js.product-form__input.product-form__input--pill input.disabled + label {
  opacity: 0.5;
  pointer-events: none !important;
}

Let me know if you’d like help integrating this snippet based on your current JS code. If you want to share your product.js or a snippet of it, I can tailor the fix exactly.

If you want me to implement this please feel free to reach out me anytime.

Best Regards

Rajat

Shopify Expert

https://rajatweb.dev/

[Dan-From-Ryviu]

Hi @JrShEw

Could you share the link to the product page?

[Easify-Jolie]

Hi @JrShEw

You can use Easify Product Options to manage your product variants with conditional logic, allowing you to control the visibility of size and color options based on the customer’s selection. The best part is, you don’t need to write any code at all. It’s a simple, no-code solution to streamline your product page setup. Here’s how it works:

• This is the result:

• This is the app setting:

This is the conditional logic setting in the Advanced Setting, set like this to make sure Color for Regular type only show up when Regular is selected, and do the same with size and premium type.

You’ll find this app easy to use, so I hope you give it a try. If you need assistance, just let me know or reach out to Easify!

[JrShEw]

Thanks @rajweb !! We’ll give this a shot and report back.
You mentioned the Dawn theme can be a bit tricky when it comes to variants. Is there a different theme you’d recommend? We’re just getting started with Shopify, so we’re totally open to advice and better ideas!

[JrShEw]

Thanks @Easify-Jolie ! We’d hadn’t heard of this app
We’re totally new to this and just getting started. Is what you described above available with the free version of the app or would we need to invest in the Pro or Premium plan?

Two quick questions..
There will be a price difference between regular and premium, does the app give us the ability to reflect that? I’m guessing yes..
We’d like to display different product descriptions between regular and premium, is that possible?
Thanks!!

[rajweb]

@JrShEw ,

No worries at all! If you’d like to create a custom setup, I’d be happy to help implement it for you. Please feel free to reach out anytime — thanks!

Out of curiosity, are you planning to add any more product options or advanced features down the line? I’d love to hear more about what you have in mind!

[Easify-Jolie]

Hi @JrShEw

Thank you for your interest! The option set I used in the demo above is available in the free plan.

For the price difference between Regular and Premium, we do offer that — it’s called add-on price for options. However, this feature is only available in the Pro plan, and we offer a 14-day free trial if you want to try it out.

If you’d like to stick with the free plan, a workaround would be:

• Create two Shopify variants (one for Regular, one for Premium) with different prices.

• Then use the app’s conditional logic to link these variants to your size and color options.

As for showing different product descriptions for Regular and Premium, yes — you can use the Paragraph option (available in the free plan) to add custom product descriptions — feel free to write whatever content you’d like there.

Let me know or reach out via our in-app live chat if you need help setting it up!