Shopify集合页加购按钮异常：选中非默认规格仍添加默认规格

Hey Maria, I’ve run into this exact issue a few times with Shopify collection pages—let’s get your button adding the right variant instead of the default size every time!

The root problem here is almost always that your add-to-cart button isn’t dynamically updating to use the selected variant’s ID when a user picks a different size. It’s still clinging to the default variant ID you probably hardcoded initially. Here’s how to fix it step by step:

1. Make Sure Your Size Selector Triggers Updates #

First, you need to listen for when a user selects a new size, then capture that variant’s ID. Let’s assume your size options are either radio buttons or a dropdown with the class size-selector (adjust the class to match your code):

// Listen for changes on your size selector
document.querySelectorAll('.size-selector').forEach(selector => {
  selector.addEventListener('change', function() {
    // Grab the selected variant ID from the option's value
    const selectedVariantId = this.value;
    
    // Update your add-to-cart button or form with this ID
    const addToCartBtn = document.querySelector('.add-to-cart-btn');
    // Store the ID in a data attribute for easy access
    addToCartBtn.dataset.selectedVariant = selectedVariantId;
    
    // If you're using a form to submit, update the hidden ID input instead:
    // document.querySelector('input[name="id"]').value = selectedVariantId;
  });
});

2. Update the Add-to-Cart Logic to Use the Selected ID #

Next, modify your button’s click handler to use the dynamically stored variant ID instead of the default one. If you’re using Shopify’s built-in Shopify.addItem method, it would look like this:

document.querySelector('.add-to-cart-btn').addEventListener('click', function(e) {
  e.preventDefault();
  
  // Get the selected variant ID from the button's data attribute
  const variantId = this.dataset.selectedVariant;
  
  // Fallback to default variant if no selection is made (optional)
  const defaultVariantId = '123456789'; // Replace with your actual default variant ID
  const finalVariantId = variantId || defaultVariantId;
  
  // Add the selected variant to cart
  Shopify.addItem(finalVariantId, 1, function() {
    // Optional: Success feedback (e.g., update cart count, show alert)
    alert('Item added to cart!');
    window.location.href = '/cart'; // Or stay on the page
  }, function(error) {
    // Optional: Handle errors (e.g., out of stock)
    alert('Oops, that size is out of stock!');
  });
});

Quick Checks to Verify #

• Double-check that each size option’s value is set to the correct Shopify variant ID (you can find these in your Shopify Admin under Products > [Your Product] > Variants—look for the "ID" column).
• If you’re using a form instead of a JS handler, make sure the hidden input[name="id"] is being updated when a size is selected.
• Ensure there’s no conflicting JavaScript on the page that might be overriding your event listeners (check the browser console for errors!).

That should do it—your button will now add the exact size the user picks instead of sticking to the default.

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