Product variants not working properly.

chadm320
New Member
5 0 0

Hi all,

I hope someone here can help me out. Quick rundown on my problem I'm trying to display the variant sku above the price and add a few other sections that change when a variant is selected (instruction download link/different meta fields.) I haven't had any luck.

Page link I'm trying to make changes to: https://auto-color-staging.myshopify.com/products/restoration-shop-custom-paint-a

I am using Theme Kit as my base theme. Code examples:

 

product.liquid

<!-- Variant select. -->
    <label for="product-select">Choose your {{ product.title }}</label>
    <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 %}>{{ variant.title }} - {{ variant.price | money }} - </option>
      {% endfor %}
    </select>

theme.liquid

{% if template contains 'product' %}
    {{ 'option_selection.js' | shopify_asset_url | script_tag }}
    <script type="text/javascript">
      (function($) {
         var onVariantSelected = function(variant, selector) {
          // Update price display.
          var formattedPrice = Shopify.formatMoney(variant.price, "");
          $('#product-price').text(formattedPrice);
          // Enable or disable the Add to Cart button.
          $('#add-to-cart').attr('disabled', variant.available ? null : 'disabled');
          // Update the featured image.
          if(variant.featured_image) {
            var sizedImageUrl = Shopify.Image.getSizedImageUrl(variant.featured_image.src, 'master');
            $('#featured-image').attr('src', sizedImageUrl);
           
          }
        };
        var optionSelectors = new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: onVariantSelected, enableHistoryState: true });
        // Create an event listener to set a specific variant when clicking on image thumbnails.
        $(document).on('click', '[data-change-variant]', function(e) {
          e.preventDefault();
          optionSelectors.selectVariant($(this).data('changeVariant'));
        });
      }(jQuery));
    </script>

I'm out of ideas on how the variants are working or how to add any new ones, so any help, hints or documentation on adding additional variant data would be so helpful.

 

Thank You

Replies 14 (14)

Akshay_V
Shopify Partner
438 16 58

@chadm320 

I have checked the attached link and variant change activity works properly on my device so can you explain the issue with the screenshot.

Akshay Vaghasiya | Email: hello@lavitastic.com | Skype: akshayvaghasiya84
Want to modify theme or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Buy me a coffee PayPal
chadm320
New Member
5 0 0

Thank You for the response. I have re-added the sku line of code before the price.

I am hoping to get the variant sku number to update as well. I'm not sure what to add to the JS script in my theme.liquid to trigger the sku change.

I've tried variations on the tutorial here: https://help.shopify.com/en/themes/customization/products/features/show-sku-numbers#non-sectioned-th... with no luck.

 

product.liquid

 <div class="cell large-6 medium-12 small-12 branding">
        <h2 class="product-feature-block-header"></h2>
        <form action="/cart/add" method="post">
{%- assign current_variant = product.selected_or_first_available_variant -%} <span>{{ current_variant.sku }}</span>
<!-- Price --> <h3 id="product-price">{{ product.price_min | money }} to {{ product.price_max | money }}</h3> <!-- Variant select. --> <label for="product-select">Choose Your Paint Type and Size</label> <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 %}> {{ variant.title }} - {{ variant.price | money }}
</option> {% endfor %} </select>

theme.liquid

{% if template contains 'product' %}
    {{ 'option_selection.js' | shopify_asset_url | script_tag }}
    <script type="text/javascript">
      (function($) {
         var onVariantSelected = function(variant, selector) {
          // Update price display.
          var formattedPrice = Shopify.formatMoney(variant.price, "");
          $('#product-price').text(formattedPrice);
          // Enable or disable the Add to Cart button.
          $('#add-to-cart').attr('disabled', variant.available ? null : 'disabled');
          // Update the featured image.
          if(variant.featured_image) {
            var sizedImageUrl = Shopify.Image.getSizedImageUrl(variant.featured_image.src, 'master');
            $('#featured-image').attr('src', sizedImageUrl);
            
          }
        };
        var optionSelectors = new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: onVariantSelected, enableHistoryState: true });
        // Create an event listener to set a specific variant when clicking on image thumbnails.
        $(document).on('click', '[data-change-variant]', function(e) {
          e.preventDefault();
          optionSelectors.selectVariant($(this).data('changeVariant'));
        });

      }(jQuery));

    </script>
    {% endif %}

 

Link to product page: https://auto-color-staging.myshopify.com/products/restoration-shop-custom-paint-a

 

Screenshot

variant.jpg

 

I hope this is feasible and you guys can help me out.

 

Thank You

Akshay_V
Shopify Partner
438 16 58

@chadm320 

I got your point you want to change SKU based on variant change. It is not important where you put code because variant change activity runs through Variant Callback and you have not any SKU related code in it. So please add script code into js file which you have attached here in your above message. If you need any help then let me know.

Akshay Vaghasiya | Email: hello@lavitastic.com | Skype: akshayvaghasiya84
Want to modify theme or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Buy me a coffee PayPal
chadm320
New Member
5 0 0

Hi Akshay,

Thank You for your help, I tried adding that JS code to what I have above and it didn't work. Do I need to create a separate theme.js.liquid file like in the tutorial?

 

Thank You   

Akshay_V
Shopify Partner
438 16 58

@chadm320 

No need to create a new js file for it. Please send a private message to me.

Akshay Vaghasiya | Email: hello@lavitastic.com | Skype: akshayvaghasiya84
Want to modify theme or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Buy me a coffee PayPal
HaiSycamore
Tourist
10 1 1

Can you sharethe solution? I'm also stuck on the same thing.

Akshay_V
Shopify Partner
438 16 58

@HaiSycamore 

Let me know your store URL and theme name.

Akshay Vaghasiya | Email: hello@lavitastic.com | Skype: akshayvaghasiya84
Want to modify theme or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Buy me a coffee PayPal
HaiSycamore
Tourist
10 1 1

I able to solve it. Thank you.

VanApp
Visitor
1 0 1

Hi, My store URL is www.vancouverapparel.ca and the theme is called "Debut".

I'm facing a similar problem with my product variants. The display product image does not change when we select different variants with sizes and colors on the dropdown list on the products page. Any help would be highly apreciated. Thankyou.

 

Rijad871
Visitor
2 0 0

Hello Van,

How did you manage to solve this problem currently facing it as well.

 

AvidBrio
Shopify Expert
295 17 29

@HaiSycamore   @VanApp  @Akshay_V  @chadm320  can you suggest to me on a same issue facing I am on debut theme product section.  when variant selected it has change URL - again I am referencing then variant  not showing 


Thanks in Advance.

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
Akshay_V
Shopify Partner
438 16 58

@AvidBrio 

Can you share your store URL and complete issue so I can check it from my end?

Akshay Vaghasiya | Email: hello@lavitastic.com | Skype: akshayvaghasiya84
Want to modify theme or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Buy me a coffee PayPal
Badrnyali
Visitor
2 0 1

Please someone that have solve this issue please post the solution

Qualitycheck
Shopify Expert
1449 114 233

working all right in my end please advise where i am wrong