Taming the Dawn Theme: How to Auto-Select Available Variants and Ditch Customer Confusion

Hey fellow store owners! Let's talk about a common head-scratcher that recently popped up in the Shopify community forum, and frankly, it's one I've seen many times before. It’s about variant selection in the Dawn theme, and how it can sometimes leave your customers scratching their heads when an unavailable option stubbornly remains 'selected.'

Our friend @kristd brought up a classic scenario. They sell locks, and for one particular product, customers can choose between individual sizes or a complete kit. The setup looked something like this:

• 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 the kit, naturally only available in "All (kit)" size. The problem arose when a customer, starting with Part A and .5" selected, switched to Part B. Dawn would correctly gray out or cross out the individual sizes, indicating they weren't available for the kit. But here's the kicker: the .5" option would remain visually selected, highlighted in the accent color, even though it was unavailable!

This is super confusing for customers, making it seem like there are no valid size options, as @kristd pointed out. They wanted Dawn to automatically select "All (kit)" when Part B was chosen, making the path to purchase crystal clear. Sound familiar? Take a look at the image @kristd shared to illustrate the issue:

Why Does This Happen? It's a Dawn Theme 'Feature'

As @shopplaza_team and @Maximus3 pointed out, this isn't a bug in your setup; it's a known behavior of the Dawn theme (and even older Shopify themes!). Dawn's variant picker shows availability, but it doesn't automatically correct an option to a valid value when a combination becomes invalid. It just leaves whatever was last selected visually checked. Shopify requires the Add to Cart button to be disabled for unavailable variants, but not that the selection *itself* has to change. It's a deliberate design choice, but one that can definitely lead to a suboptimal user experience.

Solutions from the Community: Code, Apps, and Structure

The good news? The community rallied with several excellent solutions. There are a few ways to tackle this, from a quick code snippet to a more robust theme modification or even an app. Let's break them down:

1. The Targeted JavaScript Fix (Confirmed by @kristd to work!)

This is the solution provided by @shopplaza_team, and @kristd confirmed it worked perfectly for their specific scenario! It's elegant because it leverages Dawn's existing logic rather than trying to rebuild it. The idea is to listen for changes to your "Part Number" option, and if the kit is selected, programmatically select "All (kit)" for the "Size" option.

How to Implement:

1. Duplicate Your Theme: Always, always, always duplicate your live theme before making code changes. This is your safety net! Go to Online Store > Themes > Actions > Duplicate.
2. Edit Theme Code: In your duplicated theme, click Actions > Edit code.
3. Locate sections/main-product.liquid: Add this script near the bottom of this file (or in a snippet included there).
4. Paste the Code:

Important Checks:

• Option Names: Confirm your option legends are literally named "Part Number" and "Size" (case/spacing matters). Adjust the script's string matches if yours differ.
• Value Text: Ensure your kit part number and "All (kit)" size value reliably contain "kit" and "all" respectively, as the regex checks for this.

This script essentially "clicks" the correct option for the customer, letting Dawn's built-in variant logic handle the rest (price, add-to-cart state, URL updates).

2. The More Generic JavaScript Fix

@v.marychenka offered a clever, more generalized code snippet that reads your actual product variants, so it doesn't need hard-coded option names or values. It runs before Dawn processes the selection, automatically picking a valid option if the current selection becomes invalid.

How to Implement:

1. Duplicate Your Theme: (Again, always!)
2. Edit Theme Code: In your duplicated theme, click Actions > Edit code.
3. Add Custom Liquid Block: Switch the Home page drop-down to your product template (e.g., product.json). Under the "Product information" section, click "Add block," choose "Custom Liquid."
4. Paste the Code:

This script is a robust choice if you have many interconnected variant dependencies.

3. Deeper Theme Logic Modification (for newer Dawn versions)

@Maximus3 offered a more comprehensive fix, especially relevant for newer Dawn architectures that split variant logic across components. This is a more involved code change, so proceed with extra caution and only if the simpler scripts don't meet your needs.

How to Implement:

1. Duplicate Your Theme: Seriously, do it!
2. Edit Theme Code: Online Store > Themes > Actions > Edit code.
3. Edit Snippets/product-variant-options.liquid:
   1. Replace this block:

      assign opti
      if value.available
        assign opti
      endif
      

      With:

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

      
      

   2. Replace:

      checked: value.selected,
      

      With:

      checked: option_selected,
      

      
      

   3. Replace both instances of {% if value.selected %} with {% if option_selected %}.
      
      

4. Edit Assets/product-info.js:
   1. 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;
      }
      

      
      

   2. Replace:

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

      With:

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

      
      

5. Save both files and test thoroughly.

4. The App-Based Solution

If diving into code isn't your thing, @Easify-Jennifer from Easify Product Options offered a no-code solution using their app's Conditional Logic feature. This allows you to set rules: when "Part B" is selected, hide the individual sizes and only show "All Kit."

How to Implement (using Easify Custom Product Options):

1. Install the Easify Custom Product Options app from the Shopify App Store.
2. Create your "Button" options for "Part Number" (e.g., A and B Kit) and "Size" (e.g., 0.5", 0.75", 1", 2", and All Kit).
   

3. Go to the Advanced Settings section and enable Conditional Logic.
4. Set conditions: When "Part A" is selected, display individual sizes. When "Part B (Kit)" is selected, hide individual sizes and only show "All Kit."
   

This approach provides a cleaner UI, as customers only see relevant options. It's a great choice if you prefer not to touch code or have complex conditional logic requirements for many products.

5. Structural Adjustments (Consider with Caution)

@v.marychenka initially suggested a structural change: deleting the "Part Number" option if "Format" plus "Extension Size" already uniquely identify your variants. They also recommended moving the actual part numbers into the SKU fields for each variant, which can then be displayed using Dawn's built-in SKU block.

While this could simplify things, @kristd decided against it because they needed to keep the "Part Number" option visible for consistency across other product pages and for customer clarity. @Jack_BuildsShopify also wisely advised caution, noting that deleting options needs careful consideration of how it impacts fulfillment SKUs and valid combinations.

This approach is worth considering if your product variant structure allows for it and you want to avoid code or apps, but as @kristd found, it might not always align with your specific store's needs.

Which Solution is Right for You?

As you can see, there are several effective ways to tackle this common Dawn theme quirk. The targeted JavaScript solution from @shopplaza_team is a great starting point, especially since @kristd found it worked for their specific case. If you have more complex variant interdependencies or prefer a hands-off approach, the generic JavaScript or an app like Easify might be better fits.

Regardless of which route you choose, always remember to duplicate your theme first! Custom code, especially, might need re-application after a major theme update. And always test thoroughly to ensure your changes create a smoother, clearer experience for your customers without introducing new issues. Happy optimizing!