Price doesn't change with product variant

New Member
3 0 0

Hi there,

I'm trying to set up some products pages that contain variants with different prices (sizes). However when changing the variant in the product page of the shop, the price shown seems to stick to the first variant... and even if you try to add the second variant to the cart, the cart fills with the first variant.

Any help would be greatly appreciated!

Mathieu

0 Likes
Shopify Expert
9807 92 1561

Hey Mathieu,

If the image is not changing and the variant being added to cart is wrong it would point to you having a JavaScript error in the theme. The error would be stopping the image swap code, and the code that changes the main <select> element to the correct variant.

Do you have link you can share to a product with multiple variants?

If you don't want to share a link you should review the browser debug console. That could reveal the JS error so you can track down the problem.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
New Member
2 0 0

Hi there, I'm having the same problem. I just ran the browser debug console and found this error: 

Uncaught SyntaxError: Unexpected token , 

in theme.js.575

What should i do now that I've found the issue? I'm not sure how to fix it? 

Have attached a screenshot. I'm using Debut theme.

Thank you!

 

0 Likes
Shopify Expert
2678 65 668

Hi Anna, somebody has edited the theme.js Asset and commented some code in a wrong way:

    _updatePrice: function(variant) {
      /* if (variant.price === this.currentVariant.price && variant.compare_at_price === this.currentVariant.compare_at_price) {
  return;
}*/, 

If you change it this way (just move the comment's closing), the error will disappear, but the edit itself prevents price from updating, and why it was done is beyond my imagination:

    _updatePrice: function(variant) {
      /* if (variant.price === this.currentVariant.price && variant.compare_at_price === this.currentVariant.compare_at_price) {
  */
    return;
}, 

 

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

Hey Tim,

I'm running into a similar issue...I have two variants of a product with different prices but only the first variant's price appears on the product page when toggling between variants (page link here: https://www.covetella.com/collections/prom/products/beaded-sheath-dress-with-elbow-sleeve)

I've pasted my product.liquid template code below, can you help?

Thanks!

{% if settings.enable_breadcrumb %}
<section class="detail-heading">
  <div class="detail-heading-wrapper">
    <div class="container">
      <div class="row">
        <div class="detail-heading-inner">
          <h3 class="page-title">
            <span>
              {% if collection %}
              <a href="{{ collection.url }}" title="{{ collection.title | escape }}">{{ collection.title }}</a>
              {% else %}
              <a href="/collections/all" title="All Products">{{ 'general.breadcrumbs.products' | t }}</a>
              {% endif %}
            </span>
          </h3>
          <div class="breadcrumb clearfix">
            <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="{{ shop.url }}" title="{{ shop.name | escape }}" itemprop="url"><span itemprop="title">{{ 'general.breadcrumbs.home' | t }}</span></a></span>
            <span class="arrow-space">&#62;</span>
            <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
              {% if collection %}
              <a href="{{ collection.url }}" title="{{ collection.title | escape }}">{{ collection.title }}</a>
              {% else %}
              <a href="/collections/all" title="All Products">{{ 'general.breadcrumbs.products' | t }}</a>
              {% endif %}
            </span>
            <span class="arrow-space">&#62;</span>
            <strong>{{ product.title }}</strong>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{% endif %}

<section class="product-detail-content">
  <div class="detail-content-wrapper">
    <div class="container">
      <div class="row">
        <div class="detail-content-inner">
          <div id="product" class="{{ product.handle }} detail-content">
            <div class="col-md-12 info-detail-pro clearfix">
              <div class="col-md-6" id="product-image">                          
                <div id="featuted-image" class="image featured">
                  {% if product.images.size > 0 %}       
                  {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
                  {% if settings.enable_product_image_zoom %}
                  <img src="{{ featured_image | img_url: '1024x1024' }}" alt="{{ featured_image.alt | escape }}" />
                  {% else %}
                  <a href="{{ featured_image | img_url: '1024x1024' }}" class="zoom" id="placeholder">
                    <img src="{{ featured_image | img_url: '1024x1024' }}" alt="{{ featured_image.alt | escape }}" />
                  </a>
                  {% endif %}
                  {% else %}
                  <img src="{{ 'No_Image_2.png' | asset_url }}" />
                  {% endif %}
                </div>

                {% if product.images.size > 1 %}
                <div id="gallery-images" class="thumbs clearfix">
                  <div class="gallery-images-inner">
                    <div class="slider-3itemsc">
                      {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
                      {% for image in product.images %}
                      {% if settings.enable_product_image_zoom %}
                      <div class="image{% cycle 'last-in-row': '', '', '', ' last-in-row' %}{% if image == featured_image %} active{% endif %}">
                        <a href="{{ image | product_img_url: '1024x1024' }}" class="cloud-zoom-gallery">
                          <img src="{{ image | product_img_url: 'large' }}" alt="{{ image.alt | escape }}" />
                        </a>
                      </div>
                      {% else %}
                      <div class="image{% cycle 'last-in-row': '', '', '', ' last-in-row' %}">
                        <a href="{{ image | product_img_url: '1024x1024' }}" data-original-image="{{ image | product_img_url: '1024x1024' }}">
                          <img src="{{ image | product_img_url: 'large' }}" alt="{{ image.alt | escape }}" />
                        </a>
                      </div>
                      {% endif %}
                      {% endfor %}
                    </div>
                  </div>                  
                </div>
                {% endif %}
              </div>
              <div class="col-md-6" id="product-information">
                <h1 class="title">{{ product.title }}</h1>                                                                                                

                {% 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">
                  <div class="product-options {% if hide_default_title %}no-options {% endif %}">					

                    {% assign variant = product.selected_or_first_available_variant %}
                    <div class="purchase">
                     <ul> <h2 class="price" id="price-preview">Rent {{ variant.price | money }}{% if variant.price < variant.compare_at_price %} </ul> <del>{{ variant.compare_at_price | money }}</del>{% endif %}</h2>
                    </div>

                    {% if settings.enable_rating_star %}
                    <div class="rating-star">
                      <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
                      <span class="review-link"><a href="#customer_review">Review this product</a></span>
                    </div>
                    <script>
                      $('.review-link a').click(function(e) {
                        e.preventDefault();
                        var scrollto = $(this).attr('href');
                        var fix_scrollto = $(scrollto).offset().top + 1800;
                        $('html, body').animate({
                          scrollTop: fix_scrollto
                        }, 500);
                      });
                    </script>
                    {% endif %}

                    {% if settings.enable_vendor %}
                    <div class="product_vendor">{{ 'minimal.product.vendor' |t :x:product.vendor }}</div>
                    {% endif %}

                    {% if settings.enable_type %}
                    <div class="product_type">{{ 'minimal.product.type' |t :x:product.type }}</div>
                    {% endif %}

                    {% if settings.enable_sku %}
                    <div class="product_vendor">{{ 'minimal.product.sku' |t :x:product.variants.first.sku }}</div>
                    {% endif %}

                    {% if settings.enable_quickoverview %}
                    <div class="description">                      
                      {{ product.description  }}
                    </div>
                    {% endif %}
                    
                    {% if settings.color_swatch %}
                    {% if product.available %}
                    {% for option in product.options %}
                    {% include 'swatch' with option %}
                    {% endfor %}
                    {% endif %}
                    {% endif %}
                    <div class="select clearfix"{% if hide_default_title or settings.color_swatch %} style="display:none"{% endif %}>
                      <select id="product-select" name="id">
                        {% for variant in product.variants %}
                        <option value="{{ variant.id }}"{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}">{{ variant.title }} - {{ variant.price | money }}</option>
                        {% endfor %}
                      </select>
                      
                    </div>
                    
						

                    {% if settings.display_quantity_dropdown %}
                    <div class="quantity-wrapper clearfix">
                      <label class="wrapper-title">Qty</label>
                      <div class="wrapper">
                        <span class="qty-down btooltip" data-toggle="tooltip" data-placement="top" title="Decrease" data-src="#quantity">
                          <i class="fa fa-minus"></i>
                        </span>
                        <input id="quantity" type="text" name="quantity" value="1" maxlength="5" size="5" class="item-quantity" />
                        <span class="qty-up btooltip" data-toggle="tooltip" data-placement="top" title="Increase" data-src="#quantity">
                          <i class="fa fa-plus"></i>
                        </span>
                      </div>
                    </div>
                    {% endif %}
                    
                     {% include 'booking-form' %}

                    <div class="purchase-section{% if product.variants.size > 1 %} multiple{% endif %}">
                      <p>Come to our showroom to try this and many other dresses on.</p>
                <input type="button" onclick="window.location='/apps/book-an-appointment/appointments/new';"" class="btn" value="BOOK AN APPOINTMENT">
                                                                                                                                                     
                      <div class="purchase">
                        {% unless product.available %}
                        <p>{{ 'products.product.sold_out_html' | t }}</p>
                        {% else %}
                        <button id="add-to-cart" class="btn add-to-cart" type="submit" name="add"><i class="fa fa-shopping-bag"></i>{{"products.product.add_to_cart"|t}}</button>                        
                        <div id="cart-animation" style="display:none">1</div>
                        {% endunless %}
                      </div>
                    </div>
                  </div>
                 
                </form>
                
               

                {% if settings.display_wishlist %}
                <div class="add-to-wishlist">
                  {% if product.available %}
                  {% if customer %}
                  {% include 'wish-list' %}
                  <input type="button">
                  {% else %}
                  <span class="non-user" data-toggle="tooltip" data-placement="right" title="{{ 'collections.product_item.wishlist_note' | t }}"><i class="fa fa-heart"></i>{{ 'collections.product_item.wishlist' | t }}</span>
                  {% endif %}
                  {% endif %}
                </div>
                {% endif %}

                {% if settings.social_sharing_products %}
                <div class="supports-fontface">
                  {% include 'social-sharing' %}
                </div>
                {% endif %}
              </div>              
            </div>
            {% if settings.display_tab %}
            <div id="tabs-information" class="col-md-12" >
              <div class="col-md-12 tabs-title">
                <ul class="nav nav-tabs tabs-left sideways">
                  {% if settings.product_tab_desc %}<li class="active"><a href="#desc" data-toggle="tab">{{ settings.product_tab_desc_title }}</a></li>{% endif %}
                  {% if settings.display_tags %}<li><a href="#tags" data-toggle="tab">{{ settings.product_tab_tags_title }}</a></li>{% endif %}
                  {% if settings.product_tab_delivery %}<li><a href="#delivery" data-toggle="tab">{{ settings.product_tab_delivery_title }}</a></li>{% endif %}
                  {% if settings.product_tab_warranty %}<li><a href="#warranty" data-toggle="tab">{{ settings.product_tab_warranty_title }}</a></li>{% endif %}
                  {% if settings.product_tab_payment %}<li><a href="#payment" data-toggle="tab">{{ settings.product_tab_payment_title }}</a></li>{% endif %}
                </ul>
              </div>
              <div class="col-md-12 tabs-content">
                <div class="tab-content">
                  {% if settings.product_tab_desc %}<div class="tab-pane active" id="desc">{{ product.description }}</div>{% endif %}
                  {% if settings.display_tags %}<div class="tab-pane fade " id="tags">{% include 'product_tags' %}</div>{% endif %}
                  {% if settings.product_tab_delivery %}<div class="tab-pane fade " id="delivery">{{settings.product_tab_delivery_content}}</div>{% endif %}
                  {% if settings.product_tab_warranty %}<div class="tab-pane fade " id="warranty">{{settings.product_tab_warranty_content}}</div>{% endif %}
                  {% if settings.product_tab_payment %}<div class="tab-pane fade " id="payment">{{settings.product_tab_payment_content}}</div>{% endif %}
                </div>
              </div>
            </div>
            {% endif %}

            {% if settings.show_related_products %}
            {% include 'products_relatedpro' %}
            {% endif %}

            {% if settings.product_customerreview %}
            <div id="customer_review">  
              <!--div class="preview_title">{{ settings.product_customerreview_title }}</div-->
              <div class="preview_content"><div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div></div>
            </div>
            {% endif%}

          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<div style="display:none" id="preloading">
  {% for image in product.images offset: 1 %}
  {{ image | product_img_url: '1024x1024' | img_tag }}
  {% endfor %}
</div>

<script>
  var selectCallback = function(variant, selector) {
    if (variant && variant.featured_image) {
      var newImage = variant.featured_image; // New image object.
      var mainImageDomEl = jQuery('.featured img')[0]; // DOM element of main image we need to swap.
      Shopify.Image.switchImage(newImage, mainImageDomEl, switchImage); // Define switchImage (the callback) in your theme's JavaScript file.
    }
    if (variant && variant.available) {
      jQuery('#add-to-cart').removeAttr('disabled').removeClass('disabled'); // remove unavailable class from add-to-cart button, and re-enable button
      if(variant.price < variant.compare_at_price){
        jQuery('#price-preview').html(Shopify.formatMoney(variant.price, "Rent it {{ shop.money_format }}") + " <del>" +"Retail" + " Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}") + "</del>");
      } else {
        jQuery('#price-preview').html(Shopify.formatMoney(variant.price, "{{ shop.money_format }}"));
      }
    } else {
      jQuery('#add-to-cart').addClass('disabled').attr('disabled', 'disabled'); // set add-to-cart button to unavailable class and disable button
      var message = variant ? {{ 'products.product.sold_out_html' | t | json }} : {{ 'products.product.unavailable_html' | t | json }};
      jQuery('#price-preview').html(message);
    }
  };

  jQuery(document).ready(function($){
          
    $('#gallery-images div.image').on('click', function() {
      var $this = $(this);
      var parent = $this.parents('#gallery-images');
      parent.find('.image').removeClass('active');
      $this.addClass('active');
    });
    new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback, enableHistoryState: true });
	{% if product.available and product.options.size > 1 %}
      Shopify.linkOptionSelectors({{ product | json }});
    {% endif %}
    // 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 | escape }}</label>');
    {% endif %}

  });
  </script>

 

0 Likes
Shopify Expert
2678 65 668

Hi Nick! 

I'd rewrite this piece of code 

  if(variant.price < variant.compare_at_price){
    jQuery('#price-preview').html(Shopify.formatMoney(variant.price, "Rent it {{ shop.money_format }}") + " <del>" +"Retail" + " Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}") + "</del>");
  } else {
    jQuery('#price-preview').html(Shopify.formatMoney(variant.price, "{{ shop.money_format }}"));
  }

to look like this:

  if( variant.price < variant.compare_at_price){
    jQuery('#price-preview')
      .html( 
        "Rent " 
        + Shopify.formatMoney(variant.price, "{{ shop.money_format }}") 
        + " <del>Retail " 
        +  Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}") 
        + "</del>"
        );
  } else {
    jQuery('#price-preview')
      .html( 
        "Rent " 
        + Shopify.formatMoney(variant.price, "{{ shop.money_format }}")
        );
  }

And also this piece:

<div class="purchase">
 <ul> <h2 class="price" id="price-preview">Rent {{ variant.price | money }}{% if variant.price < variant.compare_at_price %} </ul> <del>{{ variant.compare_at_price | money }}</del>{% endif %}</h2>
</div>

To look like this:

<div class="purchase">
	 <style>
	    .purchase del { font-size: 0.7em; }
	</style>
    <h2 class="price" id="price-preview">
    	Rent {{ variant.price | money }}
    	{% if variant.price < variant.compare_at_price %}
    		<del>
    			{{ variant.compare_at_price | money }}
    		</del>
		{% endif %}
    </h2>
</div>

 

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

That worked perfectly, thanks so much Tim! :)

0 Likes
Shopify Partner
1 0 0

Hey Tim, glad to meet you!

I'm running into a similar issue to... I have two variants of a product with different prices but only the first variant's price appears on the product page when toggling between variants (page link here: https://tudoparatodos.store/collections/acessorios-pessoais-1/products/smart-backpack-mochila-inteli...)

I've pasted my product.liquid template code below, can you help me?

Thanks'o much!


{%- assign on_sale = false -%}
{%- if product.compare_at_price > product.price -%}
{%- assign on_sale = true -%}
{%- endif -%}

{%- assign sold_out = true -%}
{%- if product.available -%}
{%- assign sold_out = false -%}
{%- endif -%}

{%- assign current_variant = product.selected_or_first_available_variant -%}
<div class="main-content-wrap section-ptb product-details-page product-details"> 
  <div class="container">
    <div class="row">
      {% if section.settings.product_style_handle == 'style_1' %}
      <div class="col-xl-6 col-lg-7 col-md-6">
        <div class="product-details-images">
          <div class="product_details_container">
            <div class="product_big_images-right">
              <div class="portfolio-full-image tab-content">
                <div class="featured-image">     
                  <div class="" id="ProductPhoto">
                    {%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
                    <img id="ProductPhotoImg" {% if section.settings.product_zoom_enable %}class="product-zoom"{% endif %}
                         src="{{ featured_image | img_url: '1024x1024' }}" alt="{{ featured_image.alt | escape }}"
                         data-zoom-image="{{ featured_image | img_url: '1024x1024' }}">
                  </div>
                  <div class="product-badge">
                    {%- include 'product-badge' -%}
                  </div>
                </div>
              </div>
            </div> 
            {%- if product.images.size > 1 -%}
            <div id="ProductThumbs" class="product_small_images-left vartical-product-active">
              {% for image in product.images %}
              <a class="product-single__thumbnail {% if forloop.fast %}active{% endif %}" href="{{ image.src | img_url: '1024x1024' }}"
                 data-image="{{ image.src | img_url: '1024x1024' }}" data-zoom-image="{{ image.src | img_url: '1024x1024' }}" data-image-id="{{ image.id }}">
                <img src="{{ image.src | img_url: '120x138' }}" alt="{{ image.alt | escape }}">
              </a>
              {% endfor %}
            </div>
            {%- endif -%}
          </div>   
        </div>
      </div>
      {% elsif section.settings.product_style_handle == 'style_2' %}
      <div class="col-xl-5 col-lg-7 col-md-6">
        <div class="product-details-images">
          <div class="product_details_container">
            <!-- product_big_images start -->
            <div class="product_big_images-top">
              <div class="portfolio-full-image">            
                <div class="product-image-position" id="ProductPhoto">
                  {%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
                  <img id="ProductPhotoImg" {% if section.settings.product_zoom_enable %}class="product-zoom"{% endif %}
                       src="{{ featured_image | img_url: '540x540', crop: 'center' }}" alt="{{ featured_image.alt | escape }}"
                       data-zoom-image="{{ featured_image | img_url: '1024x1024' }}">
                </div>
                <div class="product-badge">
                  {%- include 'product-badge' -%}
                </div>
              </div>
            </div>
            <!-- product_big_images end -->
            <!-- Start Small images -->
            <ul class="product_small_images-bottom horizantal-product-active" id="ProductThumbs">
              {% for image in product.images %}
              <li role="presentation" class="pot-small-img {% if forloop.fast %}active{% endif %}">
                <a class="product-single__thumbnail {% if forloop.fast %}active{% endif %}" href="{{ image.src | img_url: '1024x1024' }}"
                   data-image="{{ image.src | img_url: '1024x1024' }}" data-zoom-image="{{ image.src | img_url: '1024x1024' }}" data-image-id="{{ image.id }}">
                  <img src="{{ image.src | img_url: '120x125', crop: 'center' }}" alt="{{ image.alt | escape }}">
                </a>
              </li>
              {% endfor %}
            </ul>
            <!-- End Small images -->
          </div>
        </div>
      </div>
      {% endif %}
      <div class="col-xl-6 col-lg-5 col-md-6">
        <form action="/cart/add" method="post" enctype="multipart/form-data" id="add-item-form">
          <div class="product_details_info">
            <h2>{{ product.title }}</h2>
            {%- if current_variant.sku.size > 0 and section.settings.product_sku_enable -%}
            <div class="product-sku">{{ section.settings.product_sku_title }} <span class="variant-sku">{{ current_variant.sku }}</span></div>
            {%- endif -%}
           
            {%- if section.settings.product_review_enable -%}
            <div class="product-ratting">
              <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
            </div>
            {%- endif -%}
           
            <ul class="pro_dtl_prize product-price">
              {%- if product.compare_at_price_max > product.price -%}
              <li class="old_prize">{{ product.compare_at_price | money }}</li>
              {%- endif -%}
              <li>{{ product.price | money }}</li>
            </ul>
           
           
            {%- if section.settings.short_description_enable -%}
            <div class="product-description pro_details">
              {%- if product.description contains '[short_description]' -%}
              {%- assign short_description_first = product.description | split:'[/short_description]' | first -%}
              {%- assign short_description_final = short_description_first | split:'[short_description]' | last -%}
              {{ short_description_final }}
              {%- else -%}
              {{ product.description | strip_html | truncatewords: 35 | split: '[short_description]' | first | split: '[product_description]' | first | split: '[new_products]' | first | split: '[product_video]' | first | split: '[affiliate_link]' | first }}
              {%- endif -%}
            </div>
            {%- endif -%}

           
            {%- comment -%}
            {%- if section.settings.product_inventory_enable -%}
            <div class="product-inventory">
              <span>{{ section.settings.availability_title }}</span>
              {% if product.variants.first.inventory_management == "shopify" and product.variants.first.inventory_quantity > 0 %}
              <span id="variant-inventory">{{ product.variants.first.inventory_quantity }} {{ section.settings.in_stock_title }}</span>
              {% elsif product.available %}
              {{ section.settings.in_stock_title }}
              {% else %}
              {{ section.settings.out_of_stock_title }}
              {% endif %}
            </div>
            {%- endif -%}
            {%- endcomment -%}

            {%- unless section.settings.product_variant_handle == 'product_variant_without_option' -%}
            {% include 'product-swatch-variant' %}
            {%- endunless -%}
           
            <div class="product-actions">
              {%- if product.description contains '[affiliate_link]' -%}
              {%- include 'affiliate-product-cart-action' -%}
              {%- else -%}
              <div class="product-quantity-action">
                <div class="prodict-statas"><span>Quantity :</span></div>
                <div class="product-quantity">
                  <form action="#">
                    <div class="product-quantity">
                      <div class="cart-plus-minus">
                        <input name="quantity" value="1" type="number">
                      </div>
                    </div>
                  </form>
                </div>
              </div>
              <div class="cart-and-wishlist-btn">
                {% include 'product-cart-action' %}
                {%- if settings.wishlist_enable -%}
                <div class="wishlist-action">
                  {% include 'wishlist-button' %}
                </div>
                {%- endif -%}
                {%- endif -%}
              </div>
            </div>

            {% if section.settings.social_share_enable %}
            {% include 'social-share' %}
            {% endif %}
          </div>
        </form>
      </div>
    </div>
  </div>
</div>


{% schema %}
  {
    "name": "Product",
    "settings": [

  {
          "type": "radio",
          "id": "product_style_handle",
          "label": "Product Style",
    "options":[
    {
                    "label": "Left Thumbnail",
                    "value": "style_1"
                },
    {
                    "label": "Right Thumbnail",
                    "value": "style_2"
                }
   ],
   "default": "style_1"
       },


  {
          "type": "header",
          "content": "Product Zoom"
       },
  {
          "type": "checkbox",
          "id": "product_zoom_enable",
          "label": "Show Product Zoom",
          "default": true  
       },

  {
          "type": "header",
          "content": "Product SKU"
       },
  {
          "type": "checkbox",
          "id": "product_sku_enable",
          "label": "Show Product SKU",
          "default": true  
       },
  {
          "type": "text",
          "id": "product_sku_title",
          "label": "SKU Title",
          "default": "SKU:"  
       },
  {
          "type": "header",
          "content": "Product Review"
       },
  {
          "type": "checkbox",
          "id": "product_review_enable",
          "label": "Show Product Review",
          "default": true  
       },
  {
          "type": "header",
          "content": "Product Inventory"
       },
  {
          "type": "checkbox",
          "id": "product_inventory_enable",
          "label": "Show Product Inventory",
          "default": true  
       },
  {
          "type": "text",
          "id": "availability_title",
          "label": "Inventory Title",
          "default": "Availability:"  
       },
  {
          "type": "header",
          "content": "Product Short Description"
       },
  {
          "type": "checkbox",
          "id": "short_description_enable",
          "label": "Show Short Description",
          "default": true  
       },
  {
          "type": "header",
          "content": "Product Variant"
       },
  {
          "type": "radio",
          "id": "product_variant_handle",
          "label": "Variant Option",
    "options":[
    {
                    "label": "Select Option",
                    "value": "product_variant_select_option"
                },
                {
                    "label": "Swatch Option",
                    "value": "product_variant_swatch_option"
                },
                {
                    "label": "Without Variant",
                    "value": "product_variant_without_option"
                }
   ],
   "default": "product_variant_swatch_option"
       },
  {
          "type": "header",
          "content": "Social Option"
       },
  {
          "type": "checkbox",
          "id": "social_share_enable",
          "label": "Show Social Share",
          "default": true
       },
  {
          "type": "text",
          "id": "social_share_title",
          "label": "Social Share Title",
          "default": "Share:"
       }
 ]
  }
{% endschema %}


<script>
  var selectCallback = function(variant, selector) {
    timber.productPage({
      money_format: "{{ shop.money_format }}",
      variant: variant,
      selector: selector
    });
   
    if (variant) {
     
      // Current variant select+
      var form = jQuery('#' + selector.domIdPrefix).closest('form');
      for (var i=0,length=variant.options.length; i<length; i++) {
        var val = variant.options[i].replace(/'/g,"&#039;");
        var radioButton = form.find(".swatch[data-option-index='" + i + "'] :radio[value='" + val +"']");
        if (radioButton.size()) {
          radioButton.get(0).checked = true;
        }
      }

      // Current sku pass
      $('.variant-sku').text(variant.sku);
    }else {
      $('.variant-sku').empty();
    }
   
   
    {%- comment -%}
    // in stock / out stock product start
    if (variant) {
      if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue") {
        if (variant.inventory_quantity > 0) {
          jQuery('#variant-inventory').text(variant.inventory_quantity + ' in stock');
        } else {
          jQuery('#variant-inventory').text("Out of stock");
        }
      } else {
        jQuery('#variant-inventory').text("In stock");
      }
    } else {
      jQuery('#variant-inventory').text("");
    }
    {%- endcomment -%} 
   
   
    {%- if section.settings.product_zoom_enable -%}
    // product image zoom with variant
    if (variant && variant.featured_image) {
      jQuery('#ProductThumbs a[data-image-id="' + variant.featured_image.id + '"]').trigger('click');
    }
    {%- endif -%}

  };
  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 %}
  });
 
 
  {%- if section.settings.product_zoom_enable -%}
  function productZoom(){
    $(".product-zoom").elevateZoom({
      gallery: 'ProductThumbs',
      galleryActiveClass: "active",
      zoomType: "inner",
      cursor: "crosshair"
    });
  };
  function productZoomDisable(){
    if( $(window).width() < 767 ) {
      $('.zoomContainer').remove();
      $(".product-zoom").removeData('elevateZoom');
      $(".product-zoom").removeData('zoomImage');
    } else {
      productZoom();
    }
  };

  productZoomDisable();

  $(window).resize(function() {
    productZoomDisable();
  });
  {%- endif -%}
</script>

0 Likes
New Member
1 0 0

Hi Tim -

I came across this feed looking for an answer regarding Shopify product pages, quantity & pricing.

I would like the price to change when the quantity is changed to offer a discount. 

I've been searching for an app that would do this without any luck.

Can you assist in any help?

www.foodvacbags.com

Current discount pricing app is Discounted Pricing by Booster Apps but we've have a few other without much luck as the discounts only show up AFTER they've added to the cart...which means our customers would have to figure out the math in their head when it be great to just show them the discounts to encourage them to add to cart/buy.

Thank you!! 

Angie

angie@foodvacbags.com

0 Likes
New Member
1 0 0

I have the same issue. Here is my product.liquid extract. Someone help please. I can't seem so find the error.

{% if settings.product_page_sidebar == "left_sidebar" or settings.product_page_sidebar == "right_sidebar" %}
{% assign mid_width = "grid__item wide--four-fifths post-large--three-quarters large--three-quarters" %}
{% else %}
{% assign mid_width = "grid__item" %}
{% endif %}

{% if settings.product_page_sidebar == "left_sidebar" %}
<div class="grid__item wide--one-fifth post-large--one-quarter large--one-quarter">
{% include 'product-sidebar' %}
</div>
{% endif %}
<div class="{{ mid_width }}">
<div itemscope itemtype="http://schema.org/Product" class="single-product-layout-type-1">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: '850x' }}">
<div class="product-single">

<div class="grid__item wide--one-half post-large--one-half large--one-half product-img-box">
{% if product.images.size == 0 %}
<div class="product-photo-container">
<img src="{{ '' | product_img_url: '850x' }}" alt="">
</div>
{% else %}
<div class="product-photo-container">
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
<a href="{{ featured_image | img_url: 'master' }}" >
<img id="product-featured-image" src="{{ featured_image | img_url: '850x' }}" alt="{{ featured_image.alt | escape }}" data-zoom-image="{{ featured_image.src | img_url: 'master' }}"/>
</a>
</div>

{% if product.images.size > 0 %}
<div class="more-view-wrapper {% if product.images.size == 1 %} hidden {% endif %} more-view-wrapper-owlslider ">
<ul id="ProductThumbs" class="product-photo-thumbs owl-carousel owl-theme">
{% for image in product.images %}
<li class="grid-item">
<a href="javascript&colon;void(0)" data-image="{{ image.src | product_img_url: '850x' }}" data-zoom-image="{{ image.src | product_img_url: 'master' }}">
<img src="{{ image.src | product_img_url: 'medium' }}" alt="{{ image.alt | escape }}">
</a>
</li>
{% endfor %}
</ul>
<div class="single-page-owl-carousel"></div>
</div>
{% endif %}
{%- if product.metafields.product.video -%}
<div class="p-video">
<a href="{{ product.metafields.product.video }}" class="jas-popup-url" data-effect="mfp-move-from-top"><i class="fa fa-video-camera" aria-hidden="true"></i> {{ 'products.product.video' | t }} </a>
</div>
{%- endif -%}
{% endif %}
</div>

<div class="product_single_detail_section grid__item wide--one-half post-large--one-half large--one-half">
<h2 itemprop="name" class="product-single__title">{{ product.title }}</h2>
{% if collection %}
{% if collection.previous_product or collection.next_product %}
<p class="product-arrows">
{% if collection.previous_product %}
{% capture prev_url %}{{ collection.previous_product}}#content{% endcapture %}
<span class="left">
<a href="{{ prev_url }}"> <i class="zmdi zmdi-chevron-left"></i></a>
</span>
{% endif %}

{% if collection.next_product %}
{% capture next_url %}{{ collection.next_product}}#content{% endcapture %}
<span class="right">
<a href="{{ next_url }}"> <i class="zmdi zmdi-chevron-right"></i></a>
</span>
{% endif %}
</p>
{% endif %}
{% endif %}
<div class="product_single_price">
<div class="product_price">
<div class="grid-link__org_price" id="ProductPrice">
<span>{{ product.price | money }}</span>
</div>
</div>
{% if product.compare_at_price > product.price %}
<del class="grid-link__sale_price" id="ComparePrice">
<span>{{ product.compare_at_price | money }}</span></del>
{% endif %}
</div>
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
{% if settings.short_desc %}
<div class="product-description rte" itemprop="description">
{{ product.description | strip_html | truncatewords: 50 }}
</div>
{% endif %}
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
{% assign variant = product.selected_or_first_available_variant %}
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

{% if settings.count_down_enable and settings.count_down_collections %}
{% assign dealTime = settings.home_productdeal_time | split: ' ' | join: ' ' | split: ' ' %}
{% include 'deal-snippet' %}
{% endif %}

{% form 'product', product, id: "AddToCartForm", class: "product-form" %}
{% assign hide_default_title = false %}
{% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
{% assign hide_default_title = true %}
{% endif %}

<div class="selector-wrapper-secton" {% if hide_default_title %} style="display:none;"{% endif %}>
{% if settings.enable_color_swatch %}
{% for option in product.options %}
{% include 'swatch' with option %}
{% endfor %}
{% endif %}
<select name="id" id="productSelect" class="{% if hide_default_title %} product-single__variants {% endif %}" >
{% for variant in product.variants %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }}</option>
{% endfor %}
</select>
</div>
<div class="product-single__quantity {% unless settings.product_quantity_enable %} hide {% endunless %}">
<div class="quantity-box-section">
<label>{{ 'products.product.quantity' | t }}</label>
{% include 'qty' %}
</div>
</div>
<div class="product-infor">
{% if settings.display_availability or settings.display_product_type %}

{% if settings.display_vendor_type %}
<p class="product-vendor">
<label>{{ 'products.product.product_vendor' | t }}</label>
<span>{{ product.vendor }}</span>
</p>
{% endif %}
{% if settings.display_product_type %}
<p class="product-type">
<label>{{ 'products.product.product_type' | t }} </label>
<span>{{ product.type }}</span>
</p>
{% endif %}
{% if settings.display_availability %}
<p class="product-inventory" id="product-inventory">
<label>{{ 'products.product.availability' | t }} </label>
<span>
{% if product.selected_or_first_available_variant.inventory_management %}
{% assign first_inventory = product.selected_or_first_available_variant.inventory_quantity %}
{% if first_inventory > 0 %}
{{first_inventory}} {{ 'products.product.in_stock' | t }}
{% else %}
{{ 'products.product.out_of_stock' | t }}
{% endif %}
{% else %}
{{ 'products.product.many_in_stock' | t }}
{% endif %}
</span>
</p>
{% endif %}
{% endif %}
</div>
<button type="submit" name="add" id="AddToCart" class="btn">
<i class="fa fa-cart-plus" aria-hidden="true"></i><span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% if settings.payment_button %}
{{ form | payment_button }}
{% endif %}
{% endform %}
</div>
{% if settings.enable_wishlist %}
{% include 'wishlist-product' %}
{% endif %}


{% if settings.social_sharing_products %}
<div class="share_this_btn">
{% include 'addthis' %}
{% endif %}
</div>
</div>
</div>
<div class="dt-sc-hr-invisible-large"></div>
<div class="dt-sc-tabs-container">
<ul class="dt-sc-tabs">
{% if settings.product_tab1 %}<li><a class="btn" href="#"> {{ settings.product_tab1_heading }} </a></li>{% endif %}
{% if settings.product_tab2 %}<li><a class="btn" href="#"> {{ settings.product_tab2_heading }} </a></li>{% endif %}
{% if settings.product_tab3 %}<li><a class="btn" href="#"> {{ settings.product_tab3_heading }} </a></li>{% endif %}
</ul>
{% if settings.product_tab1 %}
<div class="dt-sc-tabs-content" id="desc_pro">
<p>{{ product.description }}</p>
</div>
{% endif %}
{% if settings.product_tab2 %}
<div class="dt-sc-tabs-content">
<div class="commentlist">
<div class="comment-text">
<div class="rating-review">
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
</div>
</div>
</div>
</div>
{% endif %}
{% if settings.product_tab3 %}
<div class="dt-sc-tabs-content">
<p>{{ pages[settings.product_tab3_page].content }}</p>
</div>
{% endif %}
</div>

{% if settings.product_related_enable %}
{% include 'related-products' %}
{% endif %}
<div class="dt-sc-hr-invisible-large"></div>
{% if settings.display_recently_viewed_products %}
{% include 'recently-viewed-products' %}
{% endif %}
</div>
</div>
{% if settings.product_page_sidebar == "right_sidebar" %}
<div class="grid__item wide--one-fifth post-large--one-quarter large--one-quarter">
{% include 'product-sidebar' %}
</div>
{% endif %}
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
{{ 'jquery.fancybox.js' | asset_url | script_tag }}

<script>
var selectCallback = function(variant, selector) {
timber.productPage({
money_format: "{{ shop.money_format }}",
variant: variant,
selector: selector,
translations: {
add_to_cart : "{{ 'products.product.add_to_cart' | t }}",
sold_out : "{{ 'products.product.sold_out' | t }}",
unavailable : "{{ 'products.product.unavailable' | t }}"
}
});
};

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


{% if settings.enable_linked_option %}
{% if product.available and product.options.size > 1 %}
Shopify.linkOptionSelectors({{ product | json }});
{% endif %}
{% endif %}

// 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();
$('.selector-wrapper-secton').hide();
{% endif %}

// Auto-select first available variant on page load. Otherwise the product looks sold out.
{% assign found_one_in_stock = false %}
{% for variant in product.variants %}
{% if variant.available and found_one_in_stock == false %}
{% assign found_one_in_stock = true %}
{% for option in product.options %}
$('.single-option-selector:eq({{ forloop.index0 }})').val({{ variant.options[forloop.index0] | json }}).trigger('change');
{% endfor %}
{% endif %}
{% endfor %}


$('.product-single .single-option-selector').wrap('<div class="selector-arrow">');



});


</script>

0 Likes