variant price not updating on shopify

Tourist
3 0 1

Can you help me, on my product pages, i have different styles of shirts
at different prices, when i click on a different image the price dose not change
for that product, the dropdown dose change to the new product but not the price.
https://hi-siena.com/products/limited-edition-camp-champ?variant=22940930181
Thanks

1 Like
Tourist
3 0 1

product.liquid

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div itemscope itemtype="http://schema.org/Product">

  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">

  {% assign current_variant = product.selected_or_first_available_variant %}
  {% assign   freeproductBy=current_variant.id %}

  {% include 'breadcrumb' %}

 

  <div class="grid product-single">
    <div class="grid__item large--one-half text-center">
      {% include 'product_image' %}
      {% include 'product-description' %}
    </div>

    <div class="grid__item large--one-half">
      {% include 'social-sharing' %}
      <h1 itemprop="name">{{ product.title }}</h1>
      <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <meta itemprop="priceCurrency" content="{{ shop.currency }}">
        <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
        <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm" class="form-vertical">

          {% assign variant = product.selected_or_first_available_variant %}
          <div class="purchase">
            <span class="price" id="price-preview">{{ variant.price | money }}

            {% if settings.show_compare_price %}
              {% if variant.price < variant.compare_at_price %}
              <del>{{ variant.compare_at_price | money }}</del>
              {% endif %}</span>
            {% endif %}

            {% if settings.show_saved_amount %}
            {% if variant.compare_at_price > variant.price %}
            <span id="comparePrice" class="sale-tag large">
              Save ${{ variant.compare_at_price | minus: variant.price |  money_without_currency | split: '.' | first  }}
            </span>
            {% endif %}
            {% endif %}

          </div>

          <select name="id" id="productSelect" class="product-single__variants">
            {% 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 settings.display_quantity_dropdown %}
            <label for="Quantity" class="quantity-selector">{{ 'products.product.quantity' | t }}</label>
            <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
            {% else %}
            <input type="hidden" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
            {% endif %}

            {% assign price_var=variant.price | money %}


            {% if price_var == "$0.00" %}
            {% assign zeroCost='hidden' %}
            {% else %}
            {% assign zeroCost='' %}
            {% endif %}

            <button type="submit" name="add" id="AddToCart" class="{{ zeroCost }} btn">
              <span id="AddToCartText1">{{ settings.add_to_cart_button_text }} </span>
            </button>

            {% if settings.enable_product_cart_skip %}
            <input type="hidden" name="return_to" value="/checkout" />
            {% endif %}

            </form>

          {% include 'product-count' %}

          </div>

        <div class="product_img">
          <img alt="" src="{{ 'product_desc_below.png' | asset_url }}">
        </div>
        
        {% if settings.visitor_counter_enable %}
        <p class="fake_counter_p"><span class="fake_counter" > {{ settings.visitor_counter_text_before }} </span><span class="fake_counter_b"> <b id="dynamic_counter">  </b> </span><span class="fake_counter_l"><strong>{{ settings.visitor_counter_text_after }} </strong></span></p>       
        {% endif %}
       
        {% if collection %}
        {% if collection.previous_product or collection.next_product %}
        <p>
          {% if collection.previous_product %}
          <span class="left">
            {{ 'products.general.previous_product_html' | t | link_to: collection.previous_product }}
          </span>
          {% endif %}
          {% if collection.next_product %}
          <span class="right">
            {{ 'products.general.next_product_html' | t | link_to: collection.next_product }}
          </span>
          {% endif %}
        </p>
        {% endif %}
        {% endif %}

      </div>
    </div>

  </div>
  <div class="hr"></div>
  {% if settings.show_related_products %}

  <div class="related">
    {% include 'related-products' %}
  </div>
  {% endif %}

  {{ 'option_selection.js' | shopify_asset_url | script_tag }}
  <script>
    var selectCallback = function(variant, selector) {
      timber.productPage({
        money_format: "{{ shop.money_format }}",
        variant: variant,
        selector: selector
      });
    };

    jQuery(function($) {
      new Shopify.OptionSelectors('productSelect', {
        product: {{ product | json }},
        onVariantSelected: selectCallback,
        enableHistoryState: true
      });

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

      // Hide selectors if we only have 1 variant and its title contains 'Default'.
      {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
          $('.selector-wrapper').hide();
      {% endif %}
    });
  </script>

  {% include 'jquery_css_counter-stockbar' %}

 

  {% if settings.upsell_popup_enable %}

  <script>

    $(document).ready( function() {

      //  $('#myModal').modal('show');

      $('#yes_button_text').click(function() {    
        $("#Quantity").val({{ settings.quantity_upsell }});

        /*befor start get free product

        $("#AddToCartForm").submit(); */


        /*add start free product */
        var product_id ='';

        {% for variant in all_products[settings.free_product].variants %}

        {% if variant == all_products[settings.free_product].selected_or_first_available_variant %}

        product_id = {{variant.id}}

          {% endif %}
          {% endfor %}

          var freeproductBy= Number("{{ freeproductBy }}");
          $("#other_product").val(product_id);

        var data = 'id='+ product_id + '&quantity=1&properties[other_product]'+freeproductBy;
        $.ajax({
          type: 'POST',
          url: '/cart/add.js',
          dataType: 'json',
          data: data,
          success: function(res){
            setTimeout(function(){ $("#AddToCartForm").submit();  }, 1000);   
          },});
      });

      // for form not submit
      $('#AddToCart').click(function(){
        $('#myModal').modal('show');
        return false;
      });


      $("body").on('click','.modal-backdrop', function(){
        $("#AddToCartForm").submit();
      });

      $("body").on('click', '.close', function(){
        $("#AddToCartForm").submit();
      });
      $("body").on('click', '.no_button', function(){
        $("#AddToCartForm").submit();
      });
    });

  </script>

  {% endif %}

  {{ 'jquery.elevatezoom.js' | asset_url | script_tag }}
  {{ 'productPage.js' | asset_url | script_tag }}

  {% if settings.enable_image_zoom %}
  {% assign zoomOn="inner" %}
  {% else %}
  {% assign zoomOn="none" %}
  {% endif %}

  <script>
    $("#ProductPhotoImg").elevateZoom({
      zoomType: "{{ zoomOn }}",
      cursor: "crosshair",
      zoomWindowFadeIn: 500,
      zoomWindowFadeOut: 750,
      gallery:'gallery_01',
      galleryActiveClass: 'active',
      imageCrossfade: true,
      loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});

    //pass the images to Fancybox
    $("#ProductPhotoImg").bind("click", function(e) {  
      var ez =   $('#ProductPhotoImg').data('elevateZoom');    
      $.fancybox(ez.getGalleryList());
      return false;
    });
  </script>

  <script>
    $("#product-tabs").tabs({
      active: 0
    });
  </script>

  <style type="text/css"> .product-description + [data-readmore-toggle], .product-description[data-readmore]{display: block; width: 100%;}.product-description[data-readmore]{transition: height 100ms;overflow: hidden;}</style>

  {{ 'readmore.min.js' | asset_url | script_tag }}
  {{ 'jquery.flexslider.js' | asset_url | script_tag }}
{% comment %}
Place this in your product.liquid template, at the bottom.
{% endcomment %}
{% if product.variants.size > 1 %}
<script>
(function($) {
  var variantImages = {},
    thumbnails,
    variant,
    variantImage,
    optionValue;
    {% for variant in product.variants %}
       variant = {{ variant | json }};
       if ( typeof variant.featured_image !== 'undefined' && variant.featured_image !== null ) {
         variantImage =  variant.featured_image.src.split('?')[0].replace(/http(s)?:/,'');
         variantImages[variantImage] = variantImages[variantImage] || {};
         {% for option in product.options %}
           {% assign option_value = variant.options[forloop.index0] %}
           {% assign option_key = 'option-' | append: forloop.index0 %}
           if (typeof variantImages[variantImage][{{ option_key | json }}] === 'undefined') {
             variantImages[variantImage][{{ option_key | json }}] = {{ option_value | json }};
           }
           else {
             var oldValue = variantImages[variantImage][{{ option_key | json }}];
             if ( oldValue !== null && oldValue !== {{ option_value | json }} )  {
               variantImages[variantImage][{{ option_key | json }}] = null;
             }
           }
         {% endfor %}
       }
    {% endfor %}
    $(function() {
      thumbnails = $('img[src*="/products/"]').not(':first');
      if (thumbnails.size()) {
        thumbnails.bind('click', function() {
          var image = $(this).attr('src').split('?')[0].replace(/(_thumb\.)|(_small\.)|(_compact\.)|(_medium\.)|(_large\.)|(_grande\.)/,'.');
          if (typeof variantImages[image] !== 'undefined') {
            {% for option in product.options %}
            optionValue = variantImages[image]['option-{{ forloop.index0 }}'];
            if (optionValue !== null && $('.single-option-selector:eq({{ forloop.index0 }}) option').filter(function() { return $(this).text() === optionValue }).length) {
              $('.single-option-selector:eq({{ forloop.index0 }})').val(optionValue).trigger('change');
            }
            {% endfor %}
          }
        });
      }
    });
})(jQuery);
</script>
{% endif %}

 

 

 

0 Likes
Shopify Expert
2652 60 649

Hi kevin, 

looks like your HTML and javascript are out  of sync. Change this code 

<span class="price" id="price-preview">{{ variant.price | money }}

            {% if settings.show_compare_price %}
              {% if variant.price < variant.compare_at_price %}
              <del>{{ variant.compare_at_price | money }}</del>
              {% endif %}</span>
            {% endif %}

To look like this:

<span class="price" id="price-preview">
  <span id="ProductPrice">{{ variant.price | money }}</span>
  {% if settings.show_compare_price and variant.price < variant.compare_at_price %}
    <del><span id="ComparePrice">{{ variant.compare_at_price | money }}</span></del>
  {% endif %}
</span>

And javascript will know what to update. 

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

Hi Tim

Thank you so much, That worked :)

0 Likes
New Member
3 0 0

Hi, I'm having the same problem, on a product page https://custom-gold-grillz.myshopify.com/collections/featured-products/products/gold-plated-6-tooth-... the price won't change for each variant. I would like to ask help. Thanks 

0 Likes
New Member
3 0 0

This is the product-template.liquid

 

<!-- Bold:POv2 -->
{%- include 'bold-product' with product, hide_action: 'break', output: 'none' -%}
<!-- Bold:POv2 -->
  {%- assign product_thumb_size = '160x160' -%}
  {%- assign product_image_zoom_size = '1024x1024' -%}
  {%- assign current_variant = product.selected_or_first_available_variant -%}

  {% case section.settings.image_size %}
    {% when 'small' %}
      {%- assign product_image_width = 6 -%}
      {%- assign product_description_width = 'col-md-6' -%}
      {%- assign product_image_size = '345x' -%}
    {% when 'medium' %}
      {%- assign product_image_width = 7 -%}
      {%- assign product_description_width = 'col-md-5' -%}
      {%- assign product_image_size = '530x' -%}
    {% when 'large' %}
      {%- assign product_image_width = 8 -%}
      {%- assign product_description_width = 'col-md-4' -%}
      {%- assign product_image_size = '720x' -%}
  {% endcase %}

  {% if section.settings.thumbnail_position != 'below' %}
    {% assign product_image_width = product_image_width | minus:1 %}
  {% endif %}

<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">

<div class="row">
    <div class="col-md-12">

        <nav class="breadcrumb" role="navigation" aria-label="breadcrumbs">
          <a href="/" title="{{ 'general.breadcrumbs.back_home' | t }}">{{ 'general.breadcrumbs.home' | t }}</a>

            {% if collection %}
              <span aria-hidden="true">&rsaquo;</span>
              {% if collection.handle %}
                {% capture url %}/collections/{{ collection.handle }}{% endcapture %}
                {{ collection.title | link_to: url }}
              {% endif %}
            {% endif %}
            <span aria-hidden="true">&rsaquo;</span>
            <span>{{ product.title }}</span>

        </nav>

    </div>
</div>

<div class="row" id="product-box" data-section-id="{{ section.id }}">

  {% if section.settings.thumbnail_position == 'left' %}
    {% if product.images.size > 1 %}
    <div class="col-md-1 product-page--side-thumbnails">
      <div class="row">
        <ul id="product-thumbnails">
        {% for image in product.images %}
          <li class="col-md-12 col-sm-12{% cycle ' alpha clearcolumn', '', '', ' omega' %}">
            <a href="{{ image | product_img_url: 'original' }}" title="{{ image.alt | escape }}" class="image-swap">
              <img src="{{ image | product_img_url: 'medium'}}" alt="{{ image.alt | escape }}" />
            </a>
          </li>
        {% endfor %}
        </ul>
      </div>
    </div>
    {% endif %}
  {% endif %}

    <div class="col-md-{{ product_image_width }} product-images">

    <div class="sale-badge product-price__sale-label-{{ section.id }}{% unless current_variant.compare_at_price > current_variant.price %} hide{% endunless %}">{{ 'products.general.sale' | t }}</div>

        <!-- The first image pulled from the product is a large image (480x480), subsequent images are "compact" which is 160x160 -->
        <div id="product_images">
            {% for image in product.images %}
                {% if forloop.first %}
                    {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
                    <div class="featured-image-div" {% if section.settings.enable_zoom %}data-zoom="true"{% endif %}>
                        <img id="FeaturedImage-{{ section.id }}" src="{{ featured_image | img_url: 'master' }}" alt="{{ featured_image.alt | escape }}" class="product-main-image" />
                        <div class="hidden" id="featured-image-loader">
                            <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
                            <span class="sr-only">Loading...</span>
                        </div>
                    </div>
                {% endif %}
            {% endfor %}

      {% if section.settings.thumbnail_position == 'below' %}
              {% if product.images.size > 1 %}
              <div class="row">
                  <ul id="product-thumbnails">
                  {% for image in product.images %}
                      <li class="col-md-3 col-sm-3{% cycle ' alpha clearcolumn', '', '', ' omega' %}">
                          <a href="{{ image | product_img_url: 'original' }}" title="{{ image.alt | escape }}" class="image-swap">
                              <img src="{{ image | product_img_url: 'medium'}}" alt="{{ image.alt | escape }}" />
                          </a>
                      </li>
                  {% endfor %}
                  </ul>
              </div>
              {% endif %}
      {% endif %}

        </div>

        <div id="mobile-product-images">
            <div class="flexslider-container col-md-12">
                <div class="flexslider mobile-product-slider">
                    <ul id="product-thumbnails" class="slides">
                        {% for image in product.images %}
                            <li>
                                <img src="{{ image | product_img_url: 'grande'}}" alt="{{ image.alt | escape }}" class="img-responsive" />
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>

    </div>

  {% if section.settings.thumbnail_position == 'right' %}
    {% if product.images.size > 1 %}
    <div class="col-md-1 product-page--side-thumbnails">
      <div class="row">
        <ul id="product-thumbnails">
        {% for image in product.images %}
          <li class="col-md-12 col-sm-12{% cycle ' alpha clearcolumn', '', '', ' omega' %}">
            <a href="{{ image | product_img_url: 'original' }}" title="{{ image.alt | escape }}" class="image-swap">
              <img src="{{ image | product_img_url: 'medium'}}" alt="{{ image.alt | escape }}" />
            </a>
          </li>
        {% endfor %}
        </ul>
      </div>
    </div>
    {% endif %}
  {% endif %}

    <div class="{{ product_description_width }}">

            <section class="entry-content product-description-main-wrapper">

            {% if section.settings.show-vendor %}
                <div class="indiv-product-vendor-text">{{ product.vendor }}</div>
            {% endif %}

            <h2 class="custom-font product-description-header">{{ product.title }}</h2>

                        {% if product.available %}

                        <!-- Bold:POv2 -->
                        <form action="/cart/add" method="post" enctype="multipart/form-data" id="add-to-cart-form" {% unless section.settings.show_variant_labels %}class="product-form--hide-variant-labels"{% endunless %}>
                        <!-- Bold:POv2 -->                           

                          <h5 class="custom-font compare-at-price js">
                            {% if current_variant.compare_at_price > current_variant.price %}
                            <span class="money">{{ current_variant.compare_at_price | money }}</span>
                            {% endif %}
                          </h5>
                          <!-- Bold:POv2 -->
                          <h3 class="custom-font js" id="price-field">
                            <span class="bold_pricing money">
                              {{ current_variant.price | money }}
                            </span>
                          </h3>
                          <!-- Bold:POv2 -->
                          <div class="row">

                            {% if product.variants.size > 1  %}
                            {% for option in product.options_with_values %}
                            <div class="selector-wrapper {% if section.settings.image_size == 'large' %}col-md-12{% else %}col-md-6{% endif %} col-sm-12 col-xs-12">
                              <label for="SingleOptionSelector-{{ forloop.index0 }}">{{ option.name }}</label>
                              <select class="form-control" id="SingleOptionSelector-{{ forloop.index0 }}">
                                {% for value in option.values %}
                                <option {% if option.selected_value == value %}selected{% endif %}>{{ value }}</option>
                                {% endfor %}
                              </select>
                            </div>
                            {% endfor %}
                            {% endif %}

                            <select name="id" id="ProductSelect-{{ section.id }}" data-section="{{ section.id }}" class="form-control original-select product-form__variants no-js">
                              {% for variant in product.variants %}
                              {% if variant.available %}
                              <option {% if variant == current_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
                                {{ variant.title }} - <span class="money">{{ variant.price | money }}</span>
                              </option>
                              {% else %}
                              <option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
                              {% endif %}
                              {% endfor %}
                            </select>

                            <!-- Bold:POv2 -->
                            <div class="bold_options" data-product-id="{{ product.id }}"></div>
                            <!-- Bold:POv2 --> 
                            
                            {% if section.settings.show_quantity_selector %}
                            <div class="selector-wrapper {% if section.settings.image_size == 'large' %}col-md-12{% else %}col-md-6{% endif %} col-sm-12 col-xs-12">
                              <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
                              <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
                            </div>
                            {% endif %}

                            <div class="col-md-12">
                              <button type="submit" name="add" id="purchase" class="btn btn-success custom-font"
                                      data-use-ajax="{% if section.settings.open_cart_when_added %}true{% else %}false{% endif %}">
                                {{ 'products.product.add_to_cart' | t }}
                              </button>
                            </div>

                          </div>

                        </form>


                        {% else %}

                          <div class="col-md-12 col-sm-12 col-xs-12">

                            <div class="product-out-of-stock">{{ 'products.product.sorry_stock' | t }}</div>

                          </div>

                        {% endif %}

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

        {% if settings.social_sharing_products %}
            {% if template contains 'article' or template contains 'blog' %}

    {% capture permalinkURL %}{{ shop.url }}{{ article.url }}{% endcapture %}
    {% capture shareTitle %}{{ article.title }}{% endcapture %}
    {% capture shareImage %}{{ article | img_url: '1024x1024' }}{% endcapture %}

{% elsif template contains 'product' %}

    {% capture permalinkURL %}{{ shop.url }}{{ product.url }}{% endcapture %}
    {% capture shareTitle %}{{ product.title }}{% endcapture %}
    {% capture shareImage %}{{ product.featured_image | product_img_url: 'original' }}{% endcapture %}

{% endif %}

<div id="sharing" class="social-sharing" data-permalink="{{ permalinkURL }}">

    {% if settings.share_facebook %}
    <!-- https://developers.facebook.com/docs/plugins/share-button/ -->
    <a target="_blank" href="//www.facebook.com/sharer.php?u={{ permalinkURL }}" class="share-facebook">
    <span class="icon icon-facebook" aria-hidden="true"></span>
    <span class="share-title">Share</span>
    </a>
    {% endif %}

    {% if settings.share_twitter %}
    <!-- https://dev.twitter.com/docs/intents -->
    <a target="_blank" href="//twitter.com/share?url={{ permalinkURL }}&amp;text={{ shareTitle }}" class="share-twitter">
    <span class="icon icon-twitter" aria-hidden="true"></span>
    <span class="share-title">Tweet</span>
    </a>
    {% endif %}

    {% if settings.share_google %}
    <!--
    https://developers.pinterest.com/pin_it/
    Pinterest get data from the same Open Graph meta tags Facebook uses
    -->
    <a target="_blank" href="//pinterest.com/pin/create/button/?url={{ permalinkURL }}&amp;media={{ shareImage }}&amp;description={{ product.title | escape }}" class="share-pinterest">
    <span class="icon icon-pinterest" aria-hidden="true"></span>
    <span class="share-title">Pin it</span>
    </a>
    {% endif %}

</div>
        {% endif %}

        {% if section.settings.show_reviews %}
            <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
        {% endif %}

    </section>

        </div>

  </div>

    {% if section.settings.enable_related_products %}

<!-- Solution brought to you by Caroline Schnapp -->
<!-- See this: https://docs.shopify.com/support/your-store/products/can-i-recommend-related-products#finding-a-rele... -->

{% comment %}
  Number of related items per row,
  and number of rows.
{% endcomment %}

{% assign number_of_related_products_per_row = 4 %}

{% comment %}
  Heading.
  Leave blank if you don't need one.
{% endcomment %}

{% assign heading = section.settings.related_products_title %}

{% comment %}
  Set either or both to true, if you want
  to limit yourself to items with same vendor, and/or type.
{% endcomment %}

{% assign same_vendor = false %}
{% assign same_type = false %}

{% comment %}
  Collections to ignore.
  Never pick related items from those.
{% endcomment %}

{% assign exclusions = 'frontpage,all' | split: ',' %}

{% comment %}
  Looking for a relevant collection.
{% endcomment %}

{% if product.metafields.c_f['Related Products'] %}
  {% assign collection = collections[product.metafields.c_f['Related Products']] %}
{% endif %}

{% assign found_a_collection = false %}
{% if collection and collection.all_products_count > 1 %}
  {% unless exclusions contains collection.handle %}
    {% assign found_a_collection = true %}
  {% endunless %}
{% endif %}
{% unless found_a_collection %}
  {% for c in product.collections %}
    {% unless exclusions contains c.handle or c.all_products_count < 2 %}
      {% assign found_a_collection = true %}
      {% assign collection = c %}
      {% break %}
    {% endunless %}
  {% endfor %}
{% endunless %}

{% comment %}
  If we have a relevant collection.
{% endcomment %}

{% if found_a_collection %}

  {% assign counter = 0 %}
  {% assign break_at = number_of_related_products_per_row %}
  {% assign current_product = product %}

  {% case number_of_related_products_per_row %}
    {% when 4 %}
      {% assign grid_item_width = 'col-md-3 col-xs-6' %}
  {% endcase %}

  {% capture related_items %}
    {% for product in collection.products %}
      {% unless product.handle == current_product.handle %}
         {% unless same_vendor and current_product.vendor != product.vendor %}
           {% unless same_type and current_product.type != product.type %}
             {% comment %}
  Set the default grid_item_width if no variable is set
{% endcomment %}
{% unless grid_item_width %}
  {% assign grid_item_width = 'large--one-third medium--one-half' %}
{% endunless %}

{% comment %}
  Check if the product is on sale and set a variable to be used below.
{% endcomment %}
{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
  {% assign on_sale = true %}
{% endif %}

{% comment %}
  Check if the product is sold out and set a variable to be used below.
{% endcomment %}
{% assign sold_out = true %}
{% if product.available %}
  {% assign sold_out = false %}
{% endif %}

<div class="grid__item {{ grid_item_width }} indiv-product-wrapper

{% case section.settings.grid %}
{% when '3' %}
  {% cycle ' alpha', '', ' omega' %}
{% when '4' %}
{% cycle ' alpha', '', 'mobile-clear', ' omega' %}
{% endcase %}

">

  <div class="indiv-product">

      <a href="{{ product.url | within: collection }}" title="{{product.title}}">
        <img src="{{ product.featured_image | product_img_url: '760x' }}'" alt="{{product.title}}" class="img-responsive wow fadeIn" id="collection-image-anim">
      </a>

    <div class="hp-title">

{% if section.settings.show-vendor %}
  <div class="indiv-product-vendor-text">{{ product.vendor | link_to_vendor }}</div>
{% endif %}

      <a href="{{ product.url | within: collection }}">

        <div class="indiv-product-title-text">{{ product.title }}</div>

        <span class="money-styling custom-font">

          {% if product.compare_at_price_max > product.price %}
            <h5 class="custom-font compare-at-price">
              <span class="money">{{ product.compare_at_price_max | money }}</span>
            </h5>
          {% endif %}

          {% if product.available %}
            {% if product.price_varies %}
              <small>{{ 'products.general.from' | t }}</small> <span class="money">{{ product.price_min | money }}</span>
            {% else %}
              <span class="money">{{ product.price_min | money }}</span>
            {% endif %}
          {% else %}
            <p class="product-dets-sold-out">{{ 'products.product.sold_out' | t }}</p>
          {% endif %}

        </span>
      </a>
    </div>
  </div>

  {% if product.compare_at_price_max > product.price %}
    <div class="sale-badge">{{ 'products.general.sale' | t }}</div>
  {% endif %}

</div>

             {% assign counter = counter | plus: 1 %}
             {% if counter == break_at %}
               {% break %}
             {% endif %}
           {% endunless %}
        {% endunless %}
      {% endunless %}
    {% endfor %}
  {% endcapture %}

  {% assign related_items = related_items | trim %}

  {% unless related_items == blank %}

  <div class="product-page-related-products">

      {% unless heading == blank %}
        <div class="title-bar custom-font">
          <h2>{{ heading }}</h2>
          <div class="clear"></div>
        </div>
      {% endunless %}
      <div class="row">
        {{ related_items }}
      </div>

  </div>

  {% endunless %}

{% endif %}

{% endif %}

{% unless product.empty? %}
  <script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
  </script>
{% endunless %}

{% schema %}
{
  "name": "Product pages",
  "settings": [
    {
      "type": "checkbox",
      "id": "show-vendor",
      "label": "Show vendor",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_quantity_selector",
      "label": "Show quantity selector",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_variant_labels",
      "label": "Show variant labels",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "open_cart_when_added",
      "label": "Open cart when item is added",
      "default": true
    },
    {
        "type": "header",
        "content": "Related products"
      },
    {
      "type": "checkbox",
      "id": "enable_related_products",
      "label": "Enable",
      "default": false
    },
    {
      "type": "text",
      "id": "related_products_title",
      "label": "Heading",
      "default": "Other fine products"
    },
      {
        "type": "header",
        "content": "Product images"
      },
    {
      "type": "select",
      "id": "image_size",
      "label": "Image size",
      "options": [
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "medium",
          "label": "Medium"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "medium"
    },
    {
      "type": "select",
      "id": "thumbnail_position",
      "label": "Thumbnail position",
      "options": [
        {
          "value": "below",
          "label": "Below main image"
        },
        {
          "value": "left",
          "label": "Left of main image"
        },
        {
          "value": "right",
          "label": "Right of main image"
        }
      ],
      "default": "below"
    },
    {
      "type": "checkbox",
      "id": "enable_zoom",
      "label": "Enable image zoom",
      "default": true
    },
    {
      "type": "header",
      "content": "Reviews"
    },
    {
      "type": "checkbox",
      "id": "show_reviews",
      "label": "Enable",
      "default": false
    },
    {
      "type": "paragraph",
      "content": "You will need to install Shopify's [Product Reviews app](https://apps.shopify.com/product-reviews) before enabling this option."
    }
  ]
}
{% endschema %}
 

0 Likes
Shopify Expert
2652 60 649

Hey Lou, you have Bold Options -- have you talked to them?

Because there is no code to update the price in your javascript, probably it was removed due to installation of BO, which has its' own ideas about current price...

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
14 0 0

Sort of the same issue here but price updates and not photos or thumbs.  Looking to do excatly what Kevin's linked page is now doing.  Shirt color in images gets updated when color variant dropdown is selected... Here's my product that is not working right:  https://shumakolowa.com/products/new-mexico-pueblos-word-cloud-t-shirt

0 Likes
New Member
14 0 0

Here's my product.liquid  

 


<!-- spurit_po-added -->
{% include 'spurit_po-product-snippet' %}
<!-- /spurit_po-added -->
<div id="product" class="{{ product.handle }}" itemscope itemtype="http://schema.org/Product">
  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}" />
  <meta itemprop="image" content="{{ product.featured_image.src | product_img_url: 'grande' }}" />
  
  
  <div class="row clearfix">
    
    <!-- Begin product photos -->
    <div class="{% if product.images.size == 1 or settings.thumbnails_position == 'below' %}span6 no-margin-left product-images{% else %}span5{% endif %}">
      
      <!-- Begin featured image -->
      <div class="image featured">
        {% if settings.enable_product_image_zoom %}
        <a href="{{ product.featured_image | product_img_url: 'original' }}" class="cloud-zoom" rel="position: 'inside', showTitle: 'false'" id="placeholder">
          <img src="{{ product.featured_image | product_img_url: 'original' }}" alt="{{ product.featured_image.alt | escape }}" />
        </a>
        {% else %}
        <a href="{{ product.featured_image | product_img_url: 'original' }}" class="zoom" id="placeholder">
          <img src="{{ product.featured_image | product_img_url: 'original' }}" alt="{{ product.featured_image.alt | escape }}" />
        </a>
        {% endif %}
      </div>
      <!-- End product image -->
      
      {% if product.images.size > 1 and settings.thumbnails_position == 'below' %}
      <!-- Begin thumbnails -->

     
      <style>
      .thumbs .image { margin: 15px 0 }
      .thumbs .image { padding: 0 15px }
      .thumbs .last-in-row { padding-right: 0 }
      </style>
      
      <!-- test carousel for thumbs -->


      <!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="{{ 'jquery.bxslider.min.js' | asset_url }}"></script>
<!-- bxSlider CSS file -->
<link href="{{ 'jquery.bxslider.css' | asset_url }}" rel="stylesheet" />
      <script>
        $(document).ready(function(){
  $('.slider1').bxSlider({
    slideWidth: 85,
    minSlides: 5,
    maxSlides: 5,
    pager: false,
    infiniteLoop: false,
    controls: true,
    slideMargin: 1
  });
});
      </script>   
       <div class="slider1-wrapper">
    <div class="slider1">
       {% for image in product.images %}
        {% if settings.enable_product_image_zoom %}
        <div class="image slide {% cycle 'last-in-row': '', '', '', '', '', '', ' last-in-row' %}">
          <a href="{{ image | product_img_url: 'original' }}" class="cloud-zoom-gallery" rel="useZoom: 'placeholder', smallImage: '{{ image | product_img_url: 'original' }}', tint: '#ffffff'">
            <img src="{{ image | product_img_url: 'medium' }}" alt="{{ image.alt | escape }}"  />
          </a>
        </div>
        {% else %}
        <div class="image slide {% cycle 'last-in-row': '', '', '', '', '', '', ' last-in-row' %}">
          <a href="{{ image | product_img_url: 'original' }}" data-original-image="{{ image | product_img_url: 'original' }}">
            <img src="{{ image | product_img_url: 'medium' }}" alt="{{ image.alt | escape }}"  />
          </a>
        </div>
        {% endif %}
        {% endfor %}
    </div>
</div>
 <!-- End thumbnails -->
      {% endif %}
      
    </div>
    <!-- End product photos -->

    
    
    <!-- Begin description -->
    <div class="span6 product-description">
      
      <h1 class="title" itemprop="name">{{ product.title }}</h1>
      
      <span class="item-no">Item No: {{ product.variants.first.sku }}</span>
      
      <div class="purchase" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <meta itemprop="priceCurrency" content="{{ shop.currency }}" />
        {% if product.available %}
        <link itemprop="availability" href="http://schema.org/InStock" />
        {% else %}
        <link itemprop="availability" href="http://schema.org/OutOfStock" />
        {% endif %}
        
        
        <h2 class="price" id="price-preview">
          <span itemprop="price">{{ product.price_min | money }}</span>{% if product.price_min < product.compare_at_price_min %} <del>{{ product.compare_at_price_min | money }}</del>{% endif %}
        </h2>
      </div>
      
      {% assign hide_default_title = false %}
      {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
        {% assign hide_default_title = true %}
      {% endif %}
            
      <form id="add-item-form" action="/cart/add" method="post" class="variants clearfix">
        
        <!-- Begin product options -->
        <div class="product-options">
        
          <div class="select clearfix"{% if hide_default_title %} style="display:none"{% endif %}>
            <select id="product-select" name="id">
              {% for variant in product.variants %}
              
              <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
              {% endfor %}
            </select>
          </div>
          
          {% if settings.display_quantity_dropdown %}
          <div class="selector-wrapper">
            <label>Quantity</label>
            <input id="quantity" type="number" name="quantity" value="1"  min="1" class="tc item-quantity" />
          </div>
          {% endif %}
          
          <div class="purchase-section{% if product.variants.size > 1 %} multiple{% endif %}">
            <div class="purchase">
              {% unless product.available %}
              <p>Sold</p>
              {% else %}
              <input type="submit" id="add-to-cart" class="btn" name="add" value="Add to cart" />
              {% endunless %}
            </div>
            <div class="guide-button">
            <a href="#details">More Details </a>
          </div>
          </div>
        </div>
        <!-- End product options -->
        
      </form>
      
            {% if settings.show_social %}
      <!-- Begin social buttons -->
      <div class="social">
        {% include 'addthis' %}
      </div>
      <!-- End social buttons -->
      {% endif %}
  
      
      <div class="seal">
      <a href="http://shumakolowa.com/pages/authentic-native-art" target="_blank"><img src="{{ 'seal.png' | asset_url }}"></a>
        </div>
  </div>    
    
<div class="span12">
  
  {% if product.handle == "gift-card" %}        
  <div class="description-only">
            {{ product.description }}
          </div>
  {% else %}    
  <h2 id="details"></h2>
      
<ul class="tabs">
<li><a class="active" href="#tab1">Description</a></li>
<li><a href="#tab2">Details</a></li>
<li><a href="#tab3">Artist</a></li>
<li><a href="#tab4">Inspiration</a></li>
<li><a href="#tab5">Collector's Guide</a></li>
<li><a href="#tab6">Guarantee</a></li>
</ul>
<ul class="tabs-content">
<li class="active" id="tab1">
      <div class="description">{{ product.description }}</div>
</li>
<li id="tab2">
  <div class="details">{{ product.metafields.shumakolowa.details }}</div>
</li>
<li id="tab3">
<div class="artist-bio">{{ product.metafields.shumakolowa.artist_bio }}</div>
</li>
<li id="tab4">
<div class="inspiration">{{ product.metafields.shumakolowa.inspiration }}</div>
</li>
<li id="tab5">
<div class="collectors-guide">{{ product.metafields.shumakolowa.collectors_guide }}</div>
</li>
<li id="tab6">
<div class="guarantee">{{ product.metafields.shumakolowa.guarantee }}</div>
</li>
</ul>

{% endif %}
      
  <a href="#product">Back to Top ></a>
    
    </div>
    <!-- End description -->

    <div class="span12">
      <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
    </div>
    
  </div>
  
  <!-- Begin related product -->
  {% if settings.show_related_products %}
    {% include 'related-products' %}
  {% endif %}
  
  {% include 'cross-sell' %}
  
</div> 

<div style="display:none" id="preloading">
{% for image in product.images offset: 1 %}
{{ image | product_img_url: 'original' | img_tag }}
{% endfor %}
</div>
<script>
window._fbq = window._fbq || [];
window._fbq.push(['track', 'ViewContent', {
content_ids: ['shopify_{{ product.id }}_{{ product.variants.first.id }}'],
content_type: 'product'
}]);

$('#AddToCartForm').submit(function (e) {
  var form = this;
  var variant_id = form.serializeArray()[0].value;
  window._fbq.push(['track', 'AddToCart', {
content_ids: ['shopify_{{ product.id }}_' + variant_id],
content_type: 'product'
  }]);
  e.preventDefault();
  setTimeout(function () {
  form.submit();
  }, 500); // in milliseconds
});

</script>

0 Likes
Shopify Expert
2652 60 649

Nick,

your problem is caused by the fact that you have 3 copies of jquery loaded -- two here: 

  <!-- for product image zoom -->
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

and another here:

   <!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

What happens is you load one copy of jQuery, then you load plugins, event handler are assigned, etc, and then you load another jQuery which loads on top of the previous and overwrites all plugins and events, then the theme tries to use those plugins and you have errors in your console...

Leave only one of these lines (maybe 2.1.1 as it's the newer of them) and see what happens then.

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