How can I fix product variant display issues on my ecommerce website?

Technical Q&A
1

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

2

@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.

3

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

4

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-themes 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
variant.jpg500×339 10.2 KB

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

Thank You

5

@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.

6

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

7

@chadm320

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

8

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

9

@HaiSycamore

Let me know your store URL and theme name.

10

I able to solve it. Thank you.

11

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.

1 Like
12

Hello Van,

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

13

@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.

14

@AvidBrio

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

15

Please someone that have solve this issue please post the solution