Price variant not updating price on product page

New Member
3 0 0

Hello,

On my product pages, the price isn't updating when I select a different variant of the product.

Can anyone help? If so, please let me know if you need any specific code.

Thanks!

Tom

0 Likes
Shopify Staff
Shopify Staff
138 14 34

Hey, there Tom.

My name is Sunny and I'm a Shopify Guru. I would be happy to help!

I looked through your site and I can see exactly what you mean. When going to any of your products and selecting different variants, the prices don't adjust. However, when adding an item to cart, it seems to display the appropriate pricing. As soon as I hit the back button from the cart page, the price appears on the product page. Here is a a video example of what I mean.

This leads me to believe that your variant prices are set up properly, but perhaps there is an app with access to your product info causing friction OR there have been code changes to your product page liquid that will either need to be reverted or adjusted. When there have been code changes, your theme allows you to revert it back to before making those changes. You can follow this link here to learn more about reverting your code for testing purposes. If you revert your code and the problem is fixed, we know the problem lies within the code. 

Another way to identify the source of the issue is to preview your shop using another theme. Head over to Online Store > Themes > and select "Customize" beside an unpublished theme. If things work there, we know the issue is within the theme's code or the injected details from an app.

I'd also suggest taking a look at these similar forums posts for insight and additional troubleshooting steps if you're comfortable with code:

- https://ecommerce.shopify.com/c/ecommerce-design/t/price-not-changing-with-selected-variant-432258
- https://ecommerce.shopify.com/c/ecommerce-design/t/price-doesn-t-change-with-product-variant-393193

When did you start to notice this issue? Has it always been this way? Are you able to confirm if you added any new apps or code around the time you first noticed your product prices stop updating? Any information would be helpful when investigating.

I look forward to hearing from you. Speak soon!

Sunny | Shopify Guru

Sunny | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
New Member
3 0 0

Hi Sunny,

Thanks for your reply, this has been really helpful so far.

I did have a Bold app installed, but this has since been removed. With your help, I previewed versions of the code before the app was installed and I actually have the same issue there, which means that the app installation doesn't seem to be the issue.

I then followed your advice and tested it against another theme and everything worked in a different theme, which leads me to the thought which you've suggested that it is an error in the theme code.

My 'product.liquid' code simply states: {% section 'static-product' %}

I have therefore looked through static-product.liquid but I'm not great at finding these errors. I have included my static-product.liquid code and 'handy.js' code, which I believe is the theme's Javascript in the hope you might be able to help further and point me to the error and how to fix this.

Would REALLY value your help!

Thanks!
Tom

{% capture added_to_cart_link %}
  {% include 'icon', id: 'checkmark' %}
  {{ 'product.added_to_cart_link_html' | t }}
{% endcapture %}

{% if section.settings.enable_menu_form %}
  {% assign enable_inline_form = false %}
{% else %}
  {% assign enable_inline_form = true %}
{% endif %}
<script
  type="application/json"
  data-section-type="static-product"
  data-section-id="{{ section.id }}"
  data-section-data>
  {
    "product": {{ product | json }},
    "selected_variant": {{ product.selected_variant | json }},
    "selected_or_first_available_variant": {{ product.selected_or_first_available_variant | json }},
    "money_format": {{ shop.money_format | json }},
    "form_is_inline": {{ enable_inline_form | json }},
    "use_history": true,
    "images_layout": "standard",
    "text": {
      "added_to_cart_link": {{ added_to_cart_link | json }},
      "product_available": {{ 'product.add_to_cart.available' | t | json }},
      "product_unavailable": {{ 'product.add_to_cart.unavailable' | t | json }}
    }
  }
</script>

{% if enable_inline_form %}
  <div class="product-alert">
    <div class="product-alert-content">
      <div class="product-alert-dismiss">{% include 'icon', id: 'close' %}</div>
      <div class="product-alert-message"></div>
    </div>
  </div>
{% endif %}

<div
  class="product-wrapper {% if product.images.size == 0 %}product-wrapper-no-images{% endif %}"
  data-product-wrapper
>
  {%
    include 'product-images',
    layout: 'standard'
  %}

  <section class="product-details product-details-relative" data-product-details>
    {% if enable_inline_form %}
      {% include 'breadcrumbs' %}
    {% endif %}

    {% if section.settings.show_product_vendor %}
      <h2 class="product-vendor">
        <a href="{{ product.vendor | url_for_vendor }}">{{ product.vendor }}</a>
      </h2>
    {% endif %}

    <h1 class="product-title">{{ product.title }}</h1>
    {% include 'product-price' %}

    {% include 'product-form-nojs' %}

    {% if enable_inline_form %}
      {%
        include 'product-form-inline',
        show_payment_button: section.settings.show_payment_button
      %}
    {% endif %}

    {% if section.settings.enable_social_sharing %}
      {% include 'share-buttons' %}
    {% endif %}

    <div class="product-rte rte">
      {{ product.description }}
    </div>
  </section>
</div>

{% if enable_inline_form == false %}
  {%-
    include 'product-menu',
    show_payment_button: section.settings.show_payment_button
  -%}
{% endif %}

{%- for block in section.blocks -%}
  {%- assign product_count = block.settings.product-count | times: 1 -%}

 {%- if collection.all_products_count > 1 -%}
    <section class="section-related-products" {{ block.shopify_attributes }}>
      <span class="related-products-title">{{ 'related_products.title' | t }}</span>
      {%- include 'product-highlights',
        product_item_style: block.settings.product_item_style,
        use_quickshop: block.settings.enable_product_quickshop,
        product_count: product_count,
        product_emphasize: block.settings.product_emphasize
      -%}
    </section>
  {%- endif -%}
{%- endfor -%}

{% schema %}
{
  "name": "Product pages",
  "class": "section-product",
  "settings": [
    {
      "type": "checkbox",
      "id": "enable_menu_form",
      "label": "Enable bottom menu",
      "default": true,
      "info": "Displays product options and breadcrumbs in a sticky bottom menu."
    },
    {
      "id": "show_product_vendor",
      "type": "checkbox",
      "label": "Show product vendor",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_payment_button",
      "label": "Show dynamic checkout button",
      "info": "Lets customers check out directly using a familiar payment method. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
      "default": false
    },
    {
      "type": "header",
      "content": "Sharing"
    },
    {
      "type": "checkbox",
      "id": "enable_social_sharing",
      "label": "Enable social sharing",
      "default": false
    }
  ],
  "blocks": [
    {
      "type": "related_products",
      "name": "Related products",
      "settings": [
        {
          "id": "product_item_style",
          "type": "select",
          "label": "Product aspect ratio",
          "info": "Using an uncropped setting will generate white space around the image to create a uniform grid without cropping your image. The background in the editor indicates the applied white space, but will not appear on your storefront.",
          "options": [
            { "group": "Uncropped", "value": "natural", "label": "Natural" },
            { "group": "Uncropped", "value": "small", "label": "Short (4:3)" },
            { "group": "Uncropped", "value": "medium", "label": "Square (1:1)" },
            { "group": "Uncropped", "value": "large", "label": "Tall (2:3)" },
            { "group": "Cropped", "value": "cropped-small", "label": "Short (4:3)" },
            { "group": "Cropped", "value": "cropped-medium", "label": "Square (1:1)" },
            { "group": "Cropped", "value": "cropped-large", "label": "Tall (2:3)" }
          ],
          "default": "natural"
        },
        {
          "id": "enable_product_quickshop",
          "type": "checkbox",
          "label": "Enable product quickshop",
          "default": false
        },
        {
          "id": "product-count",
          "type": "range",
          "label": "Products",
          "min": 1,
          "max": 5,
          "step": 1,
          "default": 5
        },
        {
          "id": "product_emphasize",
          "type": "checkbox",
          "label": "Emphasize product",
          "info": "Creates an alternate layout on larger screens",
          "default": true
        }
      ]
    }
  ],
  "max_blocks": 1,
  "default": {
    "blocks": [
      {
        "type": "related_products",
        "settings": {}
      }
    ]
  }
}

{% endschema %}

Handy.js:

{% capture added_to_cart_link %}
  {% include 'icon', id: 'checkmark' %}
  {{ 'product.added_to_cart_link_html' | t }}
{% endcapture %}

{% if section.settings.enable_menu_form %}
  {% assign enable_inline_form = false %}
{% else %}
  {% assign enable_inline_form = true %}
{% endif %}
<script
  type="application/json"
  data-section-type="static-product"
  data-section-id="{{ section.id }}"
  data-section-data>
  {
    "product": {{ product | json }},
    "selected_variant": {{ product.selected_variant | json }},
    "selected_or_first_available_variant": {{ product.selected_or_first_available_variant | json }},
    "money_format": {{ shop.money_format | json }},
    "form_is_inline": {{ enable_inline_form | json }},
    "use_history": true,
    "images_layout": "standard",
    "text": {
      "added_to_cart_link": {{ added_to_cart_link | json }},
      "product_available": {{ 'product.add_to_cart.available' | t | json }},
      "product_unavailable": {{ 'product.add_to_cart.unavailable' | t | json }}
    }
  }
</script>

{% if enable_inline_form %}
  <div class="product-alert">
    <div class="product-alert-content">
      <div class="product-alert-dismiss">{% include 'icon', id: 'close' %}</div>
      <div class="product-alert-message"></div>
    </div>
  </div>
{% endif %}

<div
  class="product-wrapper {% if product.images.size == 0 %}product-wrapper-no-images{% endif %}"
  data-product-wrapper
>
  {%
    include 'product-images',
    layout: 'standard'
  %}

  <section class="product-details product-details-relative" data-product-details>
    {% if enable_inline_form %}
      {% include 'breadcrumbs' %}
    {% endif %}

    {% if section.settings.show_product_vendor %}
      <h2 class="product-vendor">
        <a href="{{ product.vendor | url_for_vendor }}">{{ product.vendor }}</a>
      </h2>
    {% endif %}

    <h1 class="product-title">{{ product.title }}</h1>
    {% include 'product-price' %}

    {% include 'product-form-nojs' %}

    {% if enable_inline_form %}
      {%
        include 'product-form-inline',
        show_payment_button: section.settings.show_payment_button
      %}
    {% endif %}

    {% if section.settings.enable_social_sharing %}
      {% include 'share-buttons' %}
    {% endif %}

    <div class="product-rte rte">
      {{ product.description }}
    </div>
  </section>
</div>

{% if enable_inline_form == false %}
  {%-
    include 'product-menu',
    show_payment_button: section.settings.show_payment_button
  -%}
{% endif %}

{%- for block in section.blocks -%}
  {%- assign product_count = block.settings.product-count | times: 1 -%}

 {%- if collection.all_products_count > 1 -%}
    <section class="section-related-products" {{ block.shopify_attributes }}>
      <span class="related-products-title">{{ 'related_products.title' | t }}</span>
      {%- include 'product-highlights',
        product_item_style: block.settings.product_item_style,
        use_quickshop: block.settings.enable_product_quickshop,
        product_count: product_count,
        product_emphasize: block.settings.product_emphasize
      -%}
    </section>
  {%- endif -%}
{%- endfor -%}

{% schema %}
{
  "name": "Product pages",
  "class": "section-product",
  "settings": [
    {
      "type": "checkbox",
      "id": "enable_menu_form",
      "label": "Enable bottom menu",
      "default": true,
      "info": "Displays product options and breadcrumbs in a sticky bottom menu."
    },
    {
      "id": "show_product_vendor",
      "type": "checkbox",
      "label": "Show product vendor",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_payment_button",
      "label": "Show dynamic checkout button",
      "info": "Lets customers check out directly using a familiar payment method. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
      "default": false
    },
    {
      "type": "header",
      "content": "Sharing"
    },
    {
      "type": "checkbox",
      "id": "enable_social_sharing",
      "label": "Enable social sharing",
      "default": false
    }
  ],
  "blocks": [
    {
      "type": "related_products",
      "name": "Related products",
      "settings": [
        {
          "id": "product_item_style",
          "type": "select",
          "label": "Product aspect ratio",
          "info": "Using an uncropped setting will generate white space around the image to create a uniform grid without cropping your image. The background in the editor indicates the applied white space, but will not appear on your storefront.",
          "options": [
            { "group": "Uncropped", "value": "natural", "label": "Natural" },
            { "group": "Uncropped", "value": "small", "label": "Short (4:3)" },
            { "group": "Uncropped", "value": "medium", "label": "Square (1:1)" },
            { "group": "Uncropped", "value": "large", "label": "Tall (2:3)" },
            { "group": "Cropped", "value": "cropped-small", "label": "Short (4:3)" },
            { "group": "Cropped", "value": "cropped-medium", "label": "Square (1:1)" },
            { "group": "Cropped", "value": "cropped-large", "label": "Tall (2:3)" }
          ],
          "default": "natural"
        },
        {
          "id": "enable_product_quickshop",
          "type": "checkbox",
          "label": "Enable product quickshop",
          "default": false
        },
        {
          "id": "product-count",
          "type": "range",
          "label": "Products",
          "min": 1,
          "max": 5,
          "step": 1,
          "default": 5
        },
        {
          "id": "product_emphasize",
          "type": "checkbox",
          "label": "Emphasize product",
          "info": "Creates an alternate layout on larger screens",
          "default": true
        }
      ]
    }
  ],
  "max_blocks": 1,
  "default": {
    "blocks": [
      {
        "type": "related_products",
        "settings": {}
      }
    ]
  }
}

{% endschema %}

 

0 Likes
Shopify Expert
2686 67 681

Tommy, the important code is in the product-price.liquid Snippet.

Basically, the Javascript code (line 23909 of handy.js Asset) is trying to update element wich has data-variant-price attribute and your liquid code does not output this, you only have element with data-variant-compare-at-price.

You may try looking for unmodified copy of your theme (if your shop is not too old -- download the clean copy of your theme from the Theme store) and compare this file contents between the themes.

Bold options do change this code and you need to restore it back.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
New Member
3 0 0

Genius Tim, that's solved it! Thank you a million!

Best,

Tom

0 Likes
New Member
9 0 0

@tim 

Can you please help me with my website? The price is not updated when I change the variant. Here is a copy of my single-product.liquid, and the theme.js:

 

{% assign on_sale = false %}
{% if product.variants.first.compare_at_price > product.variants.first.price %}
{% assign on_sale = true %}
{% endif %}
 
{% assign sold_out = true %}
{% if product.available %}
{% assign sold_out = false %}
{% endif %}
 
{% assign variant = product.selected_or_first_available_variant %}
 
{% if product.available %}
  {% comment %} Bold:POv2 {% endcomment %}
  {% comment %}
    {% assign func = "Shopify.addItemFromForm('add-item-form', " | append: variant.id | append: ", 1)" %}
  {% endcomment %}
  {% assign func = "Shopify.addItem('add-item-form'," | append: variant.id | append: ", 1)" %}
{% endif %} 
 
 
 
<div class="product-details-area hm-3-padding ptb-130">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-6 col-md-12">
 
        <div class="product-details-img-content">
          <div class="product-details-tab mr-40">
            <div class="product-details-large tab-content">
 
              <div class="" >
                {% assign featured_image = current_variant.featured_image | default: product.featured_image %}
                <div class="" id="ProductPhoto" >
                  <a href="{{ featured_image | img_url: '1024x1024' }}">
                    <img class="product-zoom" src="{{ featured_image | img_url: '1024x1024' }}" data-zoom-image="{{ featured_image | img_url: 'master' }}" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg">
                  </a>
                </div>
              </div>
 
              <div class=" mt-12 product-dec-slider owl-carousel" id="ProductThumbs">
                {% for image in product.images %}
                <a href="{{ image.src | img_url: '1024x1024' }}" class="product-single__thumbnail" data-image="{{ image.src | img_url: 'master' }}" data-zoom-image="{{ image.src | img_url: 'master' }}">
                  <img src="{{ image.src | img_url: 'compact' }}" alt="small-image">
                </a>
                {% endfor %}
              </div>
 
            </div>
          </div>
        </div>
 
      </div>
 
      <div class="col-lg-6 col-md-12">
        <div class="product-details-content">
 
          <h2>{{ product.title }}</h2>
 
          <div class="product-rating spr-badge-caption-none">
            <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
          </div>
          {% comment %} Bold:POv2 {% endcomment %}
          <div class="bold_option_price_display product-price">
 
            {% if on_sale %}
            <span class="old">{{ product.variants.first.compare_at_price | money }} </span>
            <span>{{ product.variants.first.price | money }}</span>
            {% else %}
            <span>{{product.variants.first.price | money }} </span>
            {% endif %}
 
          </div>
  
  <br/>
  
          {% if section.settings.product_availabilty_enable %}
          <div class="sin__desc">
            <p>{{ section.settings.availability_title }}
              {% if product.variants.first.inventory_management == "shopify" and product.variants.first.inventory_quantity > 0 %}
              <span>{{ product.variants.first.inventory_quantity }}</span> {{ section.settings.in_stock_title }}
              {% elsif product.available %}
              {{ section.settings.in_stock_title }}
              {% else %}
              {{ section.settings.out_of_stock_title }}
              {% endif %}
            </p>
          </div>
          {% endif %}
 
 
          {% if product.description contains '[affiliate_link]' and product.available %}
 
          {% if product.variants.size > 1 %}
          <select name="id" id="productSelect" class="product-single__variants email s-email s-wid" style="display:none;">
            {% for variant in product.variants %}
            {% if variant.available %}
            <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" 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>
          {% endif %}
 
          <div class="quickview-plus-minus affilate-content">
 
            <div class="quickview-btn-cart">  
 
              {% if product.available %}
              {% assign affiliate_link_first = product.description | split:'[/affiliate_link]' | first %}
              {% assign affiliate_link_final = affiliate_link_first | split:'[affiliate_link]' | last %}
 
              <a class="btn-style cr-btn action-cart add_cart cart-item" href="{{ affiliate_link_final }}">
                <i class="ti-shopping-cart"></i>
                <i class="ti-settings rotateIn animated infinite"></i>
                <i class="ti-check"></i>
                <span>{{ section.settings.add_to_cart_title }}</span>
              </a>
 
              {% else %}
 
              <a class="active disabled-add-to-cart btn-style cr-btn action-cart add_cart cart-item" href="#">
                <span>
                  <i class="ti-shopping-cart"></i>
                </span>
                {{ section.settings.add_to_cart_title }}
              </a>
              {% endif %}
 
            </div>
            <div class="quickview-btn-wishlist">
              {% include 'wishlist-button-2' %}
            </div>
          </div>
 
          {% else %}
 
          <form action="/cart/add" method="post" enctype="multipart/form-data" id="add-item-form">
 
            {% if product.variants.size > 1 %}
            <div class="sin__desc align--left swatch-variant">
              <select name="id" id="productSelect" class="product-single__variants email s-email s-wid" style="display:none;">
                {% for variant in product.variants %}
                {% if variant.available %}
                <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" 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>                      
              {% if product.available and product.variants.size > 1 %}
              {% for option in product.options %}
              {% include 'swatch' with option %}
              {% endfor %}
              {% endif %}                    
              <script>
                jQuery(function() {
                  jQuery('.swatch :radio').change(function() {
                    var optionIndex = jQuery(this).closest('.swatch').attr('data-option-index');
                    var optionValue = jQuery(this).val();
                    jQuery(this)
                    .closest('form')
                    .find('.single-option-selector')
                    .eq(optionIndex)
                    .val(optionValue)
                    .trigger('change');
                  });
                });
              </script>
            </div>
            {% else %}
            <select name="id" id="productSelect" class="product-single__variants email s-email s-wid" style="display:none;">
              {% for variant in product.variants %}
              {% if variant.available %}
              <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" 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>
            {% endif %}
            
            {% comment %} Bold:POv2 {% endcomment %}
            {% comment %}  <div id="infiniteoptions-container"></div> {% endcomment %}
            <div class="bold_options" data-product-id="{{ product.id }}"></div>
            <div class="quickview-plus-minus">
              <div class="cart-plus-minus">
                <input type="text" value="1" name="quantity" class="cart-plus-minus-box" min="1">
              </div>
 
              <div class="quickview-btn-cart">   
 
                {% if product.available %}
                {% comment %} Bold:POv2 Changed from a to button type=submit {% endcomment %}
                {% comment %}
                  <a class="addtocart btn-style cr-btn action-cart add_cart cart-item" href="javascript&colon;void(0);" >
                    <i class="ti-shopping-cart"></i>
                    <i class="ti-settings rotateIn animated infinite"></i>
                    <i class="ti-check"></i>
                    <span>{{ section.settings.add_to_cart_title }}</span>
                  </a>            
                  // Bold:POv2 button type="submit" class="addtocart btn-style cr-btn action-cart add_cart cart-item" href="javascript&colon;void(0);" onclick="{{ func }}; return false;"
                {% endcomment %}                 
                <button type="submit" class="addtocart btn-style cr-btn action-cart add_cart cart-item" >
                  <i class="ti-shopping-cart"></i>
                  <i class="ti-settings rotateIn animated infinite"></i>
                  <i class="ti-check"></i>
                  <span>{{ section.settings.add_to_cart_title }}</span>
                </button>                   
                <script>
                  // Bold:POv2 jQuery('.addtocart').click(function(e) {
                  jQuery('.addtocart:not(.bold_hidden)').click(function(e) {       
                    e.preventDefault();
                    Shopify.addItemFromFormStart('add-item-form', {{ product.id }});
  });
                </script>
 
                {% else %}
 
                <a class="active disabled-add-to-cart btn-style cr-btn action-cart add_cart cart-item" href="#">
                  <span>
                    <i class="ti-shopping-cart"></i>
                  </span>
                  {{ section.settings.add_to_cart_title }}
                </a>
                {% endif %}
 
              </div>
              <div class="quickview-btn-wishlist">
                {% include 'wishlist-button-2' %}
              </div>
            </div>
 
            <div class="hulkapps-volumes"></div>
 
          </form>
 
 
          {% endif %}
 
          {% if section.settings.tags_enable %}
          <div class="product-categories">
 
            {% if section.settings.tags_title != '' %}
            <h5 class="pd-sub-title">{{ section.settings.tags_title }}</h5>
            {% endif %}
 
            <ul class="common-max-hcls">
 
              {% assign tags_list_limit = section.settings.tags_list_limit_hanlde %}
              {% for tag in collection.tags limit: tags_list_limit %}
              <li><a class="{% if current_tags contains tag %}active{% endif %}" href="/collections/all/{{ tag | handle }}">{{ tag }}{% unless forloop.last %},{% endunless %}</a></li>
              {% endfor %}
 
            </ul>
 
          </div>
          {% endif %}
 
 
          {% if section.settings.category_tag_enable and product.tags.size > 0 %}
          <div class="product-categories">
            {% if section.settings.tag_heding_title != '' %}
            <h5 class="pd-sub-title">{{ section.settings.tag_heding_title }}</h5>
            {% endif %}
            <ul>
              {% for tag in product.tags limit: 5 %}
              <li><a href="/collections/all/{{ tag | handle }}">{{ tag }}{% unless forloop.last %},{% endunless %}</a></li>
              {% endfor %}
            </ul>
          </div>
          {% endif %}
 
          {% if section.settings.product_share_enable %}
          <div class="product-share">
            {% if section.settings.product_share_title != '' %}
            <h5 class="pd-sub-title">{{ section.settings.product_share_title }}</h5>
            {% endif %}
            {% include 'product-share' %}
          </div>
          {% endif %}
 
 
        </div>
      </div>
 
    </div>
  </div>
</div>
 
<script>
  $(".product-zoom").elevateZoom({
    gallery: 'ProductThumbs',
    galleryActiveClass: "active",
    zoomType: "inner",
    cursor: "crosshair"
  });
 
  //pass the images to Fancybox
  $(".product-zoom").on("click", function(e) {
    var ez = $('.product-zoom').data('elevateZoom');
    $.fancybox(ez.getGalleryList());
    return false;
  });
</script>
 
<style>
  
 .cust-buttons {
    display: grid;
 }
 .cust-buttons span > label {
    margin-right: 25px;
 }
 .cust-buttons input[type="radio"] ,.cust-buttons input[type=checkbox]
 {
  vertical-align: middle;
 }
 .swatch-variant .swatch.clearfix.Shape {
    display: none;
 }
 .cust-buttons label.spb-productdescfont.spb-productdesctextcolor {
    font-weight: 500;
font-size: 16px;
 }
 .product-details-content .swatch .swatch-element label:hover {
    color: #f3a395;
 }
 .product-details-content .yes label {
    margin-right: 19px;
 }
 .product-details-content .swatch .swatch-element label {
    font-size: 15px;
 }
 .product-details-content .swatch .header::before {
    background-color: #9d9d9d00;
 }
 .product-details-content .swatch .header {
    color: #626262;
    font-weight: 500;
 }
 
</style>
 

(function($) {
    "use strict";
 
jQuery(document).ready(function(){
      
      
     /* jQuery MeanMenu */
    $('#mobile-menu-active').meanmenu({
        meanScreenWidth: '767',
        meanMenuContainer: '.mobile-menu-area .mobile-menu',
    });
      
      
      
 
      /* Ajax Cart */
      // Bold:POv2 $(".cart-item").on('click', function(){
      $('.cart-item:not(.bold_clone)').on('click', function(){
        $(this).addClass("loading add-item");
        setTimeout(function () {
          // Bold:POv2 $(".cart-item").removeClass("loading");
          $(".cart-item:not(.bold_hidden)").removeClass("loading");
        },1000);
        setTimeout(function () {
          // Bold:POv2 $(".cart-item").removeClass("add-item");
          $(".cart-item:not(.bold_hidden)").removeClass("add-item");
        },1800);
 
      });
    
    
    /*====== sidebarCart ======*/
    function sidebarCart() {
        var menuTrigger = $('button.sidebar-trigger'),
            endTrigger = $('button.op-sidebar-close'),
            container = $('.sidebar-cart'),
            wrapper = $('.wrapper');
        wrapper.prepend('<div class="body-overlay"></div>');
        menuTrigger.on('click', function() {
          console.log("hello");
            container.addClass('inside');
            wrapper.addClass('overlay-active');
        });
        endTrigger.on('click', function() {
            container.removeClass('inside');
            wrapper.removeClass('overlay-active');
        });
        $('.body-overlay').on('click', function() {
            container.removeClass('inside');
            wrapper.removeClass('overlay-active');
        });
    };
//     sidebarCart();
    
    
    /*====== sidebarSearch ======*/
    function sidebarSearch() {
        var searchTrigger = $('button.sidebar-trigger-search'),
            endTriggersearch = $('button.search-close'),
            container = $('.main-search-active');
        searchTrigger.on('click', function() {
            container.addClass('inside');
        });
        endTriggersearch.on('click', function() {
            container.removeClass('inside');
        });
    };
    sidebarSearch();
    
    
    /* slider active */
    $('.slider-active').owlCarousel({
        loop: true,
        nav: true,
        autoplay: false,
        autoplayTimeout: 5000,
        animateOut: 'fadeOut',
        animateIn: 'fadeIn',
        navText: ['<i class="ion-chevron-left"></i>', '<i class="ion-chevron-right"></i>'],
        item: 1,
        responsive: {
            0: {
                items: 1
            },
            768: {
                items: 1
            },
            1000: {
                items: 1
            }
        }
    })
    
    
    /* slider active */
    $('.new-collection-slider').owlCarousel({
        loop: true,
        nav: false,
        autoplay: true,
        autoplayTimeout: 5000,
        animateOut: 'fadeOut',
        animateIn: 'fadeIn',
        item: 1,
        responsive: {
            0: {
                items: 1
            },
            768: {
                items: 1
            },
            1000: {
                items: 1
            }
        }
    })
    
 
    
    /* collection-product active */
    $('.trending-product-active').owlCarousel({
        loop: true,
        nav: false,
        autoplay: true,
        autoplayTimeout: 5000,
        animateOut: 'fadeOut',
        animateIn: 'fadeIn',
        item: 4,
        margin: 20,
        responsive: {
            0: {
                items: 1
            },
            768: {
                items: 2
            },
            1000: {
                items: 3
            }
        }
    })
    
    
    /* testimonial active */
    $('.testimonial-active').owlCarousel({
        loop: true,
        autoplay: false,
        autoplayTimeout: 5000,
        navText: ['<i class="ti-angle-left"></i>', '<i class="ti-angle-right"></i>'],
        nav: true,
        item: 1,
        responsive: {
            0: {
                items: 1
            },
            768: {
                items: 1
            },
            1000: {
                items: 1
            }
        }
    })
    
    
    /* product-dec-slider active */
    $('.product-dec-slider').owlCarousel({
        loop: true,
        autoplay: false,
        autoplayTimeout: 5000,
        navText: ['<i class="ti-angle-left"></i>', '<i class="ti-angle-right"></i>'],
        nav: true,
        item: 4,
        margin: 12,
        responsive: {
            0: {
                items: 2
            },
            768: {
                items: 4
            },
            1000: {
                items: 4
            }
        }
    })
 
    
    /*---------------------
    countdown
  --------------------- */
    $('[data-countdown]').each(function() {
        var $this = $(this),
            finalDate = $(this).data('countdown');
        $this.countdown(finalDate, function(event) {
            $this.html(event.strftime('<span class="cdown day">%-D <p>Days</p></span> <span class="cdown hour">%-H <p>Hour</p></span> <span class="cdown minutes">%M <p>Min</p></span class="cdown second"> <span>%S <p>Sec</p></span>'));
        });
    });
    
    
    /*------ Wow Active ----*/
    new WOW().init();
    
    
    /*----------------------------
    Cart Plus Minus Button
    ------------------------------ */
var CartPlusMinus = $('.cart-plus-minus');
 
    CartPlusMinus.prepend('<div class="dec qtybutton">-</div>');
    CartPlusMinus.append('<div class="inc qtybutton">+</div>');
    $('.qtybutton').on('click', function() {
        var $button = $(this);
        var oldValue = $button.parent().find('input').val();
        if ($button.text() === "+") {
            var newVal = parseFloat(oldValue) + 1;
        } else {
            // Don't allow decrementing below zero
            if (oldValue > 0) {
                var newVal = parseFloat(oldValue) - 1;
            } else {
                newVal = 1;
            }
        }
        $button.parent().find('input').val(newVal);
    });
    
    
    /*--
    Menu Stick
    -----------------------------------*/
    var header = $('.transparent-bar');
    var win = $(window);
    
    win.on('scroll', function() {
        var scroll = win.scrollTop();
        if (scroll < 200) {
            header.removeClass('stick');
        } else {
            header.addClass('stick');
        }
    });
    
    
    /* Button Effect */
    function buttonEffect() {
        $('<b></b>').appendTo('.cr-btn');
        $('.cr-btn')
            .on('mouseenter', function(e) {
                var parentOffset = $(this).offset(),
                    relX = e.pageX - parentOffset.left,
                    relY = e.pageY - parentOffset.top;
                $(this).find('b').css({
                    top: relY,
                    left: relX
                });
            })
            .on('mouseout', function(e) {
                var parentOffset = $(this).offset(),
                    relX = e.pageX - parentOffset.left,
                    relY = e.pageY - parentOffset.top;
                $(this).find('b').css({
                    top: relY,
                    left: relX
                });
            });
        $('[href="#"]').on('click', function() {
            return true;
        });
    }
    buttonEffect();
    
    
    /* sidebarmenu */
    var CreativeMenu = $('.sidebarmenu-wrapper');
    $('.menu-icon').on('click', function() {
        CreativeMenu.css('left', '0').addClass('animated Toggle');
    })
    $('.menu-close').on('click', function() {
        CreativeMenu.css('left', '-420px').removeClass('animated Toggle');
    })
    
    
    /* Sidemenu Dropdown */
    function sidemenuDropdown() {
        var $this = $('.sidebarmenu-wrapper');
        $this.find('nav.menu .cr-dropdown')
            .find('ul').slideUp();
        $this.find('nav.menu li.cr-dropdown > a, nav.menu li.cr-sub-dropdown > a').on('click', function(e) {
            e.preventDefault();
            $(this).next().slideToggle();
        });
    }
    sidemenuDropdown();
    
    
    /*---------------------
    chosen
    --------------------- */
    $('.orderby').chosen({
        disable_search: true,
        width: 'auto'
    });
    
    
    /*---------------------
    shop grid list
    --------------------- */
    $('.view-mode li a').on('click', function() {
        var $proStyle = $(this).data('view');
        $('.view-mode li').removeClass('active');
        $(this).parent('li').addClass('active');
        $('.product-view').removeClass('product-grid product-list').addClass($proStyle);
    })
    
    
    /*-- Price Range --*/
var PriceRange = $('#price-range');
var PriceAmount = $('.price-amount');
 
    PriceRange.slider({
        range: true,
        min: 0,
        max: 700,
        values: [70, 500],
        slide: function(event, ui) {
            PriceAmount.val('$' + ui.values[0] + ' - $' + ui.values[1]);
        }
    });
    PriceAmount.val('$' + PriceRange.slider('values', 0) +
        ' - $' + PriceRange.slider('values', 1));
    $('.product-filter-toggle').on('click', function() {
        $('.product-filter-wrapper').slideToggle();
    })
    
    
    // Instantiate EasyZoom instances
    var $easyzoom = $('.easyzoom').easyZoom();
    
    
    /*---------------------
    sidebar sticky
    --------------------- */
    $('.sidebar-active').stickySidebar({
        topSpacing: 80,
        bottomSpacing: 30,
        minWidth: 991,
    });
    
    
    /*--- showlogin toggle function ----*/
    $('#showlogin').on('click', function() {
        $('#checkout-login').slideToggle(900);
    });
    
    
    /*--- showlogin toggle function ----*/
    $('#showcoupon').on('click', function() {
        $('#checkout_coupon').slideToggle(900);
    });
    
    
    /*--- showlogin toggle function ----*/
    $('#ship-box').on('click', function() {
        $('#ship-box-info').slideToggle(1000);
    })
    
    
    /* isotop active */
    // filter items on button click
    $('.blog-area').imagesLoaded(function() {
        $('.portfolio-menu-active').on('click', 'button', function() {
            var filterValue = $(this).attr('data-filter');
            $grid.isotope({
                filter: filterValue
            });
        });
        // init Isotope
        var $grid = $('.blog-grid').isotope({
            itemSelector: '.blog-grid-item',
            percentPosition: true,
            masonry: {
                // use outer width of grid-sizer for columnWidth
                columnWidth: '.blog-grid-item',
            }
        });
    });
    
    
    /* slider active */
    $('.blog-gallery-slider').owlCarousel({
        loop: true,
        nav: true,
        autoplay: true,
        autoplayTimeout: 5000,
        animateOut: 'fadeOut',
        animateIn: 'fadeIn',
        navText: ['<i class="ion-chevron-left"></i>', '<i class="ion-chevron-right"></i>'],
        item: 1,
        responsive: {
            0: {
                items: 1
            },
            768: {
                items: 1
            },
            1000: {
                items: 1
            }
        }
    })
    
    
    /*--------------------------
    tab active
    ---------------------------- */
var ProductDetailsSmall = $('.product-details-small a');
 
    ProductDetailsSmall.on('click', function(e) {
        e.preventDefault();
        
        var $href = $(this).attr('href');
        
        ProductDetailsSmall.removeClass('active');
        $(this).addClass('active');
        
        $('.product-details-large .tab-pane').removeClass('active');
        $('.product-details-large ' + $href).addClass('active');
    })
    
    
    /*--------------------------
     ScrollUp
    ---------------------------- */
    $.scrollUp({
        scrollText: '<i class="ion-arrow-up-c"></i>',
        easingType: 'linear',
        scrollSpeed: 900,
        animation: 'fade'
    }); 
      
      
      /* Ajax Wishlist */
    $(".action--wishlist").on('click', function(){
      $(this).addClass("loading-wishlist add-wishlist");
      setTimeout(function () {
        $(".action--wishlist").removeClass("loading-wishlist");
      },1000);
      setTimeout(function () {
        $(".add-wishlist").removeClass("add-wishlist");
      },1500);
 
    });
      
      
      
      
      
      
      
      
      
      
    });
    
  
   
 
 
  
  
})(jQuery);
 
 
 
 
0 Likes