Price variant not updating price on product page

Highlighted
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
Highlighted
Shopify Staff
Shopify Staff
138 14 45

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
Highlighted
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
Highlighted
Shopify Expert
2684 67 818

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!
I am away till Feb-15.
0 Likes
Highlighted
New Member
3 0 0

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

Best,

Tom

0 Likes
Highlighted
New Member
10 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
Highlighted
New Member
1 0 0

Same problem...

And these pages of code are making me so depressed! Do I really have to examine the code myself to fix problems on a theme I paid for yesterday? Shopify... what the heck? I literally bought this theme yesterday and the variant selections don't refresh the price, the quantity selector doesn't work (I have checked that show quantity selector is on, and it is), and the whole thing feels very glitchy. Does my $180 not come with some assurance that the program will work right?

0 Likes
Highlighted
New Member
4 0 0

Hi Grace,

 

Fairly new here, but we have also run to a similar issue. We found out after some poking around that if a product doesn't have an image added, it seems to behave a bit wonky. We confirmed during import; and when also confirmed by simply removing all images from a product, pricing (and inventory) doesn't update, then works when we added the image back.

 

Not sure if you have the exact situation but hope this helps.

0 Likes
Highlighted
New Member
1 0 0

I m having the same problem. 

{% assign add_to_cart = {{ 'products.product.add_to_cart' | t }} %}
{% assign sold_out = {{ 'products.product.sold_out' | t }} %}
{% assign unavailable = {{ 'products.product.unavailable' | t }} %}

{% include 'breadcrumbs' %}

<div class="{{ settings.theme_layout_type }}">
  <div class="row">
    <div id="main" role="main" class="col-sm-12">

      <div class="row">
        <div id="product-page" class="product" itemscope itemtype="http://schema.org/Product">
          <meta itemprop="url" content="{{ shop.url }}{{ product.url }}" />
          <meta itemprop="image" content="{{ product | img_url: 'grande' }}" />
          
          <form id="AddToCartForm" action="/cart/add" method="post" enctype="multipart/form-data" >

            <div class="product-photos col-sm-8 col-md-9 hidden-xs">

              <div class="row">
              {% if product.images.size == 0 %}
                <div class="product-photo-container col-sm-12">
                  <img id="ProductPhotoImg" src="{{ '' | img_url: 'grande' }}" data-image="{{ '' | img_url: '2048x2048' }}" data-image-large="{{ featured_image | img_url: '2048x2048' }}" alt="" class="img-responsive" />
                </div>
              {% else %}

                {% if product.images.size > 1 %}
                <div class="product-photo-thumbs-wrap col-sm-2">
                  <div class="product-thumbs-carousel">
                    <ul class="product-photo-thumbs">
                      {% for image in product.images %}
                      <li class="product-photo-thumb">
                        <img src="{{ image | img_url: 'compact' }}" alt="{{ image.alt | escape }}" class="img-responsive" data-image="{{ image | img_url: 'grande' }}" data-image-large="{{ image | img_url: '2048x2048' }}" />
                      </li>
                      {% endfor %}
                    </ul>
                  </div>
                  
                  <a class="sqrlcarousel-next sqrlcarousel-control" href="#"><i class="fa fa-angle-down"></i>
                  <a class="sqrlcarousel-prev sqrlcarousel-control" href="#"><i class="fa fa-angle-up"></i></a>
                </div>
                {% endif %}

                {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image  %}          
                <div class="product-photo-container col-sm-10 ">
                  <img class="ProductPhotoImg" src="{{ featured_image | img_url: 'grande' }}" data-image-large="{{ featured_image | img_url: '2048x2048' }}" alt="{{ featured_image.alt | escape }}"  class="img-responsive" />
                </div>
              {% endif %}

              </div>
            </div>

            <div id="mobile-product-photos" class="col-xs-12">
              {% if product.images.size == 0 %}
                <div class="mobile-product-photo-container">
                  <img data-image="{{ '' | img_url: '2048x2048' }}" src="{{ '' | img_url: 'grande' }}" alt="" class="ProductPhotoImg img-responsive" />
                </div>
              {% else %}
                {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}          
                <div class="mobile-product-photo-container">
                  {% for img in product.images %}
                    <div><img class="ProductPhotoImg img-responsive owl-lazy" data-src="{{ img | img_url: 'large' }}" alt="{{ product.title | escape }}" /></div>
                  {% endfor %}
                </div>
              {% endif %}
            </div>

            <!-- .product-photos -->
            
            <div class="col-sm-4 col-md-3">
              <div class="product-details">
                {% if collection %}
                  {% if collection.previous_product or collection.next_product %}
                  <div class="product-navigation">     
                  {% if collection.previous_product %}
                    {% capture prev_url %}{{ collection.previous_product}}#content{% endcapture %}
                    <span class="left">{{ '<i class="fa fa-angle-left"></i>' | link_to: prev_url }}</span>
                  {% endif %}
                  {% if collection.next_product %}
                    {% capture next_url %}{{ collection.next_product}}#content{% endcapture %}
                    <span class="right">{{ '<i class="fa fa-angle-right"></i>' | link_to: next_url }}</span>
                  {% endif %}
                  </div>
                  {% endif %}
                {% endif %}

                <h1 itemprop="name" class="product-name">{{ product.title }}</h1>
                
                {% assign product_vendor_handle = product.vendor | handle %}
                {% comment %}
                Do we have a collection that has the same name as our product vendor name?
                If we do, let's have the vendor link point to it.
                If not, we will point to the automatic vendor collection.
                {% endcomment %}
                {% if collections[product_vendor_handle].handle == product_vendor_handle %}
                  {% assign vendor_url = collections[product_vendor_handle].url %}
                {% else %}
                  {% assign vendor_url = product.vendor | url_for_vendor %}
                {% endif %}
                <h2 itemprop="brand" class="brand">{{ product.vendor | link_to: vendor_url }}</h2>
                
                <div id="product-price-wrap" itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="delta">
                  <meta itemprop="priceCurrency" content="{{ shop.currency }}" />
                  {% if product.available %}
                  <link itemprop="availability" href="http://schema.org/InStock" />
                  {% else %}
                  <link itemprop="availability" href="http://schema.org/OutOfStock" />
                  {% endif %}
                    {% assign variant = product.selected_or_first_available_variant %}
                    {% if product.compare_at_price > product.price %}
                    <span id="ProductPrice" class="product-price on-sale  money" itemprop="price">{{ variant.price | money }}</span>
                    <span id="ComparePrice" class="compare-at-price  money">{{ variant.compare_at_price | money }}</span>
                    {% else %}
                    <span id="ProductPrice" class="product-price  money" itemprop="price">{{ variant.price | money }}</span>
                    {% endif %}
                </div>
                
                {% assign hide_default_title = false %}
                {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
                  {% assign hide_default_title = true %}
                {% endif %}

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


                {% if product.available and product.variants.size > 1 %}
                  {% for option in product.options %}
                    {% include 'swatch' with option %}
                  {% endfor %}
                {% endif %}       
                       
                <div id="backorder" class="hidden">
                  <p>{{ '%s is back-ordered. We will ship it separately in 10 to 15 days.' | replace: '%s', '<span id="selected-variant"></span>' }}</p>
                </div>

                <div id="quantity-section">
                  <label for="Quantity" class="quantity-selector swatch-title">{{ 'products.product.quantity' | t }}:</label>
                  <div class="row">
                    <div class="col-lg-6">
                      <div class="input-group quantity-group">
                        <span class="input-group-btn">
                          <button class="btn btn-minus" type="button">-</button>
                        </span>

                        <input type="text" id="Quantity" name="quantity" value="1" min="1" class="form-control quantity-selector quantity-box" placeholder="Qty.">

                        <span class="input-group-btn">
                          <button class="btn  btn-plus" type="button">+</button>
                        </span>
                      </div><!-- /input-group -->
                    </div><!-- /.col-lg-6 -->
                  </div><!-- /.row -->
                </div>

                <div id="product-add">
                  <button name="add" id="AddToCart" class="btn btn-default btn-large"> <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span></button>
                </div>
<div id="paypal-button-container"></div>
<script src="https://www.paypal.com/sdk/js?client-id=sb&currency=USD" data-sdk-integration-source="button-factory"></script>
<script>
  paypal.Buttons({
      style: {
          shape: 'rect',
          color: 'gold',
          layout: 'vertical',
          label: 'paypal',
          
      },
      createOrder: function(data, actions) {
          return actions.order.create({
              purchase_units: [{
                  amount: {
                      value: '1'
                  }
              }]
          });
      },
      onApprove: function(data, actions) {
          return actions.order.capture().then(function(details) {
              alert('Transaction completed by ' + details.payer.name.given_name + '!');
          });
      }
  }).render('#paypal-button-container');
</script>
                <ul class="guarantee">
                  {{ settings.below_add_to_cart }}
                </ul>
                
              </div><!-- .product-details -->
            </div>

          </form>
          <div class="clearfix"></div>
        </div>
      </div>
 
      <div class="row">
        <ul class="product-social-icons col-sm-12">

          {% if settings.share_mail %}
          <li><a target="_blank" href="mailto:?to=&body={{ shop.url }}{{ product.url }}&amp;subject=Chekout this page" class="mailtofriend"><i class="fa fa-envelope-o "></i> MAIL TO A FRIEND</a></li>
          {% endif %}

          {% if settings.share_twitter %}
          <li><a target="_blank" target="_blank" href="https://twitter.com/intent/tweet?source={{ shop.url }}{{ product.url }}"><i class="fa fa-twitter-square"></i> TWITTER</a></li>
          {% endif %}

          {% if settings.share_fb %}
          <li><a target="_blank" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u={{ shop.url }}{{ product.url }}"><i class="fa fa-facebook-square"></i> FACEBOOK</a></li>
          {% endif %}

          {% if settings.share_pinterest %}
          <li><a target="_blank" target="_blank" href="http://pinterest.com/pin/create/button/?url={{ shop.url }}{{ product.url }}"><i class="fa fa-pinterest-square"></i> PINTEREST</a></li>
          {% endif %}

          {% if settings.share_gplus %}
          <li><a target="_blank" href="https://plus.google.com/share?url={{ shop.url }}{{ product.url }}"><i class="fa fa-google-plus-square"></i> GOOGLE PLUS</a></li>
          {% endif %}
        </ul>
      </div>

      {% assign css_class_description = "col-sm-4 col-md-5" %}
      {% assign css_class_custom = "col-sm-4 col-md-4" %}
      {% assign css_class_reviews = "col-sm-4 col-md-3" %}

      {% if settings.layout_type == "1" %}
        {% assign css_class_description = "col-sm-12" %}
        {% assign css_class_custom = "" %}
        {% assign css_class_reviews = "" %}
      {% elsif settings.layout_type == "2" %}
        {% assign css_class_description = "col-sm-6" %}
        {% assign css_class_custom = "col-sm-6" %}
        {% assign css_class_reviews = "" %}
      {% endif %}

      <div class="row product-info">
        <div id="product-description" class="rte {{ css_class_description }}">
          <h2>{{ 'products.general.description' | t }}</h2>
          <div itemprop="description">{{  product.description }}</div>
        </div>

        {% if settings.layout_type == "2" or settings.layout_type == "3" %}

          <div id="additional-info" class="rte {{ css_class_custom }}">
            {% capture size_chart_html %}<p class="size-chart-wrap"><a href="#"><img src="{{ 'sizechart_small.jpg' | asset_url }}" /></a></p>{% endcapture %}
            {{ settings.custom_column | replace: '%SIZECHART%', size_chart_html }}
          </div>

          {% if settings.layout_type == "3" %}
            <div class="rte {{ css_class_reviews }}">
              {% comment %}
                All themes by Shopify should support the Product Reviews app out of the box.
                https://apps.shopify.com/product-reviews
              {% endcomment %}
               
            </div>
          {% endif %}

        {% endif %}
      </div>

      {% if settings.show_related_products == true %}
        {% include 'related-products' %}
      {% endif %}

      {% if settings.instagram_access_token != "" and settings.show_instagram_product_photos == true %}
        {% include 'instagram-product-photos' %}
      {% endif %}

		<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
    </div>  
  </div>
</div>

{% comment %}
  Adding support for product options. See here for details:  
  http://docs.shopify.com/support/your-website/themes/can-i-make-my-theme-use-products-with-multiple-options
{% endcomment %}

<script>
jQuery(function($) {
  jQuery(document).ready(function() {
    new Shopify.OptionSelectors('product-select', { product:{{ product | json }}, onVariantSelected: window.selectCallback, enableHistoryState: true } );

    // Add label if only one product option and it isn't 'Title'.
    {% if product.options.size == 1 and product.options.first != 'Title' %}
      $('.selector-wrapper:eq(0)').prepend('<label>{{ product.options.first }}</label>');
    {% endif %}
  });
});
</script>

 Here is my product.liquid file. Pls help

 

0 Likes
Highlighted
New Member
1 0 0

I am also having the same issue can someone give a simple fix?  I am new to all this and I didn't set up the page I am just helping with adding the products and each time I add variants I can't get the price or item description to change when you click on a new picture? 

0 Likes