Price not changing with selected variant!!

Highlighted
New Member
2 0 0

Can anyone help? 

The price is not changing when I select different variants, however the correct price shows up in the cart,

 Here’s my product.liquid source :

{% assign variant_tmp = product.selected_or_first_available_variant | default: product.variants.first %}
<div id="col-main">
  <div class="col-md-10" itemscope itemtype="http://schema.org/Product">
    <meta itemprop="url" content="{{ shop.url }}{{ product.url }}" />
    <div id="product" class="row clearfix">
      <div class="product-gallery col-sm-6">
        <div class="inner">
          <div class="thumbnails">
            {% for image in product.images %}
            <a class="thumbnail" href="{{ image | product_img_url:'master' }}" data-src="{{image | product_img_url:'grande'}}"><img src="{{ image | product_img_url:'small' }}" alt="{{product.title}}" /></a>
            {% endfor %}
          </div>

          {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
          <div class="main">
            <div class="main-img-link" href="{{featured_image | product_img_url:'master'}}" title="{{product.title}}">
              <img itemprop="image" class="main-img" src="{{product.featured_image | product_img_url:'grande'}}" alt="{{product.title}}" />
              {% include 'spinner' %}
            </div>
          </div>

          <div class="gallery-icon">
            <i class="fa fa-expand"></i>
          </div>
          <script>
            jQuery(document).ready(function(){
              jQuery('.gallery-icon').on('click', function(){
                var gallery = [];
                {% for image in product.images %}
                gallery.push('{{ image | product_img_url: 'original' }}');
                             {% endfor %}
                             roar.showThemeGallery(gallery, jQuery(this));
                return false;
              });
            });
          </script>
        </div>
      </div>

      <div class="product-sidebar col-sm-6">
        <div class="product_item">
          <div class="inner">
            {% include 'product-breadcrumb' %}
            <div class="product-title">
              <h1 itemprop="name" content="{{ product.title }}">{{ product.title }}</h1>
              {% if settings.product_sku_show %}
              <div id="sku"{% unless variant_tmp and variant_tmp.sku %} class="hidden"{% endunless %}>{{'products.product.sku' | t}} <span>{{variant_tmp.sku}}</span></div>
              {% endif %}
            </div>

            {% if settings.reviews_enable %}
            <a class="smoothscroll" href="#product-reviews-a">
              <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
            </a>
            {% endif %}

            <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
              <meta itemprop="priceCurrency" content="{{ shop.currency }}" />

              {% if product.available %}
              <link itemprop="availability" href="http://schema.org/InStock" />
              {% else %}
              <link itemprop="availability" href="http://schema.org/OutOfStock" />
              {% endif %}

              <div class="product-price">
                <div id="purchase" class="detail-price" itemprop="price">
                  {% if variant_tmp.compare_at_price > variant_tmp.price %}
                  <del class="price_compare"> {{ variant_tmp.compare_at_price | money }}</del>
                  <span class="price_percentage">-{{ variant_tmp.compare_at_price | minus: variant_tmp.price | times: 100.0 | divided_by: variant_tmp.compare_at_price | money_without_currency | times: 100 | remove: '.0'}}%</span>
                  {% endif %}
                  <div class="price">{{ variant_tmp.price | money }}</div>
                </div>
              </div>
              <div class="sharing-btn">
                <span>{{'products.product.share' | t}}</span>
                {% include 'social-sharing' %}
              </div>

              {% if product.available %}
              <form class="product-form" id="product-form" action="/cart/add" method="post" enctype="multipart/form-data" data-product-id="{{product.id}}">
                <div id="product-variants">
                  <select id="product-select" name="id" style="display: none;">
                    {% for variant in product.variants %}
                    {% if variant.available %}
                    <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
                    {% else %}
                    <option disabled="disabled">
                      {{ variant.title }} - {{'products.product.sold_out' | t}}
                    </option>
                    {% endif %}
                    {% endfor %}
                  </select>
                </div>

                <div class="limited-edition-group">
                  {% include 'limited-edition' %}
                </div>

                <div class="quantity">
                  <div class="group-input">      
                    <input type="number" title="{{'products.product.quantity' | t}}" step="1" min="1" size="4" id="quantity" name="quantity" value="1" />
                    <span class="bar"></span>
                  </div>
                  <button type="submit" class="btn btn-1 ripple add-to-cart" name="add" id="add" data-addtocart="{{'products.product.add_to_cart' | t}}" data-unavailable="{{'products.product.unavailable' | t}}" data-soldout="{{'products.product.sold_out' | t}}">{{'products.product.add_to_cart' | t}}</button>
                </div>
              </form>
              {% if settings.allow_wishlist %}
              <div class="product-wishlist wishlist-{{product.id}}">
                {% include 'wishlist-item' %}
              </div>
              {% endif %}

              <div id="backorder" class="hidden">
                <span id="selected-variant"></span> {{'products.product.backordered_html' | t}}
              </div>

              <div class="payment_logo">
                <img src="{{'payment-logo.png' | asset_url}}" alt="" />
              </div>
              {% else %}
              <meta itemprop="price" content="{{ product.price | money }}" />

              <div id="product-actions" class="sold-out">
                <div id="purchase">
                  <p class="price">{{'products.product.sold_out' | t}}</p>      
                </div>
              </div>    
              {% endif %}
            </div>
          </div>
        </div>
      </div>

      <div class="product-tabs col-sm-12">
        {% include 'product-tab' %}
      </div>
    </div>
  </div>

  <div class="col-md-2">
    {% include 'related-products' %}
    {% include 'recently-viewed' %}
  </div>
</div>
<script>window.products.id{{product.id}} = {{product | json}};</script>
{% if settings.viewed_enable %}
<script>Shopify.Products.recordRecentlyViewed();</script>
{% endif %}

0 Likes
Highlighted
Shopify Expert
2684 67 816

Hi Crystal, 

when you change the options on the product page, there is a special javascript which updates the price and other relevant information. The javascript in your theme is trying to update elements with different identifier then there is in your HTML.

Try changing these lines (shift and change id attributes):  

 <div class="product-price">
    <div id="purchase" class="detail-price" itemprop="price">

to be  

 <div class="product-price" id="purchase" >
    <div id="price" class="detail-price" itemprop="price">

 and your javascript will be able to find and update the data.

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
New Member
2 0 0

Thank you soo much!!

I was literally pulling my hair out trying to figure it out, it works perfectly.

Thanks again  

0 Likes
Highlighted
Shopify Expert
2684 67 816

New product in your store -- "Hair of the owner" limited edition 1 pc :)

You are welcome.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
New Member
2 0 0

Hello tim,

How are you?

I am having a problem with product price not changing with variant but the compared at price is changing. The product price changes after selecting the variant and by reloading the page!

Here is the link the product page:

https://fancyhomegoods.store/collections/bedding/products/thick-fleece-winter-warm-bedding-set

Below is part of the source code I think for the product price and variant:

<div id="product-price-wrap" itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="delta">
                  <meta itemprop="priceCurrency" content="{{ shop.currency }}" />
                  {% if product.available %}
                  <link itemprop="availability" href="http://schema.org/InStock" />
                  {% else %}
                  <link itemprop="availability" href="http://schema.org/OutOfStock" />
                  {% endif %}
                    {% assign variant = product.selected_or_first_available_variant %}
                    {% if product.compare_at_price > product.price %}
                    <span id="ProductPrice" class="product-price on-sale  money" itemprop="price">{{ variant.price | money }}</span>
                    <span id="ComparePrice" class="compare-at-price  money">{{ variant.compare_at_price | money }}</span>
                    {% else %}
                    <span id="ProductPrice" class="product-price  money" itemprop="price">{{ variant.price | money }}</span>
                    {% endif %}
                </div>
                
                {% assign hide_default_title = false %}
                {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
                  {% assign hide_default_title = true %}
                {% endif %}

                <div id="product-variants" style="display:none" class="{% if hide_default_title %} hidden{% endif %}">
                  <select id="product-select" name="id" class="form-control single-option-selector">
                  {% for variant in product.variants %}
                    <option {% if variant == product.selected_or_first_available_variant %} selected{% endif %} value="{{ variant.id }}">
                    {{ variant.title }} - {{ variant.price | money }}
                    </option>
                  {% endfor %}
                  </select>
                </div> 


                {% if product.available and product.variants.size > 1 %}
                  {% for option in product.options %}
                    {% include 'swatch' with option %}
                  {% endfor %}
                {% endif %}       

Appreciate if you can help me out. Thank you.

0 Likes
Highlighted
Shopify Expert
2684 67 816

Hi there,

The price is being overwritten by the currency conversion code. Looks like an error in the theme -- have you noticed also that if you change the currency while on the product page it does not persist through the variant selection?

You should contact the theme author first, there is a high chance they already have a fix for this in a newer vesion of the theme.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
New Member
2 0 0

Dear Tim,

I have contacted the theme author as you suggested but they no longer support or update the theme.However, they mentioned may be you or someone in Shopify will be able to help.

Thus I request you to kindly help me with this coding error. Thank you.

0 Likes
Highlighted
New Member
1 0 0

Hi folks, My product variant prices are not changing , but in cart its getting correct price, Please help me to fix this...

 

*product.liquid* file

--------------------------------------------------------

<div id="col-main" class="product-page {% if settings.product_layout == 'left' or product.handle == "product-with-left-slidebar" or settings.product_layout == 'right' or product.handle == "product-with-right-slidebar" %}col-xs-24 col-sm-18 no_full_width{% else %}col-xs-24 col-sm-24{% endif %} {% if settings.product_layout == 'left' or product.handle == "product-with-left-slidebar"%}have-left-slidebar{% endif %}">
  <div itemscope itemtype="http://schema.org/Product">
    <meta itemprop="url" content="{{ product.url }}" />

    <div id="product" class="content clearfix">
      <div class="row pro-slider">
           <div class="col-lg-12">
      {% unless settings.product_layout == 'left' or product.handle == "product-with-left-slidebar" or settings.product_layout == 'right' or product.handle == "product-with-right-slidebar" %}

      {% endunless %}
            {% comment %}
      <div id="product-image" class="product-image row {% if settings.product_layout == 'left' or product.handle == "product-with-left-slidebar" or settings.product_layout == 'right' or product.handle == "product-with-right-slidebar" %}no_full_width col-sm-12{% endif %}">
      {% unless settings.product_layout == 'left' or product.handle == "product-with-left-slidebar" or settings.product_layout == 'right' or product.handle == "product-with-right-slidebar" %}
        <div id="detail-left-column" class="hidden-xs left-coloum col-sm-6 col-sm-6 not-animated" data-animate="fadeInRight">
          <div id="gallery_main" class="product-image-thumb thumbs full_width {% if product.images.size < 4 %}fix-width{% endif %}">
            <ul class="slide-product-image">
              {% for image in product.images %}
              <li class="image">
                <a href="{{ image | product_img_url: '1024x1024' }}" class="cloud-zoom-gallery{% if forloop.index == 1 %} active{% endif %}">
                  <img src="{{ image | product_img_url: 'compact' }}" alt="{{ image.alt | escape }}" />
                </a>
              </li>
              {% endfor %}
            </ul>
          </div>
        </div>
      {% endunless %}
        <div class="image featured {% unless settings.product_layout == 'left' or product.handle == "product-with-left-slidebar" or settings.product_layout == 'right' or product.handle == "product-with-right-slidebar" %}col-smd-12 col-sm-12{% endunless %} not-animated" data-animate="fadeInUp">
          {% if product.images.size > 0 %}       
          {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %} 
          <img src="{{ featured_image | img_url: '1024x1024' }}" alt="{{ featured_image.alt | escape }}" />
          {% endif %}
        </div>
      {% if settings.product_layout == 'left' or product.handle == "product-with-left-slidebar" or settings.product_layout == 'right' or product.handle == "product-with-right-slidebar" %}
        <div id="gallery_main" class="product-image-thumb thumbs no_full_width {% if product.images.size < 4 %}fix-width{% endif %}">
          <ul class="slide-product-image">
            {% for image in product.images %}
            <li class="image">
              <a href="{{ image | product_img_url: '1024x1024' }}" class="cloud-zoom-gallery{% if forloop.index == 1 %} active{% endif %}">
                <img src="{{ image | product_img_url: 'compact' }}" alt="{{ image.alt | escape }}" />
              </a>
            </li>
            {% endfor %}
          </ul>
        </div>
      {% endif %}
      {% if settings.product_layout == 'full' %}
        <div id="gallery_main" class="visible-xs product-image-thumb thumbs mobile_full_width {% if product.images.size < 4 %}fix-width{% endif %}">
          <ul class="slide-product-image">
            {% for image in product.images %}
            <li class="image">
              <a href="{{ image | product_img_url: '1024x1024' }}" class="cloud-zoom-gallery{% if forloop.index == 1 %} active{% endif %}">
                <img src="{{ image | product_img_url: 'compact' }}" alt="{{ image.alt | escape }}" />
              </a>
            </li>
            {% endfor %}
          </ul>
        </div>
      {% endif %}

        {% if settings.share_button %}
        <div id="detail-right-column" class="right-coloum {% unless settings.product_layout == 'left' or product.handle == "product-with-left-slidebar" or settings.product_layout == 'right' or product.handle == "product-with-right-slidebar" %}col-sm-6{% endunless %} not-animated" data-animate="fadeInLeft">
          {{ settings.add_code_share }}
        </div>
        {% endif %}

      </div>
{% endcomment %}
      <div id="stx-gallery">
          {% for image in product.images %}
            <div class="storex-gallery" data-storex-image-id={{image.id}} data-storex-image-path={{image.src | img_url: 'icon'}}>
                <a href="{{ image | product_img_url: 'master' }}" title="{{ product.metafields.global.title_tag | escape }}">
                  <img  src="{{ image | product_img_url: '1024x1024' }}"
                        alt="{{ product.metafields.global.title_tag | escape }}"
                         />
                </a>
            </div>
          {% endfor %}
      </div>

      <div id="stx-carousel">
          {% for image in product.images %}
            <div class="storex-carousel" data-storex-image-id={{image.id}} data-storex-image-path={{image.src | img_url: 'icon'}}>
                <img src="{{ image | product_img_url: '1024x1024' }}" alt="{{ product.metafields.global.title_tag | escape }}" />
            </div>
          {% endfor %}
      </div>
      
      <script>
        document.addEventListener("DOMContentLoaded", function () {
          
          document.stxGalleryData = {
            gallery : {
              slidesToShow: 1,
              slidesToScroll: 1,
              arrows: false,
              fade: true,
              autoplay: false,
              autoplaySpeed: 3000,
              asNavFor: '#stx-carousel'
              },
            carousel : {
              slidesToShow: 6,
              slidesToScroll: 1,
              asNavFor: '#stx-gallery',
              dots: false,
              centerMode: true,
              focusOnSelect: true
            }
          };

          window.jQueryStx('#stx-gallery').slick(document.stxGalleryData.gallery);
          window.jQueryStx('#stx-carousel').slick(document.stxGalleryData.carousel);
                    
          /*http://www.jacklmoore.com/zoom/*/
          var zoomElements = document.querySelectorAll('.storex-gallery');
          for (var i = 0; i < zoomElements.length; i++) {
            window.jQueryStx(zoomElements[i]).zoom({url: zoomElements[i].dataset.storexZoomUrl});
          }
          
        });
      </script>
      </div>
      <div id="product-information" class="col-lg-12 product-information text-center {% if settings.product_layout == 'left' or product.handle == "product-with-left-slidebar" or settings.product_layout == 'right' or product.handle == "product-with-right-slidebar" %}no_full_width col-sm-12{% endif %}">
        {% if settings.product_layout == 'left' or product.handle == "product-with-left-slidebar" or settings.product_layout == 'right' or product.handle == "product-with-right-slidebar" %}
        <h1 id="page-title" class="text-center">
          <span itemprop="name">{{ product.title }}</span>
        </h1>
        {% endif %}
        <div id="product-header" class="clearfix">
          
          <div id="product-info-right">     
            <div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="group-variants">
              <h6>Buying Option</h6>
              <meta itemprop="priceCurrency" content="{{ shop.currency }}" />

              {% if product.available %}
              <link itemprop="availability" href="http://schema.org/InStock" />

              {% assign hide_default_title = false %}
              {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
              {% assign hide_default_title = true %}
              {% endif %} 

              <form action="/cart/add" method="post" class="variants" id="product-actions">
                <div id="product-actions-{{ product.id }}" class="options clearfix">

                  {% if settings.color_swatch %}
                  {% if product.available %}
                  {% for option in product.options %}
                  {% include 'swatch' with option %}
                  {% endfor %}
                  {% endif %}
                  {% endif %}

                  <div class="variants-wrapper clearfix{% if hide_default_title %} hide{% endif %}"> 
                    <select id="product-select-{{ product.id }}" name="id" style="display: none;">
                      {% for variant in product.variants %}
                      <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }}</option>
                      {% endfor %}
                    </select>
                  </div>         
                  <div class="quantity-wrapper clearfix">
                    <label class="wrapper-title">Qty</label>
                      <!---<input id="quantity" type="text" name="quantity" value="1" maxlength="5" size="5" class="item-quantity" />-->
                     {% assign numbers = "1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15" | split: ','%}
                      <select id="quantity" name="quantity" class="item-quantity col-lg-24">
                       {% for number in numbers %}
                       <option>{{number}}</option>
                        {% endfor %}
                      </select>
                  </div>
                    <div class="product-price" id="purchase" >
                        <div id="price" class="detail-price" itemprop="price">
                      {{ product.price | money }}
                    </div>
                  </div>

                  <div class="others-bottom clearfix">
                    <button id="add-to-cart" class="btn btn-1 add-to-cart" data-parent=".product-information" type="submit" name="add">Add to Cart</button>
                  </div>

                </div>
              </form>

              {% if settings.show_wish_list or settings.prduct_detail_email %}
              <div class="wls">

                {% if settings.show_wish_list %}
                {% if customer %}
                {% include 'wish-list' %}
                {% else %}
                <a class="wish-list" href="/account/login"><i class="fa fa-heart"></i> WISHLIST</a>
                {% endif %}
                {% endif %}

                {% if settings.show_wish_list and settings.prduct_detail_email %}
                <span>|</span>
                {% endif %}

                {% if settings.prduct_detail_email %}
                <a href="mailto:{{ settings.prduct_detail_email_address }}"><i class="fa fa-envelope"></i> {{ settings.prduct_detail_email_title }}</a>
                {% endif %}

              </div>
              {% endif %}

              {% else %}
              <link itemprop="availability" href="http://schema.org/OutOfStock" />
              <meta itemprop="price" content="{{ product.price | money }}" />

              <div id="product-actions" class="sold-out">
                <div id="purchase">
                  <p class="price">Sold out.</p>      
                </div>
              </div>      
              {% endif %}
            </div>
            <script type="text/javascript">

              // initialize multi selector for product
              $(window).load(function() {

                /* selectCallback */
                var selectOptionsCallback = function(variant, selector) {

                  if (variant) {
                    var form = jQuery('#' + selector.domIdPrefix).closest('form');
                    for (var i=0,length=variant.options.length; i<length; i++) {
                      var radioButton = form.find('.swatch[data-option-index="' + i + '"] :radio[value="' + variant.options[i] +'"]');
                      if (radioButton.size()) {
                        radioButton.get(0).checked = true;
                      }
                    }
                  }

                  if (variant && variant.featured_image) {
                      var newImage = variant.featured_image; // New image object.
                      var mainImageDomEl = jQuery('.featured img')[0]; // DOM element of main image we need to swap.
                      Shopify.Image.switchImage(newImage, mainImageDomEl, switchImage); // Define switchImage (the callback) in your theme's JavaScript file.
                    }

                  var add_to_cart = '#add-to-cart';
                  var $price = '#purchase-' + selector.product.id.toString() + ' .detail-price';
                  if (variant && 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('<span class="price">'+Shopify.formatMoney(variant.price, "{{shop.money_format}}")+'</span>');

                      {% if settings.show_multiple_currencies %}
                      /* Update currency */
                      currenciesCallbackSpecial('#product-information span.money');
                       {% endif %}
                       } else {
                         $($price).html('<del class="price_compare">' + Shopify.formatMoney(variant.compare_at_price, "{{shop.money_format}}") + '</del>' + '<span class="price_sale">'+Shopify.formatMoney(variant.price, "{{shop.money_format}}") + '</span>');

                         {% 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('<span class="unavailable">' + message + '</span>');
                         }
                       };

                       new Shopify.OptionSelectors("product-select-{{ product.id }}", { product: {{ product | json }}, onVariantSelected: selectOptionsCallback, enableHistoryState: true });

                       $('.single-option-selector').customStyle();

                       // 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('<label>{{ product.options.first }}</label>');
                        {% endif %}

                        // Auto-select first available variant on page load.
                        {% assign found_one_in_stock = false %}
                        {% for variant in product.variants %}
                        {% 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 %}
                         {% endfor %}
                         });
            </script>
              {% comment %} Tabs Panel{% endcomment %}
                {% if settings.enable_tabpanel %}

                <ul id="tabs_detail" class="tabs-panel-detail hidden-xs hidden-sm">
                  {% if settings.display_mspecs %}
                  <li class="first"><h6><a href="#pop-one" class="fancybox"><i class="fa fa-angle-right"></i> {{ settings.mspecs_title }}</a></h6></li>
                  {% endif %}
                  {% if settings.display_custom_tab %}
                  <li><h6><a href="#pop-two" class="fancybox"><i class="fa fa-angle-right"></i> {{ settings.custom_tab_title }}</a></h6></li>
                  {% endif %}
                  {% if settings.display_size_chart %}
                  <li><h6><a href="#pop-three" class="fancybox"><i class="fa fa-angle-right"></i> {{ settings.size_chart_title }}</a></h6></li>
                  {% endif %}
                  <li><h6><a href="#pop-four" class="fancybox"><i class="fa fa-angle-right"></i> Ingredients</a></h6></li>
                </ul>
                
                <div id="pop-one" style="display: none;">
                  <img src={{"mspecs_image.jpg" | asset_url }} alt="" />
                </div>
                <div id="pop-two" style="display: none;">
                  {{ settings.custom_tab_content }}
                </div>
                <div id="pop-three" style="display: none;">
                  <img src={{"size_chart_image.jpg" | asset_url }} alt="" />
                </div>
            {% assign instructions = product.metafields.instructions %}
            {% assign key = 'Dry' %}
             <div id="pop-four" style="display: none;">
                  <h5>Ingredients:</h5>
                  {{ instructions.Dry }}
                </div>
              {% endif %}
          </div>  
        </div>
      </div>  
      </div>
      <!----------------------------------------Slider end here---------------------->
      
      <div class="row"><div id="product-info-left" class="col-sm-24">
            <div class="description">
              <h3 class="general-title text-center"><span class="small-head">Product Descriptions</span></h3>
              {{ product.description }}
            </div>
            <div class="relative">
              <ul class="list-unstyled">
                {% if product.tags.size > 0 %}
                {% if collection == null or collection.handle == 'frontpage' or collection.handle == 'all' %}
                {% assign found_a_collection = false %}
                {% for c in product.collections %}
                {% if found_a_collection == false and c.handle != 'frontpage' and c.handle != 'all' and c.all_products_count > 1 %}
                {% assign found_a_collection = true %}
                {% assign collection = c %}
                {% endif %}
                {% endfor %}
                {% endif %}
                <li class="tags">
                  <h6>TAGS :</h6>
                  {% for tag in product.tags %}
                  <a href="/collections/{{ collection.handle }}/{{ tag | handle }}">
                    {% if forloop.index < product.tags.size %}
                    {{ tag | handle }}<span>,</span>
                    {% else %}
                    {{ tag | handle }}
                    {% endif %}
                  </a>
                  {% endfor %}
                </li>
                {% endif %}
              </ul>
            </div>
          </div></div>
      {% if settings.enable_rating_product %} <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>{% endif %}
    </div>
     
  </div>
 
  
  {% include 'related-products' %}
  
</div>

{% if settings.product_layout == 'left' or product.handle == "product-with-left-slidebar" %}
  <div class="left-slidebar col-xs-24 col-sm-6">
    {% include 'sidebar-prodcoll' %}
  </div>
{% endif %}

{% if settings.product_layout == 'right' or product.handle == "product-with-right-slidebar" %}
  <div class="right-slidebar col-xs-24 col-sm-6">
    {% include 'sidebar-prodcoll' %}
  </div>
{% endif %}

{% unless settings.product_layout == 'left' or product.handle == "product-with-left-slidebar" or settings.product_layout == 'right' or product.handle == "product-with-right-slidebar" %}
<script>
  $(window).scroll(function() {
    if($(window).innerWidth() >= 768 ){
    var scrollbar = jQuery('#detail-left-column');
    var scrolltop = jQuery(window).scrollTop();
    
    if(scrolltop > jQuery(scrollbar).parent().offset().top){
      if((scrolltop + jQuery(scrollbar).height()) <= (jQuery(scrollbar).parent().offset().top + jQuery(scrollbar).parent().height())){
        jQuery(scrollbar).animate({ top: (jQuery(window).scrollTop() - jQuery(scrollbar).parent().offset().top) + "px" }, { queue: false, easing: 'swing', duration: 700 });
      }
      else{
        var i = (jQuery(scrollbar).parent().height() - jQuery(scrollbar).height())+7+"px";
        jQuery(scrollbar).animate({ top: i }, { queue: false, easing: 'swing', duration: 1000 });
      }
    }
    else if(scrolltop < (jQuery(scrollbar).parent().offset().top)){
      jQuery(scrollbar).animate({ top: "0px" }, { queue: false, easing: 'swing', duration: 1000 });
    }
    var scrollbar2 = jQuery('#detail-right-column');
    if(scrolltop > jQuery(scrollbar2).parent().offset().top){
      if((scrolltop + jQuery(scrollbar2).height() -7) <= (jQuery(scrollbar2).parent().offset().top + jQuery(scrollbar2).parent().height())){
        jQuery(scrollbar2).animate({ top: (jQuery(window).scrollTop() - jQuery(scrollbar2).parent().offset().top) + "px" }, { queue: false, easing: 'swing', duration: 700 });
      }
      else{
        var i = (jQuery(scrollbar2).parent().height() - jQuery(scrollbar2).height())+"px";
        jQuery(scrollbar2).animate({ top: i }, { queue: false, easing: 'swing', duration: 1000 });
      }
    }
    else if(scrolltop < (jQuery(scrollbar2).parent().offset().top)){
      jQuery(scrollbar2).animate({ top: "0px" }, { queue: false, easing: 'swing', duration: 1000 });
    }
    }
  });
</script>
{% endunless %}

 

0 Likes
Highlighted
New Member
2 0 1

Hey Tim, I am having the same issue, could I contact you via mail?

0 Likes