Price not changing with selected variant

Highlighted
New Member
3 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-template.liquid source :

{{ 'jquery.elevateZoom.min.js' | asset_url | script_tag }}
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
 
{%- assign thumbnai_position = "none" -%}
{%- assign product_reviews = section.settings.display_product_reviews -%}
{%- assign product_vendor = section.settings.show_vendor -%}
{%- assign product_type = section.settings.show_product_type -%}
{%- assign product_ccountdown = section.settings.show_product_countdown -%}
{%- assign product_colorswatch = section.settings.use_color_swatch -%}
{%- assign product_subtotal = section.settings.show_price_subtotal -%}
{%- assign product_quantity = section.settings.show_quantity_selector -%}
{%- assign product_share = section.settings.show_share_buttons -%}
{%- assign product_tags = section.settings.show_tag -%}
{%- assign product_brand = section.settings.show_brand -%}
{%- assign product_category = section.settings.show_category -%}
{%- assign pt_item = section.settings.pt_item -%}
 
{% assign pp_grid = settings.pp_grid %}
{% case pp_grid %}
{% when '2' %}
{% assign g_col_left = 'col-lg-3 col-md-12 col-sm-12 col-12' %}
{% assign g_col_right = 'col-lg-9 col-md-12 col-sm-12 col-12' %}
 
{% when '3' %}
{% assign g_col_left = 'col-lg-4 col-md-12 col-sm-12 col-12' %}
{% assign g_col_right = 'col-lg-8 col-md-12 col-sm-12 col-12' %}
 
{% when '4' %}
{% assign g_col_left = 'col-lg-5 col-md-12 col-sm-12 col-12' %}
{% assign g_col_right = 'col-lg-7 col-md-12 col-sm-12 col-12' %}
 
{% when '5' %}
{% assign g_col_left = 'col-lg-6 col-md-12 col-sm-12 col-12' %}
{% assign g_col_right = 'col-lg-6 col-md-12 col-sm-12 col-12' %}
 
{% when '6' %}
{% assign g_col_left = 'col-lg-7 col-md-12 col-sm-12 col-12' %}
{% assign g_col_right = 'col-lg-5 col-md-12 col-sm-12 col-12' %}
 
{% when '7' %}
{% assign g_col_left = 'col-lg-8 col-md-12 col-sm-12 col-12' %}
{% assign g_col_right = 'col-lg-4 col-md-12 col-sm-12 col-12' %}
 
{% when '8' %}
 
{% assign g_col_left = 'col-lg-9 col-md-12 col-sm-12 col-12' %}
{% assign g_col_right = 'col-lg-3 col-md-12 col-sm-12 col-12' %}
 
{% else %}
{% assign g_col_left = 'col-lg-6 col-md-12 col-sm-12 col-12' %}
{% assign g_col_right = 'col-lg-6 col-md-12 col-sm-12 col-12' %}
{% endcase %}
 
{% assign swp_nav = false %}
{% assign pSize = product.images | size %}
{% assign pSize = pSize | times: 1 %}
{% assign pt_item = pt_item | times: 1 %}
 
{% if pSize > pt_item %}
{% assign swp_nav = true %}
{% endif %}
 
{% assign direction = "horizontal" %}
{% if section.settings.pt_position contains "left" or section.settings.pt_position contains "right" %}
{% assign direction = "vertical" %}
{% endif %}
 
{% assign current_variant = product.selected_or_first_available_variant %}
{% assign product_thumb_size = '110x110' %}
{% assign product_image_zoom_size = '1024x1024' %}
{% assign product_image_scale = '2' -%}
{% assign enable_zoom = section.settings.enable_zoom %}
{% assign vertical = section.settings.media_slide_layout %}
{% assign zoom = section.settings.zoom_mode %}
 
 
 
{% if settings.product_layout == '1col' %}
{% include 'product-layout-scroll'%}
{% else  %}
 
<div id="ProductSection-{{ section.id }}" class="product-template__containe product" itemscope itemtype="http://schema.org/Product">
  <meta itemprop="name" content="{{ product.title }}">
  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | img_url: '800x' }}">
 
  <div class="product-single {% if section.settings.enable_sevicer %}oneCol{% endif %}">
    <div class="row">
      <div class="{{ g_col_left }} {% if section.settings.pt_position == 'bottom' %} horizontal{% else %} vertical{% endif %}">
        <div class=" product-media thumbnais-{{ section.settings.pt_position }}">
          <div class="product-photo-container slider-for{% if section.settings.pt_position == 'bottom' %} horizontal{% else %} vertical{% endif %}">
 
            {% for image in product.images %}
            <div class="thumb">
              <a class="fancybox" rel="gallery1" href="{{ image.src | product_img_url: '1024x' }}" >
                <img id="product-featured-image-{{image.id}}" class="product-featured-img" src="{{ image | img_url: 'original' }}" alt="{{ image.alt | escape }}" data-zoom-image="{{ image.src | img_url: 'original' }}"/>
              </a>
            </div>
            {% endfor %}
 
          </div>
 
          <div class="slider-nav{% if section.settings.pt_position == 'bottom' %} horizontal{% else %} vertical{% endif %}" id="gallery_01">
            {% for image in product.images %}
            <div class="item">
              <a class ="thumb" href="javascript&colon;void(0)" data-image="{{ image.src | product_img_url: 'original' }}" data-zoom-image="{{ image.src | product_img_url: 'original' }}">
                <img src="{{ image.src | product_img_url: '100x100' }}" alt="{{ image.alt | escape }}">
              </a>
            </div>
            {% endfor %}
          </div> 
        </div>
      </div>
      <div class="{{ g_col_right }} product-single__detail grid__item {{ product_description_width }}">
        <div class="product-single__meta">
          <h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>
          {% if product_reviews %}       
          <div class="custom-reviews a-left hidden-xs d-flex justify-content-between">          
            <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
            {% include 'product-sold' %}
          </div>
          {% endif %}
 
          
          
          <div class="product-info">
            {% if product.available %}
            <p class="product-single__alb instock"><label>{{ 'products.product.availability' | t }}</label>: <i class="fa fa-check-square-o"></i> {{'products.product.available' | t }}</p>
            {% else %}
            <p class="product-single__alb outstock"><label>{{ 'products.product.availability' | t }}</label>: {{'products.product.unavailable' | t }}</p>
            {% endif %}
            {% if product_type %}
            <p class="product-single__type"><label>{{ 'products.product.type' | t }}</label>: {{ product.type }}</p>
            {% endif %}
            {% if product_vendor %}
            <p itemprop="brand" class="product-single__vendor"><label>{{ 'products.product.vendor' | t }}</label>: {{ product.vendor | link_to_vendor }}</p>
            {% endif %}
            
 
          </div>
           
 
           
          <div class="clearfix" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <meta itemprop="priceCurrency" content="{{ shop.currency }}">
            <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
          <div class="clearfix product-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <meta itemprop="priceCurrency" content="{{ shop.currency }}">
            <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
            <p class="price-box product-single__price-{{ section.id }}{% unless current_variant.available %} product-price--sold-out{% endunless %}">
              {% if current_variant.compare_at_price > current_variant.price %}
 
              <span class="special-price product-price__price product-price__price-{{ section.id }} product-price__sale product-price__sale--single">
                <span id="ProductPrice-{{ section.id }}"
                      itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
                  {{ current_variant.price | money }}
                </span>
              </span>
              <s class="old-price" id="ComparePrice-{{ section.id }}">{{ current_variant.compare_at_price | money }}</s>
              {% else %}
              <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
              <s id="ComparePrice-{{ section.id }}" class="hide">{{ current_variant.compare_at_price | money }}</s>
              <span class="product-price__price product-price__price-{{ section.id }} price">
                <span id="ProductPrice-{{ section.id }}" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
                  {{ current_variant.price | money }}
                </span>
              </span>
              {% endif %}
            </p>
          </div>
          <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <meta itemprop="priceCurrency" content="{{ shop.currency }}">
            <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
            
          
            
            <form action="/cart/add" method="post" enctype="multipart/form-data" class="product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %}" data-section="{{ section.id }}">
              <div id="product-variants">
                {% assign variantCount = product.variants | size %}
                {% if product.available %}
                {% if variantCount > 1 %}
                <div class="{% if section.settings.use_color_swatch %}d-none{% else %}row no-swatch{% endif%}">
                  <select id="product-selectors" name="id" class="hidden box-sellect" 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 }} - {{ variant.price | money }}</option>
                    {% endfor %}
                  </select>
                </div>
                {% if product_colorswatch %}
                {% for option in product.options %}
                {% include 'swatch' with option %}
                {% endfor %}
                {% endif %}
                {% else %}
                <input type="hidden" name="id" value="{{ product.variants[0].id }}" />
                {% endif %}
                {% endif %}
 
              </div>
              
              
              {% if product_subtotal %}
              <div class="total-price">
                <label>{{ 'cart.general.subtotal' | t }}: </label><span class="money">{{ product.price | money }}</span>
              </div>
              {% endif %}
              <div class="product-options-bottom">
                {% if product_quantity %}
                <div class="product-form__item product-form__item--quantity">
                  <label for="Quantity" class="quantity-selector">{{ 'products.product.quantity' | t }}:</label> 
                  <div class="form_qty">
                    <input type="text" id="qty" name="quantity" value="1" min="1" class="quantity-selector"> 
                    <div class="inline">
                      <div class="increase items" onclick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty )) result.value++; updatePricing(); return false;"></div>
                      <div class="reduced items" onclick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty ) &amp;&amp; qty > 1 ) result.value--; updatePricing(); return false;"></div>
                    </div>
                  </div>
                </div>
                {% endif %}
               
                <div class="product-form__item product-form__item--submit">
                  <button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
                    <span id="AddToCartText-{{ section.id }}">
                      {% unless current_variant.available %}
                      {{ 'products.product.sold_out' | t }}
                      {% else %}
                      {{ 'products.product.add_to_cart' | t }}
                      {% endunless %}
                    </span>
                  </button>
                </div>
              </div>
              
            {% form 'product', product, id: "AddToCart-{{ section.id }}" %}
              {{ form | payment_button }}
            {% endform %} 
              
            {% include 'product-wishlist' %}
            
              </form>
           
              
          </div>
          
          
          {% if section.settings.show_desc == 'short' %}
          {% if product.description != blank %}
          {% assign content = product.description %} 
          {% if content contains "[shortcode]" %}           
          {% assign str = content | split: "[/shortcode]" | first %}                    
          {% assign str = str | split: "[shortcode]" | last %}
          {% assign str = "[shortcode]" | append: str | append: "[/shortcode]" %}        
          {% assign content = content | remove: str %}
          {% endif %}                
          <div class="rte product-description short">
            <label  class="d-none">{{ 'products.product.overview' | t }}</label>
            {{ content | strip_html | truncatewords: 22}}
          </div>
          {% endif %}
 
          {% elsif section.settings.show_desc == 'full' %}
          {% if product.description != blank %}
          {% assign content = product.description %} 
          {% if content contains "[shortcode]" %}           
          {% assign str = content | split: "[/shortcode]" | first %}                    
          {% assign str = str | split: "[shortcode]" | last %}
          {% assign str = "[shortcode]" | append: str | append: "[/shortcode]" %}        
          {% assign content = content | remove: str %}
          {% endif %}                
          <div class="rte product-description full">
            <label  class="d-none">{{ 'products.product.overview' | t }}</label>
            {{ content }}
          </div>
          {% endif %}
          {% endif %}
 
          {% include 'questions-answers' %}
          
          <div class="product-wrap">
            {% if product_share %}
            <div class="wrap__social social_share_detail clearfix">
              <label class="">{{ 'general.social.share' | t }}:</label>
              <ul>
                <div class="addthis_inline_share_toolbox"></div>      
                <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-529be2200cc72db5"></script> 
              </ul>
            </div>
 
            {% endif %}
            {% if product_category %}
            <div class="wrap__category detail_category">
              <h2>Category: </h2>
              <ul class="category_content">
                {% unless product.collections == blank %}
                {% for c in product.collections limit: 2 %}
                <li>{{ c.title | link_to:c.url }}</li>{% unless forloop.last %}, {% endunless %}
                {% endfor %}
                {% endunless %}
              </ul>
            </div>
            {% endif %}
            {% if product_tags %}
            <div class="wrap__tag detail_tag">
              <h2>Tags:  </h2>
              <ul id="details" class="hlist">
 
                {% for tag in product.tags limit: 3 %}
                <li>{{ tag | link_to_tag: tag }}</li>{% unless forloop.last %}, {% endunless %}
                {% endfor %}
              </ul>
            </div>
            {% endif %}
            
            
            
            {% if product_brand %}
            <div class="wrap__brand">
              <label class="">Guaranteed safe checkout:</label>
              <div class="wrap__brand_content">
                {% if section.settings.product_brand != blank %}
                <img src="{{ section.settings.product_brand | img_url: "master" }}" alt="{{ section.settings.product_brand }}" />
                {% else %}
                <img class="img-responsive" alt="{{ shop.name }}" src="//placehold.it/280x25" />
                {% endif %}
              </div>
            </div>
            {% endif %}
            
            
          </div>
        </div>
        
        {% if section.settings.enable_sevicer %}
        <div class="product-single__services d-none d-lg-block">
          <div class="banner-policy">
            <div class="inner">
              <div class="policy policy1">
                <a title="90 days money back" href="#">
                  {% if section.settings.sv_icon !=blank %}
                  <span class="ico-policy">
                    <i class="fa fa-{{ section.settings.sv_icon }}"></i>
                  </span>
                  {% endif %}
                  {% if section.settings.sv_title != blank %}
                  <h3 class="des">{{ section.settings.sv_title }}</h3>
                  {% endif %}
                </a>
              </div>
              <div class="policy policy2">
                <a title="90 days money back" href="#">
                  {% if section.settings.sv_icon_2 !=blank %}
                  <span class="ico-policy">
                    <i class="fa fa-{{ section.settings.sv_icon_2 }}"></i>
                  </span>
                  {% endif %}
                  {% if section.settings.sv_title_2 != blank %}
                  <h3 class="des">{{ section.settings.sv_title_2 }}</h3>
                  {% endif %}
                </a>
              </div>
              <div class="policy policy3">
                <a title="90 days money back" href="#">
                  {% if section.settings.sv_icon_3 !=blank %}
                  <span class="ico-policy">
                    <i class="fa fa-{{ section.settings.sv_icon_3 }}"></i>
                  </span>
                  {% endif %}
                  {% if section.settings.sv_title_3 != blank %}
                  <h3 class="des">{{ section.settings.sv_title_3 }}</h3>
                  {% endif %}
                </a>
              </div>
              <div class="policy policy3">
                <a title="90 days money back" href="#">
                  {% if section.settings.sv_icon_4 !=blank %}
                  <span class="ico-policy">
                    <i class="fa fa-{{ section.settings.sv_icon_4 }}"></i>
                  </span>
                  {% endif %}
                  {% if section.settings.sv_title_4 != blank %}
                  <h3 class="des">{{ section.settings.sv_title_4 }}</h3>
                  {% endif %}
                </a>
              </div>
            </div>
          </div>
        </div>
        {% endif %}
      </div>
 
    </div>
    <div class="panel-group detail-bottom">
      {% if section.settings.product_tab_type == 'protab' %}
      <div class="tab-vertical">
        <ul class="nav nav-tabs font-ct">
          {% if section.settings.product_tab1_enable %}
          <li class="nav-item"><a class="nav-link active" href="#tabs1" data-toggle="tab">{{ section.settings.product_tab1_title }}</a></li>
          {% endif %}
          {% if section.settings.product_tab2_enable %}
          <li class="nav-item"><a class="nav-link" href="#tabs2" data-toggle="tab">{{ section.settings.product_tab2_title }}</a></li>
          {% endif %}
          {% if section.settings.product_tab3_enable %}
          <li class="nav-item"><a class="nav-link" href="#tabs3" data-toggle="tab">{{ section.settings.product_tab3_title }}</a></li>
          {% endif %}
          {% if section.settings.product_tab4_enable %}
          <li class="nav-item"><a class="nav-link" href="#tabs4" data-toggle="tab">{{ section.settings.product_tab4_title }}</a></li>
          {% endif %}
        </ul>
        <div class="tab-content">
          {% if section.settings.product_tab1_enable %}
          <div class="tab-pane active" id="tabs1">
            {% if product.description != blank %}
            {% assign content = product.description %} 
            {% if content contains "[shortcode]" %}           
            {% assign str = content | split: "[/shortcode]" | first %}                    
            {% assign str = str | split: "[shortcode]" | last %}
            {% assign str = "[shortcode]" | append: str | append: "[/shortcode]" %}        
            {% assign content = content | remove: str %}
            {% endif %}                
            <div class="rte description">
              <label  class="d-none">{{ 'products.product.overview' | t }}</label>
              {{ content }}
            </div>
            {% endif %}
          </div>
          {% endif %}
          {% if section.settings.product_tab2_enable %}
          <div class="tab-pane" id="tabs2">{{ section.settings.product_tab2_content }}</div>
          {% endif %}
          {% if section.settings.product_tab3_enable %}
          <div class="tab-pane" id="tabs3">
            {% if section.settings.custom_size_chart != blank %}
            <img src="{{ section.settings.custom_size_chart | img_url: "master" }}" alt="{{ section.settings.custom_size_chart_title }}" />
            {% else %}
            <div class="placeholder-bg">
              {% include 'placeholder-svg' %}
            </div>
            {% endif %}
          </div>
          {% endif %}
          {% if section.settings.product_tab4_enable %}
          <div class="tab-pane" id="tabs4">
            <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
          </div>
          {% endif %}
        </div>
      </div>
      {% elsif section.settings.product_tab_type == 'protab_hozizoltal' %}
      <div class="tab-hozizoltal">
        <ul class="nav nav-tabs font-ct">
          {% if section.settings.product_tab1_enable %}
          <li class="nav-item"><a class="nav-link active" href="#tabs1" data-toggle="tab">{{ section.settings.product_tab1_title }}</a></li>
          {% endif %}
          {% if section.settings.product_tab2_enable %}
          <li class="nav-item"><a class="nav-link" href="#tabs2" data-toggle="tab">{{ section.settings.product_tab2_title }}</a></li>
          {% endif %}
          {% if section.settings.product_tab3_enable %}
          <li class="nav-item"><a class="nav-link" href="#tabs3" data-toggle="tab">{{ section.settings.product_tab3_title }}</a></li>
          {% endif %}
          {% if section.settings.product_tab4_enable %}
          <li class="nav-item"><a class="nav-link" href="#tabs4" data-toggle="tab">{{ section.settings.product_tab4_title }}</a></li>
          {% endif %}
 
 
        </ul>
        <div class="tab-content">
          {% if section.settings.product_tab1_enable %}
          <div class="tab-pane active" id="tabs1">
            {% if product.description != blank %}
            {% assign content = product.description %} 
            {% if content contains "[shortcode]" %}           
            {% assign str = content | split: "[/shortcode]" | first %}                    
            {% assign str = str | split: "[shortcode]" | last %}
            {% assign str = "[shortcode]" | append: str | append: "[/shortcode]" %}        
            {% assign content = content | remove: str %}
            {% endif %}                
            <div class="rte description">
              <label  class="d-none">{{ 'products.product.overview' | t }}</label>
              {{ content }}
            </div>
            {% endif %}
          </div>
          {% endif %}
          {% if section.settings.product_tab2_enable %}
          <div class="tab-pane" id="tabs2">{{ section.settings.product_tab2_content }}</div>
          {% endif %}
          {% if section.settings.product_tab3_enable %}
          <div class="tab-pane" id="tabs3">
            {% if section.settings.custom_size_chart != blank %}
            <img src="{{ section.settings.custom_size_chart | img_url: "master" }}" alt="{{ section.settings.custom_size_chart_title }}" />
            {% else %}
            <div class="placeholder-bg">
              {% include 'placeholder-svg' %}
            </div>
            {% endif %}
          </div>
          {% endif %}
          {% if section.settings.product_tab4_enable %}
          <div class="tab-pane" id="tabs4">
            <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
          </div>
          {% endif %}
 
        </div>
      </div>
      {% elsif section.settings.product_tab_type == 'propanel' %}
      <div class="panel-group panel-accor" id="panel-accordion">
        {% if section.settings.product_tab1_enable %}
        <div class="panel">
          <div class="panel-heading" id="headingOne">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#panel-accordion" href="#tab1">{{ section.settings.product_tab1_title }}</a>
            </h4>
          </div>
          <div id="tab1" class="panel-collapse collapse">
            <div class="panel-body">
              {% if product.description != blank %}
              {% assign content = product.description %} 
              {% if content contains "[shortcode]" %}           
              {% assign str = content | split: "[/shortcode]" | first %}                    
              {% assign str = str | split: "[shortcode]" | last %}
              {% assign str = "[shortcode]" | append: str | append: "[/shortcode]" %}        
              {% assign content = content | remove: str %}
              {% endif %}                
              <div class="rte description">
                <label  class="d-none">{{ 'products.product.overview' | t }}</label>
                {{ content }}
              </div>
              {% endif %}
            </div>
          </div>
        </div>
        {% endif %}
        {% if section.settings.product_tab2_enable %}
        <div class="panel">
          <div class="panel-heading" id="headingTwo">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#panel-accordion" href="#tab2">{{ section.settings.product_tab2_title }}</a>
            </h4>
          </div>
          <div id="tab2" class="panel-collapse collapse">
            <div class="panel-body">{{ section.settings.product_tab2_content }}</div>
          </div>
        </div>
        {% endif %}
        {% if section.settings.product_tab3_enable %}
        <div class="panel">
          <div class="panel-heading" id="headingThree">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#panel-accordion" href="#tab3">{{ section.settings.product_tab3_title }}</a>
            </h4>
          </div>
          <div id="tab3" class="panel-collapse collapse">
            <div class="panel-body">
              {% if section.settings.custom_size_chart != blank %}
              <img src="{{ section.settings.custom_size_chart | img_url: "master" }}" alt="{{ section.settings.custom_size_chart_title }}" />
              {% else %}
              <div class="placeholder-backgrounds">
                {% include 'placeholder-svg' %}
              </div>
              {% endif %}
            </div>
          </div>
        </div>
        {% endif %}
        {% if section.settings.product_tab4_enable %}
        <div class="panel">
          <div class="panel-heading" id="headingFour">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#panel-accordion" href="#tab4">{{ section.settings.product_tab4_title }}</a>
            </h4>
          </div>
          <div id="tab4" class="panel-collapse collapse">
            <div class="panel-body">
              <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
            </div>
          </div>
        </div>
        {% endif %}
      </div>
      {% else %}
      <div class="reviewOnly">
        {% if settings.product_reviews_enable %}
        <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
        {% endif %}
      </div>
      {% endif %}
    </div>
    {% if section.settings.product_related_enable %} 
    {% if section.settings.related_products_type == "tags" %}
    {% include 'product-related-tag' %}
    {% else %}
    {% include 'product-related' %}
    {% endif %}
    {% endif %}
  </div>
</div>
<script>
  var slider = function() {
    if (!$('.slider-for').hasClass('slick-initialized') && !$('.slider-nav').hasClass('slick-initialized')) {
      $('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        nextArrow: '<div class="slick-next"><i class="fa fa-angle-right"></i></div>',
        prevArrow: '<div class="slick-prev"><i class="fa fa-angle-left"></i></div>',
        fade: true,
        accessibility:false,
        verticalSwiping: false,
        arrows : false,
        {% if settings.enable_rtl %}rtl: true,{% endif %}
        asNavFor: '.slider-nav'
      });
 
      $('.slider-nav').slick({
        infinite: true,
        slidesToShow: {{ pt_item }},
        {% if section.settings.pt_position == 'bottom' %}
        {% else %}
        vertical: true,
        {% endif %}
        slidesToScroll: 1,
        asNavFor: '.slider-for',
        verticalSwiping: false,
        dots: false,
        {% if settings.enable_rtl %}rtl: true,{% endif %}
        accessibility:false,
        focusOnSelect: true,
 
        {% if section.settings.pt_position == 'bottom' %}
        nextArrow: '<div class="slick-next"><i class="fa fa-angle-right"></i></div>',
        prevArrow: '<div class="slick-prev"><i class="fa fa-angle-left"></i></div>',
        {% else %}
 
        nextArrow: '<div class="slick-next"><i class="fa fa-angle-down"></i></div>',
        prevArrow: '<div class="slick-prev"><i class="fa fa-angle-up"></i></div>',
        {% endif %}
 
        responsive: [
        {
        breakpoint: 1200,
        settings: {
        slidesToShow: 5,
        slidesToScroll: 1
      }
                             },
                             {% if section.settings.pt_position == 'bottom' %}
                             {
                             breakpoint: 1024,
                             settings: {
                             slidesToShow: 5,
                             slidesToScroll: 1
                             }
                             },
 
                             {
                             breakpoint: 768,
                             settings: {
                             slidesToShow: 4,
                             slidesToScroll: 1,
                             dots: false
                             }
                             },
                             {
                             breakpoint: 321,
                             settings: {
                             slidesToShow: 3,
                             slidesToScroll: 2,
                             dots: false
                             }
                             },
                             {% else %}
                             {
                             breakpoint: 1224,
                             settings: {
                             slidesToShow:5,
                             slidesToScroll: 1
                             }
                             },
                             {
                             breakpoint: 1025,
                             settings: {
                             slidesToShow:3,
                             slidesToScroll: 1
                             }
                             },
 
                             {
                             breakpoint: 767,
                             settings: {
                             slidesToShow: 4,
                             slidesToScroll: 2,
                             dots: false
                             }
                             },
                             {
                             breakpoint: 421,
                             settings: {
                             slidesToShow: 2,
                             slidesToScroll: 2,
                             dots: false
                             }
                             },
                              {
                             breakpoint: 321,
                             settings: {
                             slidesToShow: 1,
                             slidesToScroll: 2,
                             dots: false
                             }
                             }
                             {% endif %}
                             ]
 
                             });
    }        
  };
 
  $(window).load(function() {
    slider();  
     if ($(window).width() >= 992 && $('.zoomContainer').length === 0) {
       $(".fancybox").fancybox();
        var zoomOptions = {
            cursor: "crosshair",
            galleryActiveClass: 'active',
            imageCrossfade: false,
            scrollZoom: false,
            
            onImageSwapComplete: function() {
            $(".zoomWrapper div").hide();
            },
            loadingIcon: window.loading_url
        };
       $(".slider-for .slick-current img").elevateZoom(zoomOptions);
 
        $(".slider-for ").on("beforeChange", function(event, slick, currentSlide, nextSlide) {
            $.removeData(currentSlide, "elevateZoom");
            $(".zoomContainer").remove();
        });
        $(".slider-for ").on("afterChange", function() {
           $(".slider-for  .slick-current img").elevateZoom(zoomOptions);
});
    }
  }); 
  
  var timer;
  var winW = $(window).width();
 
  $(window).on('resize.refreshSlick', function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
      var curW = $(window).width();
      if (curW >= 768 && winW < 768) {
        $('.slider-for').slick('unslick');    
        $('.slider-nav').slick('unslick');   
        $('.slider-nav').find('.slick-list').removeAttr('style');
        $('.slider-nav').find('.slick-track').removeAttr('style');
        $('.slider-nav').find('.slick-slide').removeAttr('style');
        $('.slider-nav').find('button.slick-arrow').remove();
 
        slider();
      }
      winW = curW;  
    }, 500);
  });
 
  $(".tab-vertical>ul>li").on('click', function () {
    $(".tab-vertical>ul>li").removeClass("active");
    $(this).addClass("active");
  });
 
</script>
<script>
  {% if product.available %}
  function updatePricing() {
    var regex = /([0-9]+[.|,][0-9]+[.|,][0-9]+)/g;
    var unitPriceTextMatch = jQuery('.product .product-price__price span.money').text().match(regex);
 
    if (!unitPriceTextMatch) {
      regex = /([0-9]+[.|,][0-9]+)/g;
      unitPriceTextMatch = jQuery('.product .product-price__price span.money').text().match(regex);     
    }
 
    if (unitPriceTextMatch) {
      var unitPriceText = unitPriceTextMatch[0];     
      var unitPrice = unitPriceText.replace(/[.|,]/g,'');
      var quantity = parseInt(jQuery('#qty').val());
      var totalPrice = unitPrice * quantity;
 
      var totalPriceText = Shopify.formatMoney(totalPrice, window.money_format);
      regex = /([0-9]+[.|,][0-9]+[.|,][0-9]+)/g;     
      if (!totalPriceText.match(regex)) {
        regex = /([0-9]+[.|,][0-9]+)/g;
      } 
      totalPriceText = totalPriceText.match(regex)[0];
 
      var regInput = new RegExp(unitPriceText, "g"); 
      var totalPriceHtml = jQuery('.product .product-price__price span.money').html().replace(regInput ,totalPriceText);
 
      jQuery('.product .total-price span.money').html(totalPriceHtml);     
    }
  }
  jQuery('#qty').on('change', updatePricing);
  {% endif %}
 
  var selectCallback = function(variant, selector) {
    var addToCart = jQuery('#AddToCart-product-template'),
        productPrice = jQuery('.product .product-price__price span.money'),
        comparePrice = jQuery('span#ComparePrice-product-template');
    if (variant) {
      if (variant.available) {
        addToCart.removeClass('disabled').removeAttr('disabled').val('Add to Cart');
      } else {
        addToCart.val(window.inventory_text.sold_out).addClass('disabled').attr('disabled', 'disabled');
      }
 
      productPrice.html(Shopify.formatMoney(variant.price, "{{ shop.money_format }}"));
 
                                            if (variant.compare_at_price > variant.price) {
                        comparePrice.html(Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}"));
                        }                                  
 
 
 
                        {% if section.settings.use_color_swatch %}
                        // BEGIN SWATCHES
                        var form = jQuery('#' + selector.domIdPrefix).parents('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;
        }
      }
      // END SWATCHES
      {% endif %}
 
      {% if product.available %}  
      updatePricing();
      {% endif %}
 
      {% if settings.show_multiple_currencies %}
      Currency.convertAll(window.shop_currency, jQuery('select[name=currencies] option:selected').val(), 'span.money', 'money_format');
      {% endif %}
    }
 
    /* VARIANT IMAGE */
    if (variant && variant.featured_image) {
      var originalImage = $("img[id|='product-featured-image']");
      var newImage = variant.featured_image;
      var element = originalImage[0];
      
      Shopify.Image.switchImage(newImage, element, function (newImageSizedSrc, newImage, element) {
//         $(element).data('zoom-image', newImageSizedSrc).elevateZoom({
//           gallery: 'slider-nav',
//           galleryActiveClass: 'active',
//         });
 
        jQuery('.slider-nav img').each(function() {
          var grandSize = jQuery(this).attr('src');
          grandSize = grandSize.replace('100x100','1024x1024');
          if (grandSize == newImageSizedSrc) {
            jQuery(this).closest('.item').trigger('click');                 
            return false;
          }
        });
      });
    }
 
  };
 
  jQuery(function($) {
    {% if product.available and product.variants.size > 1 %}
    new Shopify.OptionSelectors('product-selectors', {
      product: {{ product | json }},
      onVariantSelected: selectCallback, 
      enableHistoryState: true
    });   
 
    {% comment %}
    Use color swatch and linked options (copyright by @CarolineSchnapp)
    {% endcomment %}
    {% if section.settings.use_color_swatch and product.available and product.options.size > 1 %}
    Shopify.linkOptionSelectors({{ product | json }});
    {% endif %} 
 
    {% if section.settings.use_color_swatch != true %}
    jQuery('.single-option-selector').selectize();
    jQuery('.selectize-input input').attr("disabled","disabled");
    {% endif %}
 
    {% endif %}
    {% if product.options.size == 1 and product.options.first != 'Title' %}
    $('.selector-wrapper:eq(0)').prepend('<label>{{ product.options.first }}</label>');
    {% endif %}
    {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
     $('.selector-wrapper').hide();
    {% endif %}
 
    {% 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>
 
{% unless product == empty %}
<script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
</script>
{% endunless %}
{% endif %}
 
 
 
{% schema %}
{
  "name": "Product Detail",
  "class": "main-product",
  "settings": [
    {
      "type": "header",
      "content": "Product info"
    },
    {
      "type": "checkbox",
      "id": "display_product_reviews",
      "label": "Show Reviews",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "label": "Show vendor",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_product_type",
      "label": "Show Product Type",
      "default": true
    },
    {
      "type": "radio",
      "id": "show_desc",
      "label": "Short description",
      "options": [
        {
          "value": "no-show",
          "label": "No"
        },
        {
          "value": "short",
          "label": "Yes"
        },
        {
          "value": "full",
          "label": "Show Full Description"
        }
      ],
      "default": "short"
    },
    {
      "type": "checkbox",
      "id": "show_product_countdown",
      "label": "Show Product Countdown",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "use_color_swatch",
      "label": "Use Color Swatch?",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_price_subtotal",
      "label": "Show Price Subtotal",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_quantity_selector",
      "label": "Show quantity selector",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_share_buttons",
      "label": "Show social sharing buttons",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_category",
      "label": "Show Category Product",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_tag",
      "label": "Show Tags Product",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_brand",
      "label": "Show Image Brand",
      "default": true
    },
    {
      "type": "image_picker",
      "id": "product_brand",
      "label": "Upload Brand Image"
    },
    {
      "type": "header",
      "content": "Product thumbnais"
    },
    {
      "type": "select",
      "id": "pt_position",
      "label": "Position",
      "default": "bottom",
      "options": [
        {
          "value": "left",
          "label": "Vertical Left"
        },
        {
          "value": "right",
          "label": "Vertical Right"
        },
        {
          "value": "bottom",
          "label": "Horizontal Bottom"
        }
      ]
    },
    {
      "type": "text",
      "id": "pt_item",
      "label": "Item",
      "default": "4"
    },
    {
      "type": "header",
      "content": "Box Sevicer Detail",
      "info": "Used for Detail 1 Coluom"
    },
    {
      "type": "checkbox",
      "id": "enable_sevicer",
      "label": "Show Box Sevicer",
      "default": false
    },
    {
      "type": "text",
      "id": "sv_title",
      "label": "Title Box Sevicer 1",
      "placeholder": "Title"
    },
    {
      "type": "text",
      "id": "sv_icon",
      "label": "Icon name (Font Awesome)",
      "info": "[Use Font Awesome](http:\/\/fontawesome.io\/4.7.0\/icons\/)"
    },
    {
      "type": "text",
      "id": "sv_title_2",
      "label": "Title Box Sevicer 2",
      "placeholder": "Title"
    },
    {
      "type": "text",
      "id": "sv_icon_2",
      "label": "Icon name (Font Awesome)",
      "info": "[Use Font Awesome](http:\/\/fontawesome.io\/4.7.0\/icons\/)"
    },
    {
      "type": "text",
      "id": "sv_title_3",
      "label": "Title Box Sevicer 3",
      "placeholder": "Title"
    },
    {
      "type": "text",
      "id": "sv_icon_3",
      "label": "Icon name (Font Awesome)",
      "info": "[Use Font Awesome](http:\/\/fontawesome.io\/4.7.0\/icons\/)"
    },
    {
      "type": "text",
      "id": "sv_title_4",
      "label": "Title Box Sevicer 4",
      "placeholder": "Title"
    },
    {
      "type": "text",
      "id": "sv_icon_4",
      "label": "Icon name (Font Awesome)",
      "info": "[Use Font Awesome](http:\/\/fontawesome.io\/4.7.0\/icons\/)"
    },
    {
      "type": "header",
      "content": "Product More Info"
    },
{
      "type": "select",
      "id": "product_tab_type",
      "label": "Product more info type",
      "default": "protab_hozizoltal",
      "options": [
        {
          "value": "disable",
          "label": "Don't show"
        },
        {
          "value": "protab",
          "label": "Tab vertical"
        },
        {
          "value": "protab_hozizoltal",
          "label": "Tab hozizoltal"
        },
        {
          "value": "propanel",
          "label": "Tab accordion"
        }
      ]
    },
    {
      "type": "checkbox",
      "id": "product_tab1_enable",
      "label": "Display Tab Description?",
      "default": true
    },
    {
      "type": "text",
      "id": "product_tab1_title",
      "label": "Product Description Title",
      "default": "Product Description"
    },
    {
      "type": "checkbox",
      "id": "product_tab2_enable",
      "label": "Display Custom Tab?"
    },
    {
      "type": "text",
      "id": "product_tab2_title",
      "label": "Custom Tab Title",
      "default": "Shipping Returns"
    },
    {
      "type": "textarea",
      "id": "product_tab2_content",
      "label": "Custom Tab HTML Code"
    },
    {
      "type": "checkbox",
      "id": "product_tab3_enable",
      "label": "Display Size Chart?"
    },
    {
      "type": "text",
      "id": "product_tab3_title",
      "label": "Custom Size Chart Title",
      "default": "Size Chart"
    },
    {
      "type": "image_picker",
      "id": "custom_size_chart",
      "label": "Size Chart Image"
    },
    {
      "type": "checkbox",
      "id": "product_tab4_enable",
      "label": "Products Reviews",
      "default": true
    },
    {
      "type": "text",
      "id": "product_tab4_title",
      "label": "Reviews Title tab",
      "default": "Reviews"
    },
    {
      "type": "header",
      "content": "Related Products"
    },
    {
      "type": "checkbox",
      "id": "product_related_enable",
      "label": "Enable product related"
    },
    {
      "type": "text",
      "id": "product_related_title",
      "placeholder": "Title for nlock",
      "label": "Block title"
    },
    {
      "type": "radio",
      "id": "related_products_type",
      "label": "Type of related products",
      "options": [
        {
          "value": "tags",
          "label": "By Tags"
        },
        {
          "value": "collection",
          "label": "By Collection"
        }
      ],
      "default": "collection"
    },
    {
      "type": "text",
      "id": "product_related_limit",
      "placeholder": "Number. Ex: 6",
      "label": "Limit of Related Product"
    },
    {
      "type": "checkbox",
      "id": "navigation",
      "label": "Show navigation",
      "default": true
    },
    {
      "type": "text",
      "id": "margin-rl",
      "label": "Margin Item"
    },
    {
      "type": "select",
      "id": "column1",
      "label": "#Column 1",
      "default": "4",
      "info": "For Large desktops have screen > 1200px",
      "options":[
        {
          "value": "1",
          "label": "1"
        },
        {
          "value": "2",
          "label": "2"
        },
        {
          "value": "3",
          "label": "3"
        },
        {
          "value": "4",
          "label": "4"
        },
        {
          "value": "5",
          "label": "5"
        },
        {
          "value": "6",
          "label": "6"
        }
      ]
    },
    {
      "type": "select",
      "id": "column2",
      "label": "#Column 2",
      "default": "3",
      "info": "For Tablets have screen 991px to 1199px.",
      "options":[
        {
          "value": "1",
          "label": "1"
        },
        {
          "value": "2",
          "label": "2"
        },
        {
          "value": "3",
          "label": "3"
        },
        {
          "value": "4",
          "label": "4"
        },
        {
          "value": "5",
          "label": "5"
        }
      ]
    },
    {
      "type": "select",
      "id": "column3",
      "label": "#Column 3",
      "info": "For Tablets have screen 768px to 991px.",
      "default": "2",
      "options":[
        {
          "value": "1",
          "label": "1"
        },
        {
          "value": "2",
          "label": "2"
        },
        {
          "value": "3",
          "label": "3"
        },
        {
          "value": "4",
          "label": "4"
        },
        {
          "value": "5",
          "label": "5"
        }
      ]
    },
    {
      "type": "select",
      "id": "column4",
      "label": "#Column 4",
      "default": "2",
      "info": "For Smartphones landscape have screen 480px to 767px",
      "options":[
        {
          "value": "1",
          "label": "1"
        },
        {
          "value": "2",
          "label": "2"
        },
        {
          "value": "3",
          "label": "3"
        },
        {
          "value": "4",
          "label": "4"
        },
        {
          "value": "5",
          "label": "5"
        }
      ]
    },
    {
      "type": "select",
      "id": "column5",
      "label": "#Column 5",
      "default": "1",
      "info": "For Smartphones have screen 0px to 479px",
      "options":[
        {
          "value": "1",
          "label": "1"
        },
        {
          "value": "2",
          "label": "2"
        }
      ]
    }
 
  ]
}
{% endschema %}
 
0 Likes
Highlighted
Shopify Partner
479 59 75

@ramitha ,

this is a large code, which theme are you using. Certain themes have this as a known issue. Looking at your code there are too many scripts so a solution will require debugging from the backend to find the exact cause. You can, however, share your URL if someone wants to inspect what's obviously  going wrong

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution

Skype : lokendra.panwar1
0 Likes
Highlighted
New Member
3 0 0
Thanks for the reply Propero. This theme is bigsale v1.0.0 and in the demo
version of their theme, the issue hasn't emerged. However If you can find
me a solution, that would really kind of you. Link -
https://hidelux.com/collections/furniture/products/2020-long-bed-plush-soft-for-pets?variant=3242753...

0 Likes
Highlighted
Shopify Partner
479 59 75

try removing apps by hulkapps and check once

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution

Skype : lokendra.panwar1
0 Likes
Highlighted
New Member
3 0 0

Sure, I will try it and let you know. Thanks 

0 Likes