title: Shopify Option Selectors Not Changing Price
body: <p>I'm trying to fix my option selection because previously this company had Bold Installed and it messed with our option selection. I've got the Option selection to show but EXACTLY how I want it but it works for now... But the price will not change no matter what I do! Can anyone help me figure what I'm missing here?</p>
  
  <p>The first code snippet is contained in my 'product-form.liquid' snippet</p>
  
  <pre><code>    &lt;form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm" class="form-vertical"&gt;
  
      &lt;select name="id" id="ProductSelect" class="product-single__variants"&gt;
                  {% for variant in product.variants %}
                    {% if variant.available %}
  
                      &lt;option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}"&gt;{{ variant.title }} - {{ variant.price | money_with_currency }}&lt;/option&gt;
  
                    {% else %}
                      &lt;option disabled="disabled"&gt;
                        {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                      &lt;/option&gt;
                    {% endif %}
                  {% endfor %}
                &lt;/select&gt;
        {% if settings.product_swatches %}
          {% if product.available and bold_variants_size &gt; 1 %}
            {% for option in product.options %}
              {% include 'swatch' with option %}
            {% endfor %}
          {% endif %}
        {% endif %}
        {% if settings.product_different_swatches %}
          {% include 'different_product_swatches' with product.type, titlee: settings.product_different_swatches_title %}
        {% endif %}
  
       &lt;div class="formWrap"&gt;
        &lt;div class="price-variant-wrap"&gt;
          &lt;span class="priceText"&gt;PRICE:&lt;/span&gt;
           &lt;span class="visually-hidden"&gt;{{ 'products.general.regular_price' | t }}&lt;/span&gt;
                &lt;span id="ProductPrice" class="h2" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}"&gt;
                  {{ current_variant.price | money }}
                &lt;/span&gt;
  
                {% if product.compare_at_price_max &gt; product.price %}
                  &lt;span class="visually-hidden"&gt;{{ 'products.general.sale_price' | t }}&lt;/span&gt;
                  &lt;p id="ComparePrice"&gt;
                    {{ 'products.product.compare_at' | t }} {{ current_variant.compare_at_price | money }}
                  &lt;/p&gt;
                {% endif %}
        &lt;/div&gt;
  
        {% assign isFreeGift=false %}
        {% for tag in product.tags %}
          {% if tag =='SECOMAPP_FREEGIFT'%}
            {% assign isFreeGift=true %}
          {% endif %}
        {% endfor %}
        {% if isFreeGift == false %}
        &lt;div class="product-bottom-wrap"&gt;
  
          &lt;div class="fancy_btn_wrap"&gt;
            &lt;div class="product-single__add-to-cart"&gt;
            {% if settings.prod_quantity == 'plus-minus' %}
                {% include 'quantity' %}
            {% elsif settings.prod_quantity == 'number' %}
              &lt;label for="Quantity" class="quantity-selector"&gt;{{ 'products.product.quantity' | t }}&lt;/label&gt;
              &lt;input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector"&gt;
            {% endif %}
              &lt;div class="submit-container"&gt;
                &lt;button type="submit" name="add" id="AddToCart" data-price="{{ current_variant.price | money_without_currency }}" class="btn {{settings.product_page_button_type}} "&gt;
                  &lt;input type="hidden" name="return_to" value="back" /&gt;
                  &lt;span id="AddToCartText"&gt;{{ 'products.product.add_to_cart' | t }}&lt;/span&gt;
                &lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
         {% endif %}
      &lt;/div&gt;
          &lt;div id="shopmessage-checkbox" class="fbmessage"&gt;&lt;/div&gt;
      &lt;/form&gt;
      &lt;div class="sca-fg-cat-list" style="display: none;" name="secomapp-fg-data-{{ product.id }}"&gt; &lt;/div&gt;
  </code></pre>
  
  <p>This code below is in my product.template</p>
  
  <pre><code>    &lt;div itemprop="offers" itemscope itemtype="http://schema.org/Offer"&gt;
                  &lt;meta itemprop="priceCurrency" content="{{ shop.currency }}"&gt;
  
                  &lt;link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}"&gt;
                  {% if settings.product_description_location == 'above_form' %}
                  &lt;div class="product-description rte" itemprop="description"&gt;
  
                   {% if product.description contains '&lt;!-- split --&gt;' %} 
                     {{ description[0] }} 
                   {% else %} 
                     {{ product.description }} 
                   {% endif %}
                  &lt;/div&gt;
                {% endif %}
                  {% comment %}
                    ID addToCartForm is a selector for the ajax cart plugin
                  {% endcomment %}
                  {% include 'product-form' %}
                  {% include 'addthis' %}
  
                &lt;/div&gt;
  
      &lt;script&gt;
      var selectCallback = function(variant, selector) {
        {% if settings.product_swatches %}
        // BEGIN SWATCHES
        if (variant) {
          var form = jQuery('#' + selector.domIdPrefix).closest('form');
          for (var i=0,length=variant.options.length; i&lt;length; i++) {
            var radioButton = form.find('.swatch[data-option-index="' + i + '"] :radio[value="' + variant.options[i] +'"]');
            if (radioButton.size()) {
              radioButton.get(0).checked = true;
            }
          }
        }
        // END SWATCHES
        {% endif %}
        timber.productPage({
          money_format: "{{ shop.money_format }}",
          variant: variant,
          selector: selector
        });
      };
  
      jQuery(function($) {
        new Shopify.OptionSelectors('productSelect', {
          product: {{ product | 'json' }},
          onVariantSelected: selectCallback,
          enableHistoryState: false
        });
  
        // Add label if only one product option and it isn't 'Title'. Could be 'Size'.
        {% if product.options.size == 1 and product.options.first != 'Title' %}
          $('.selector-wrapper:eq(0)').prepend('&lt;label for="productSelect-option-0"&gt;{{ product.options.first | escape }}&lt;/label&gt;');
        {% endif %}
  
        // Hide selectors if we only have 1 variant and its title contains 'Default'.
        {% if bold_variants_size == 1 and bold_selected_or_first_available_variant.title contains 'Default' %}
          $('.selector-wrapper').hide();
        {% endif %}
      });
  
      {% unless product.title == 'Gift Card' %}
        var checkExist = setInterval(function() {
          if ($('.spr-badge .spr-badge-caption').length) {
            var rating = $('.spr-starrating.spr-summary-starrating').html();
            var noOfRatings = $('.spr-summary-caption').html();
            var ratingHolder = $('.ratingHolder');
            ratingHolder.prepend(noOfRatings);
            ratingHolder.prepend(rating);
            ratingHolder.click(function(){
              $('#product_tabs .tab_3 a').trigger('click');
              $('html, body').animate({
                scrollTop: $("#product_tabs").offset().top - $('.site-header').outerHeight() - 30
              }, 1000);
            });
            clearInterval(checkExist);
          }
        });
      {% endunless %}
      &lt;/script&gt;
  </code></pre>
  
  <p>Not quite sure what's happening here pretty much the code from the live code but bold is removed and the  is different. the 'productSelect' is lower cased on live code as oppose to it being uppercase which actually makes the 'select' show.</p>
  
  <p>Thanks!</p>