Minimal Theme - Size Buttons Not Triggering Right Size in Bag

Highlighted
New Member
5 0 0

I have followed this guide to add colour swatches and size swatches: https://help.shopify.com/en/themes/customization/products/features/add-color-swatches

 

Colours aren't enabled yet, but for the size selector I can see them all on the page.

 

Unfortunately, when I select a size and add to cart, it just adds the default size to the cart instead of the one I've selected.

0 Likes
Highlighted
New Member
5 0 0

I think I've narrowed it down to the JS.

 

The guide suggests adding to theme.liquid and gives two different peices of code.

 

It says copy and paste this:

<script>
jQuery(function() {
  jQuery('.swatch :radio').change(function() {
    var optionIndex = jQuery(this).closest('.swatch').attr('data-option-index');
    var optionValue = jQuery(this).val();
    jQuery(this)
      .closest('form')
      .find('.single-option-selector')
      .eq(optionIndex)
      .val(optionValue)
      .trigger('change');
  });
});
</script>

But there's an image below with this code:

 

<script>
jQuery(function() {
jQuery('.swatch :radio').change(function() {
var optionIndex = jQuery(this).parents('.swatch').attr('data-option-index');
var optionValue = jQuery(this).val();
jQuery('.single-option-selector')
.eq(optionIndex)
.find('option')
.filter(function))
{return jquery(this).text() 
});
});
</script>

I have tried both but neither will allow me to add my chosen size to the basket.

0 Likes