title: Shopify Store - Variant Not adding To Cart
body: <p>I cannot get my swatch variants to change what product is being added to the cart. No matter what I add it is adding the 'emerson' product. Here is my product.liquid code. I am also using the swatches app. </p>
  
  <pre><code>{% include 'bold-product' with product, hide_action: 'break' %}{% if bold_hidden_product %}{% break %}{%endif %}
  &lt;!-- Bold D&amp;H //product --&gt;
  {% if product.metafields.inventory.ShappifyHidden == "true" %}
  Product is not available
  {% break %}{% endif %}
  &lt;!-- // end product D&amp;H --&gt;
  
  {% include 'shappify-bdl-no-select' %}
  
  &lt;!-- Bold: Discount D&amp;H --&gt;
  {% if product.metafields.inventory.ShappifyHidden == "true" %}
  Product is not available
  {% else %}
  &lt;div id="col-main" class="span12 bva"&gt;
      &lt;div itemscope itemtype="http://schema.org/Product" class="product-scope"&gt;
          &lt;meta itemprop="url" content="{{ shop.url }}{{ product.url }}" /&gt;
          &lt;meta itemprop="name" content="{{ product.title }}" /&gt;
  
          &lt;!-- NEW --&gt;
  
          &lt;div class="gallery span8"&gt;
                 &lt;span class=”desc”&gt; {{ product.metafields.lifestyle.gallery }} &lt;/span&gt;
          &lt;/div&gt;
  
  
          &lt;div class="product-top bva span9"&gt;
              &lt;div id="product-image" class="product-image bva"&gt;
                  &lt;div id="product" class="row-fluid clearfix"&gt;
                      &lt;div id="product-image" class="span12 product-image"&gt;
                          &lt;div class="product-image-wrapper bva"&gt;
                              &lt;div class="product-thumb-slides"&gt;
                                  {% for variant in product.variants %}
                                {% include 'bold-hidden-variants' with variant, bold_loop: 'loop' %}
                                      {% assign image_variant_available = true %}
  
                                          {% assign image = variant.image %}
                                          {% assign index = forloop.index | minus: 1 %}
                                      &lt;div data-swatch="{{ image.alt | downcase | handleize }}" data-swatch-color="{{ image.alt }}"  data-index="{{ index }}" data-variant-id="{{ variant.id }}"&gt;
                                          &lt;img src="{{ image | img_url: 'compact' }}" alt="{% if image.alt contains 'youtube' %}{{ product.title }}{% else %}{{ image.alt | escape }}{% endif %}" /&gt;
                                      &lt;/div&gt;
  
                                  {% endfor %}
  
  
                              &lt;/div&gt;
  
          &lt;div id="product-image" class="span12 product-image"&gt;
            &lt;div class="product-image-wrapper"&gt;
  
                &lt;a target="_blank" href="{{ product.featured_image | product_img_url: 'original' }}" class="main-image{% if settings.main_image_display == 'zoom' or settings.main_image_display == 'both' %} elevatezoom{% endif %}{% if settings.main_image_display == 'lightbox' %} fancybox{% endif %}"&gt;
                  &lt;img  itemprop="image"id="main-image" class="img-zoom img-responsive image-fly" src="{% if shappify_bdl_options_count &gt; 1 %}{{ product.featured_image | product_img_url: 'grande' }}{% else %}{{ product.featured_image | product_img_url: 'original' }}{% endif %}" alt="{{ product.title | escape }}" /&gt;
                  &lt;span class="main-image-bg"&gt;&lt;/span&gt;
                &lt;/a&gt;
  
                    {% if product.images.size &gt; 1 %}
                    {% if settings.viewmore_image_display == 'carousel' %}
                    &lt;div class="gallery_main_wrapper"&gt;
                                  {% endif %}
                          &lt;div id="gallery_main" class="product-image-thumb {% if settings.viewmore_image_display == 'scroll' %}scroll scroll-mini{% endif %} clearfix"&gt;
                                {% for image in product.images %}
                                  {% assign image_variant_available = false %}
                                  {% if image.variants.size &gt; 0 %}
                                      {% for variant in image.variants %}
                                          {% if variant.available %}
                                              {% assign image_variant_available = true %}
                                          {% endif %}
                                      {% endfor %}
                                  {% else %}
                                      {% assign image_variant_available = true %}
                                  {% endif %}
                                {% if image_variant_available %}
                                  {% if image.alt contains '-alt' %}
                                  {% else %}
                                  &lt;a class="image-thumb{% if forloop.index == 1 %} active{% endif %}" href="{{ image | product_img_url: 'original' }}" data-image-zoom="{{ image | product_img_url: 'original' }}" data-image="{{ image | product_img_url: 'original' }}"onclick="if($('.selector-wrapper .single-option-selector[data-option=\'option1\'] option[value=\'{{ image.alt | replace: "'", "\\'" }}\']').length &gt; 0 &amp;&amp; $('.selector-wrapper .single-option-selector[data-option=\'option1\']').val() != '{{ image.alt | replace: "'", "\\'" }}') $('.selector-wrapper .single-option-selector[data-option=\'option1\']').val('{{ image.alt | replace: "'", "\\'" }}'), $('.selector-wrapper .single-option-selector[data-option=\'option1\']').trigger('change');"&gt;
                                    &lt;img src="{{ image | product_img_url: 'small' }}" alt="{% if image.alt contains 'youtube' %}{{ product.title }}{% else %}{{ image.alt | escape }}{% endif %}" /&gt;
                                  &lt;/a&gt;
                                  {% endif %}
                                {% endif %}
                                {% endfor %}
                                {% for image in product.images %}
  
                                {% if image.alt contains 'youtube' %}
                                {% assign embed_url = image.alt %}
                                      &lt;div class="image-thumb-video play-icon"&gt;
                                        &lt;img src="{{ image | product_img_url: 'small' }}" alt="{{ product.title | escape }}" /&gt;
                                        &lt;a class="play-container fancy" href="{{ embed_url }}" title="{{ product.title }}"&gt;
                                          {{ 'play-icon.svg' | asset_url | img_tag: 'Play Video', 'play-image' }}
                                        &lt;/a&gt;
                                        &lt;p&gt;WATCH&lt;br&gt;VIDEO&lt;/p&gt;
                                      &lt;/div&gt;
                                {% endif %}
  
                                {% endfor %}
                            &lt;/div&gt;
                          {% if settings.viewmore_image_display == 'carousel' %}
                        &lt;/div&gt;
                        {% endif %}
                        {% endif %}
                      &lt;/div&gt;
  
          {% if settings.tweet_code == 'below' %}
          {% if settings.tweet_code_page != empty %}
          &lt;a id="tweet_code" class="btn btn-2" href="{{pages[settings.tweet_code_page].url}}"&gt;&lt;i class="icon-hand-right"&gt;&lt;/i&gt; {{settings.tweet_code_discount_button}}&lt;/a&gt;
          {% endif %}
          {% endif %}
        &lt;/div&gt;
  
  
  
                              &lt;script&gt;
                              jQuery(document).ready(function($){
  
  
  
  
                                  $('.product-thumb-slides').slick({
                                      slidesToShow: 4,
                                      slidesToScroll: 1,
                                      asNavFor: '.product-slick-gallery',
                                      dots: false,
                                      arrows: true,
                                      focusOnSelect: true,
                                      vertical: true,
                                      centerMode: false,
                                      infintie: false,
                                      nextArrow: '&lt;i class="fa fa-chevron-down slick-next"&gt;&lt;/i&gt;',
                                      prevArrow: '&lt;i class="fa fa-chevron-up slick-prev"&gt;&lt;/i&gt;',
  
                                  });
  
                                  $('.product-slick-gallery').slick({
                                      arrows: false,
                                      dots : false,
                                      asNavFor: '.product-thumb-slides'
  
                                  });
  
  
                                  $('.quantity').spinner({
                                      min: 1,
                                      change: function(event,ui){
                                          $(this).attr("value", this.value);
                                          //$('.add-cart').attr('data-quantity', this.value);
                                      }
                                  });
  
                                  $('.product-thumb-slides').on('beforeChange', function(event, slick, currentSlide, nextSlide){
                                      var variantID = $('.product-thumb-slides .slick-slide[data-index="'+nextSlide+'"]').data('variant-id');
                                      var swatch_color = $('.product-thumb-slides .slick-slide[data-index="'+nextSlide+'"]').data('swatch-color');
                                      // console.log(variantID);
                                    //$('.add-cart').attr('data-variant-id', variantID);
                                    $('.hidden-variant-field').attr('value', variantID);
                                    $('.color-name-dynaimc').html(swatch_color);
  
                                  var $swatch = $('.swatch-element[data-variant-id="'+variantID+'"]');
                                  // console.log($swatch);
                                  if($swatch.hasClass('soldout')){
                                      $('.add-cart').addClass('out-of-stock');
                                      $('.cart-button').html('SOLD OUT');
                                  }else{
                                      $('.add-cart').removeClass('out-of-stock');
                                      $('.cart-button').html('ADD TO CART');
                                  }
  
  
                                  });
  
  
                                  var productDesc = $('.product-info .product-description p:nth-child(2)').html();
                                  $('.product-info .product-description p:nth-child(2)').html('&lt;strong&gt;DESCRIPTION&lt;/strong&gt;'+productDesc);
  
                                  $('.color-name-dynaimc').html( $('.product-thumb-slides .slick-slide[data-index="0"]').data('swatch-color') );
                                  //$('.add-cart').attr('data-variant-id', $('.product-thumb-slides .slick-slide[data-index="0"]').data('variant-id') );
                                  $('.hidden-variant-field').attr('value', $('.product-thumb-slides .slick-slide[data-index="0"]').data('variant-id') );
  
  
                                  // $('.add-cart').click(function(event){
                                  //     event.preventDefault();
                                  //     var variantID = $(this).data('variant-id');
                                  //     var quantity = $(this).data('quantity');
                                  //     CartJS.addItem( variantID, quantity);
  
                                  //     setTimeout(function(){
                                  //         location.reload();
                                  //     },500);
  
  
                                  // });
                              });
                              &lt;/script&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="product-share"&gt;
                      SHARE THIS PRODUCT:
  
                      &lt;img src="{{ 'facebook-logo-01.png' | asset_url }}" class="fa fa-facebook social-sharing-icon" style="max-width: 30px" data-network="facebook"&gt;
                      &lt;img src="{{ 'twitter-logo-silhouette-01.png' | asset_url }}" class="fa fa-twitter social-sharing-icon" style="max-width: 30px" data-network="twitter"&gt;
                      &lt;img src="{{ 'pinterest-logo-button-01.png' | asset_url }}" class="fa fa-pinterest social-sharing-icon" style="max-width: 30px" data-network="pinterest"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="product-details bva"&gt;
                  &lt;div class="titles"&gt;
                      &lt;div itemprop="name" class="product-name"&gt;
                          &lt;h1&gt;{{ product.title }} &lt;span class="mobile-only"&gt;- &lt;span class="color-name-dynaimc"&gt;&lt;/span&gt;&lt;/span&gt;&lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div class="detail-price" itemprop="price"&gt;
                          &lt;span class="price"&gt;{{ product.price | money }}&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
  
  
                &lt;div class="variants-wrapper clearfix{% if hide_default_title %} hide{% endif %}"&gt; 
                    &lt;select id="product-select-{{ product.id }}" name="id"&gt;
                      {% for variant in product.variants %}
                      {% include 'bold-hidden-variants' with variant, bold_loop: 'loop' %}
                      {% if variant.metafields.shappify_bundle.is_bundle == "true" %}{% else %}
                      &lt;option value="{{ variant.id }}"&gt;{{ variant.title | escape }} - {{ variant.price | money }}&lt;/option&gt;
                     {% endif %}
                      {% endfor %}
                    &lt;/select&gt;
                  &lt;/div&gt;
  
  
                       &lt;form action="/cart/add" method="post" class="product-actions variants " enctype="multipart/form-data"&gt;
                          &lt;div id="product-actions-{{ product.id }}"  class="options qty-cart"&gt;
                              &lt;!--&lt;input id="quantity" type="number" name="quantity" value="1" min="1" class="span4 item-quantity" /&gt;--&gt;
                              &lt;div class="input-box"&gt;
                                  &lt;input id="quantity" type="text" name="quantity" class="quantity item-quantity" value="1" min="1" /&gt;
                              &lt;/div&gt;
                              &lt;div class="action-wrapper product add-cart"&gt;
                                  &lt;div class="product-wait"&gt;&lt;/div&gt;
                                  &lt;input type="hidden" name="id" value="{{ variant.id }}" class="hidden-variant-field"/&gt;
                                  &lt;button class="cart-button   {% if variant.inventory_quantity &lt; 0 %}out-of-stock{% endif %}" unbxdattr="AddToCart" unbxdparam_sku="{{product.id}}" data-parent=".product-information" type="submit" name="add"&gt;ADD TO CART&lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                {% unless bundle_loaded == 'true' %}
    {% include 'shappify-bdl-load-bundle' %}
    {% assign bundle_loaded = 'true' %}
  {% endunless %}       
                &lt;div class="rumepoints"&gt;
                         &lt;strong&gt;You Will Earn:&lt;/strong&gt; &lt;span class=”desc”&gt; {{ product.metafields.totes.rumepoints }} &lt;/span&gt; &lt;u&gt;RuMe Rewards Points&lt;/u&gt; for this item
                      &lt;/div&gt;
  
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;div class="descriptionusesfeatures"&gt;
              &lt;div class="product-description"&gt;
                  &lt;strong&gt;DESCRIPTION&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
                  {{ product.description }}
              &lt;/div&gt;
              &lt;div class="description-right"&gt;
  &lt;div class="usesforhtml"&gt;&lt;strong&gt;USES FOR:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
    &lt;span class=”desc”&gt; {{ product.metafields.usesfor.usesforhtml }} &lt;/span&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div class="productfeatures"&gt;&lt;strong&gt;FEATURES:&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
    &lt;span class=”desc”&gt; {{ product.metafields.features.productfeatures }} &lt;/span&gt;
    &lt;/div&gt;
          &lt;/div&gt;
    &lt;/div&gt;
          &lt;!-- END --&gt;
  
  
  
  
  {% if settings.product_description_show == 'below' %}
  &lt;div itemprop="description" class="description text-left"&gt;
      &lt;h1&gt;{{ product.title }}&lt;/h1&gt;
      &lt;!-- {{ product.description }} Replaced with shortcodes version,below --&gt;
      {% include 'shortcodes' with product.description %}
  &lt;/div&gt;
  {% endif %}
  
  {% if settings.reviews_enable %}
  &lt;div id="shopify-product-reviews" data-id="{{product.id}}"&gt;{{ product.metafields.spr.reviews }}&lt;/div&gt;
  {% endif %}
  &lt;/div&gt;
  
  {% include 'related-products' %}
  
  
    &lt;!-- yotpo --&gt;
    &lt;div class="yotpo yotpo-main-widget"
      data-product-id="{{ product.id }}"
      data-name="{{ product.title | escape }}"
      data-url="{{ shop.url }}{{ product.url }}"
      data-image-url="{{ product.featured_image | product_img_url: "large" |replace: '?', '%3F' | replace: '&amp;','%26'}}"
      data-description="{{ product.description | escape }}"&gt;
    &lt;/div&gt;
    &lt;!-- yotpo --&gt;
  &lt;/div&gt;
  &lt;!-- end slider wrapper -—&gt;
  
  &lt;!-- Bold: Discount D&amp;H --&gt;
  
  
  
  {% endif %}
  &lt;script type="text/javascript"&gt;
  (function e(){var e=document.createElement("script");e.type="text/javascript",e.async=true,e.src="//staticw2.yotpo.com/V3G5rrxyCEg9hXApffAzbDMC6CsghmTdUpbf8D2z/widget.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();
  &lt;/script&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
  $("a.fancy").click(function() {
      $.fancybox({
          'padding'             : 40,
          'autoScale'         : false,
          'transitionIn'        : 'fade',
          'transitionOut'       : 'fade',
          'title'               : this.title,
          'width'               : 1280,
          'height'              : 720,
          'href'                : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/') + '?autoplay=1',
  'type'                : 'swf',    // &lt;--add a comma here
  'swf'                 : {'allowfullscreen':'true'} // &lt;-- flashvars here
  });
      return false;
  
  });
  
  &lt;/script&gt;
  
  &lt;script&gt;
  // To change what your customers would see if they try to
  // add to cart without completing an option, edit the yellow text enclosed within the quotation marks.
  var errorMessages = {
      for_text_inputs  : "Please add your personalized text before adding to cart.",
      for_number_inputs: "Please enter a custom quantity.",
      for_checkboxes   : "Please select your options before adding to cart",
      for_dropdowns    : "Please select an option before adding to cart"
  };
  
  jQuery("form[action='/cart/add'] [type=submit]").on("click", function(e) {
      if (
          window.Shoppad &amp;&amp;
          window.Shoppad.apps &amp;&amp;
          window.Shoppad.apps.customizery &amp;&amp;
          window.Shoppad.apps.customizery.overrideDeprecatedValidation
          ) return true;
  
          $io = $('#infiniteoptions-container');
  
      var invalidTextInputs = $io.find("input[type=text][required], textarea").filter(function (idx, el) {
          return $(el).val() === '';
      });
  
      var invalidNumberInputs = $io.find('input[type=number][required]').filter(function (idx, el) {
          return $(el).val() === '';
      });
  
      var invalidFieldSets = $io.find('fieldset[data-required=true]').filter(function (idx, fieldSet) {
          if ($(fieldSet).find('input[type=checkbox]').length === 0) {
              return false;
          } else {
              return $(fieldSet).find('input[type=checkbox]').filter(function (idx, el) {
                  return el.checked === true;
              }).length === 0;
          }
      });
  
      var invalidDropdowns = $io.find('select[required]').filter(function (idx, select) {
          return !select.selectedOptions[0] || select.selectedOptions[0].disabled === true;
      });
  
      var onFail = function (messageType) {
          e.stopImmediatePropagation();
          alert( errorMessages[messageType] );
          return false;
      };
  
      if (invalidTextInputs.length &gt; 0) {
          return onFail( 'for_text_inputs' );
  
      } else if (invalidNumberInputs.length &gt; 0) {
          return onFail( 'for_number_inputs' );
  
      } else if (invalidFieldSets.length &gt; 0) {
          return onFail( 'for_checkboxes' );
  
      } else if (invalidDropdowns.length &gt; 0) {
          return onFail( 'for_dropdowns' );
  
      } else {
          return true;
      }
  });
  &lt;/script&gt;
  
              {% include 'shappify-bdl-load-bundle' %}
  &lt;script type="text/javascript"&gt;
  
                // initialize multi selector for product
                jQuery(document).ready(function($){
  
                  /* selectCallback */
                  var selectOptionsCallback = function(variant, selector) {
  
                    var add_to_cart = '#add-to-cart';
                    var $price = '#purchase-' + selector.product.id.toString() + ' .detail-price';
                    if (variant &amp;&amp; variant.available) {
                      // selected a valid variant
                      $(add_to_cart).removeClass('disabled').removeAttr('disabled'); // remove unavailable class from add-to-cart button, and re-enable button
  
                      if(variant.compare_at_price == null){
                        $($price).html('&lt;span class="price"&gt;'+Shopify.formatMoney(variant.price, "{{shop.money_format}}")+'&lt;/span&gt;');
  
                        {% if settings.show_multiple_currencies %}
                        /* Update currency */
                        currenciesCallbackSpecial('#product-information span.money');
                         {% endif %}
                         } else {
                           $($price).html('&lt;del class="price_compare"&gt;' + Shopify.formatMoney(variant.compare_at_price, "{{shop.money_format}}") + '&lt;/del&gt;' + '&lt;span class="price_sale"&gt;'+Shopify.formatMoney(variant.price, "{{shop.money_format}}") + '&lt;/span&gt;');
  
                           {% if settings.show_multiple_currencies %}
                           /* Update currency */
                           currenciesCallbackSpecial('#product-information span.money');
                            {% endif %}
                            }
                           } else {
                             $(add_to_cart).addClass('disabled').attr('disabled', 'disabled'); // set add-to-cart button to unavailable class and disable button
                             var message = variant ? "Sold Out" : "Unavailable";
                             $($price).html('&lt;span class="unavailable"&gt;' + message + '&lt;/span&gt;');
                           }
  
                           if (variant &amp;&amp; variant.inventory_quantity &amp;&amp; variant.inventory_management == 'shopify') {
                             jQuery("#stock").html(variant.inventory_quantity).parent().show(); 
                           }
                           else{
                             jQuery("#stock").parent().hide(); 
                           }
  
                           {% if settings.trans_product_sku %}
                           if (variant &amp;&amp; variant.sku) { 
                             jQuery("#sku").html(variant.sku).parent().show(); 
                           }
                            else{
                              jQuery("#sku").parent().hide(); 
                            }
                           {% endif %}
  
                           {% if settings.product_barcode_show %}
                           if (variant &amp;&amp; variant.barcode) { 
                             jQuery("#barcode").html(variant.barcode).parent().show(); 
                           }
                            else{
                              jQuery("#barcode").parent().hide(); 
                            }
                            {% endif %}
  
  
                            //Swapping images JS
                            $('.product-image-thumb img[alt="'+ $('.selector-wrapper .single-option-selector[data-option=\'option1\']').val() +'"]').first().parent().trigger('click');
                         };
  
  
                    new Shopify.OptionSelectors("product-select-{{ product.id }}", { product: {{ product | json | remove:'\u003E' | remove:'\u003C' | remove:'\u00a0' }}, onVariantSelected: selectOptionsCallback });
                    &lt;!-- START Hide OOS Product Varients --&gt;      
                      {% if product.options.size == 1 %}
                      {% for variant in product.variants %}
                      {% include 'bold-hidden-variants' with variant, bold_loop: 'loop' %}
                      {% if variant.metafields.shappify_bundle.is_bundle == "true" %}{% else %}
                      {% unless variant.available %}
                      jQuery('.single-option-selector option').filter(function() { return jQuery(this).html() === {{ variant.title | json }}; }).remove();
                    {% endunless %}
                    {% endif %}       
                    {% endfor %}
                    //jQuery('.single-option-selector').trigger('change');
                    {% endif %}     
                    &lt;!-- END Hide OOS Product Varients --&gt;    
                      // Add label if only one product option and it isn't 'Title'.
                      {% if product.options.size == 1 and product.options.first != 'Title' %}
                      $('#product-actions-{{ product.id }} .selector-wrapper:eq(0)').prepend('&lt;label&gt;{{ product.options.first }}&lt;/label&gt;');
                      {% endif %}
  
                      // Auto-select first available variant on page load.
                      {% assign found_one_in_stock = false %}
                      {% for variant in product.variants %}
                      {% include 'bold-hidden-variants' with variant, bold_loop: 'loop' %}
                      {% if variant.metafields.shappify_bundle.is_bundle == "true" %}{% else %}
                      {% if variant.available and found_one_in_stock == false %}
                      {% assign found_one_in_stock = true %}
                      {% for option in product.options %}
                      $('.single-option-selector:eq({{ forloop.index0 }})').val({{ variant.options[forloop.index0] | json }}).trigger('change');
                    {% endfor %}
                    {% endif %}
                    {% endif %}      
                    {% endfor %}
                  });
              &lt;/script&gt;
  
  {% include 'windsor-product-tracking' %}Ò
  </code></pre>