Shopify商品默认变体误加入购物车问题排查求助

Let's break down the likely causes and actionable fixes for this frustrating issue, since you've already ruled out obvious culprits like template edits to core variant/ATC code and plugin interference.

1. CSS-Hidden Color Variant Is Breaking Variant Selection Logic #

Hiding the color variant with CSS is probably the root cause here. Shopify's variant-radios component relies on all product options having a selected value to compute the correct variant. Even though you only have one color option, visually hiding its input/label doesn't mean the component recognizes it as "selected" properly under the hood. This mismatch causes the component to fall back to the first available variant (your 36 size) instead of honoring the selected size.

Fix: Remove the Color Option from Rendering (Instead of Hiding It) #

Replace your existing variant-radios option loop with this modified version to skip rendering the color option entirely:

{%- when 'variant_picker' -%}
{%- unless product.has_only_default_variant -%}
{%- if block.settings.picker_type == 'button' -%}
<variant-radios class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
  {%- for option in product.options_with_values -%}
    {%- if option.name != 'Color' -%} {# Replace with your exact color option name #}
    <fieldset class="js product-form__input">
      <legend class="form__label">{{ option.name }}</legend>
      {%- for value in option.values -%}
      <input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}" name="{{ option.name }}" value="{{ value | escape }}" form="product-form-{{ section.id }}" {% if option.selected_value == value %}checked{% endif %} >
      <label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
        {{ value }}
      </label>
      {%- endfor -%}
    </fieldset>
    {%- endif -%}
  {%- endfor -%}
  <script type="application/json">
    {{ product.variants | json }}
  </script>
</variant-radios>

This way, the variant-radios component only interacts with the size option, eliminating any confusion from the hidden color field.

2. Static Variant ID in Add-to-Cart Form Isn't Updating #

Looking at your ATC code, the hidden id field uses {{ product.selected_or_first_available_variant.id }}—this is a static value set when the page loads. The variant-radios component should dynamically update this value when a new variant is selected, but if the component's JS is broken (due to the hidden color option), it won't trigger this update.

Verify & Fix: #

1. Open your browser's DevTools (F12) and go to the Elements tab.
2. Select a different size variant, then check if the input[name="id"] field's value changes to match the selected size's variant ID.
3. If it doesn't update, add this custom JS to your theme (e.g., in theme.liquid before the closing </body> tag) to force the update:

document.addEventListener('DOMContentLoaded', function() {
  const variantRadios = document.querySelector('variant-radios');
  const addToCartIdInput = document.querySelector('input[name="id"]');
  
  if (variantRadios && addToCartIdInput) {
    variantRadios.addEventListener('change', function(event) {
      const selectedVariant = JSON.parse(event.detail.variant);
      addToCartIdInput.value = selectedVariant.id;
    });
  }
});

3. Cache or Theme State Issues #

Even though your theme preview matches the live store, cached assets could be causing inconsistencies:

• Test the store in an incognito window to bypass browser cache.
• Re-publish your Cozy theme in Shopify admin to refresh any server-side cached templates.
• Temporarily disable the Product Filter & Search plugin (even if support said it's fine) to rule out edge-case conflicts.

Final Testing Steps #

1. Deploy the template change to skip the color option.
2. Clear your browser cache and test selecting different sizes, then check the cart to confirm the correct variant is added.
3. If the issue persists, use DevTools to monitor the variant-radios component's change event and ensure the hidden id field updates correctly.

内容的提问来源于stack exchange，提问作者Alexandru Alexe