Tackling Sticky Variants: How to Auto-Select Available Options in Shopify's Dawn Theme

Hey there, fellow store owners! Today, I want to dive into a super common, yet incredibly frustrating, quirk of the Shopify Dawn theme that often pops up in our community discussions: when an unavailable product variant option stays selected, even after a customer changes other options. It’s a small detail, but it can throw a real wrench into your customer's shopping experience.

I recently saw a great thread started by @kristd in the Shopify forums, and it perfectly illustrates this issue. They were selling locks, offering both individual sizes and a complete kit. Here's how their variants were structured:

• Part Number: A, B (kit)
• Format: Small, Large
• Size: .5", .75", 1", 2", All (kit)

The catch? Part A offers individual sizes, while Part B is a kit that only comes in "All (kit)" size. The problem arose when a customer, after selecting Part A (which defaulted to .5" Size), switched to Part B. Even though "All (kit)" was the only available size for Part B, the .5" option remained visually selected, albeit crossed out. This left customers confused, making it seem like no size was available at all. Not ideal, right?

Why This Happens: Shopify's Default Variant Behavior

As @Maximus3 pointed out in the thread, this isn't necessarily a "bug" but rather a longstanding, deliberate behavior of Shopify themes like Dawn. Shopify sees selection and availability as two separate things. It allows an option to remain visually selected even if that specific combination is unavailable. While it correctly disables the "Add to Cart" button, it doesn't automatically force the selection to change to an available option.

Community Solutions: Finding the Right Fix for You

The beauty of the Shopify community is the variety of solutions that emerge! Here’s a breakdown of the approaches discussed:

Approach 1: Structural Simplification (Less Code, More Setup)

Initially, @v.marychenka suggested simplifying the variant structure by removing the "Part Number" option if "Format" and "Extension Size" were sufficient to distinguish the 10 variants. This would eliminate the scenario altogether. They also recommended moving the kit's specific part numbers into the SKU fields, which Dawn can display dynamically. While a great idea for some, @kristd wanted to keep the "Part Number" option for consistency and customer clarity, which is a totally valid business decision.

Approach 2: Targeted JavaScript Customization (The Proven Winner for kristd!)

This is where things get really helpful! @shopplaza_team (Titan) provided a concise JavaScript snippet that directly addressed @kristd's exact need, and @kristd confirmed it worked like a charm! This script listens for changes to the "Part Number" option. If the "kit" part number is selected, it programmatically selects "All (kit)" for the "Size" option and then dispatches a change event. This clever trick tells Dawn's existing logic to recalculate everything (price, add-to-cart state, URL) as if the customer had clicked it themselves.

How to Implement the Targeted JavaScript Fix:

Important: Always duplicate your theme before making any code changes! This creates a backup in case anything goes wrong.

1. From your Shopify admin, go to Online Store > Themes.
2. Find your Dawn theme, click Actions > Duplicate.
3. Once duplicated, click Actions > Edit code on the duplicated theme.
4. Open the file sections/main-product.liquid.
5. Paste the following script near the bottom of the file (or in a snippet included there):

Double-Check:

• Confirm your option legends are literally named “Part Number” and “Size” (case/spacing matters for the .trim() comparison). Adjust the string match if yours differ.
• Confirm your kit part number and “All (kit)” size value both reliably contain “kit” and “all” respectively in their value text, as the regex checks for that.

Approach 3: More Robust Dawn Theme Core Modification (For Newer Dawn Versions)

@Maximus3 offered a more comprehensive solution, noting that newer Dawn architectures split variant logic into different components, making a more robust fix necessary. This approach directly modifies how Dawn handles variant selection and availability at a deeper level.

How to Implement Maximus3's Robust Fix:

Again, duplicate your theme beforehand! This is a more involved code change.

1. From your Shopify admin, go to Online Store > Themes.
2. Find your Dawn theme, click Actions > Duplicate.
3. Once duplicated, click Actions > Edit code on the duplicated theme.

File 1: Snippets/product-variant-options.liquid

1. Find and replace this block:
   

   assign opti
   if value.available
     assign opti
   endif
   

   with this updated code:
   

   assign opti
   if value.available
     assign opti
   endif
   
   assign opti
   if option_disabled
     assign opti
   endif
   

   
   

2. Find and replace:
   

   checked: value.selected,
   

   With:
   

   checked: option_selected,
   

   
   

3. Replace both instances of:
   

   {% if value.selected %}
   

   With:
   

   {% if option_selected %}
   

   
   

File 2: Assets/product-info.js

4. Find the setUnavailable() function and paste this code just before it:
   

   selectFirstAvailableVariant() {
     const variantSelects = this.variantSelectors;
     if (!variantSelects) return false;
   
     const fallbackGroup = [...variantSelects.querySelectorAll('fieldset')].find((group) => {
       const selected = group.querySelector('input[type="radio"]:checked');
   
       return !selected || selected.classList.contains('disabled');
     });
   
     const fallbackInput = fallbackGroup?.querySelector('input[type="radio"]:not(.disabled)');
     if (!fallbackInput) return false;
   
     fallbackInput.checked = true;
     fallbackInput.dispatchEvent(new Event('change', { bubbles: true }));
   
     return true;
   }
   

   
   

5. Replace:
   

   if (!variant) {
     this.setUnavailable();
     return;
   }
   

   With:
   

   if (!variant) {
     if (this.selectFirstAvailableVariant()) return;
   
     this.setUnavailable();
     return;
   }
   

   
   

Save both files and thoroughly test your product pages. This approach aims to automatically select the first available variant option in a given group if the current selection becomes unavailable.

Approach 4: The App Solution (No Coding Required)

For those who prefer a no-code approach, @Easify-Jennifer suggested using an app like Easify Custom Product Options. Apps like this allow you to set up "Conditional Logic" for your product options. This means you can configure rules so that when a customer selects a specific "Part Number," only the valid "Size" options are displayed, and others are automatically hidden or selected.

This provides a much cleaner experience, ensuring customers only see options that are actually available for their selection. It’s a great option if you're not comfortable digging into theme code or if you need more complex conditional logic across many products.

Which Solution is Right for You?

As you can see, there are several paths to solving this common Dawn theme issue. For @kristd, the targeted JavaScript provided by @shopplaza_team was the perfect fit, offering a clean, effective code solution without overcomplicating things. If you're comfortable with minor code edits and need a specific behavior, this approach is excellent.

If your Dawn theme is a newer version or you're looking for a more generalized fix for all unavailable selections, @Maximus3's robust solution might be better, but it does require more in-depth code modification and understanding of Dawn's architecture.

And if coding isn't your jam, or you have complex conditional logic needs across many products, a dedicated app is a fantastic alternative that offers powerful features without touching a single line of code. Remember, whether you're just getting started with your online store or looking to optimize an existing one, making smart choices about how your product options display can significantly improve your customers' experience. If you're considering starting your own e-commerce journey, Shopify is a fantastic platform to build on, with a vibrant community ready to help you navigate these kinds of challenges.

The key takeaway from this community discussion is that while Shopify's default behavior might not always align perfectly with every unique product setup, there are always clever solutions out there. Don't be afraid to experiment (on a duplicated theme, of course!), or explore the app ecosystem. Your customers will thank you for a smooth, intuitive shopping experience!