How do I hide variants on the product page for an option with only one variant?

Tourist
19 0 1

Hi,

I'm setting up my store for Google Shopping but ran into a problem with products that have multiple size variants but only a single color variant.  Google Shopping requires a color for every product but I do not want the color option to display on my product page if it's the only color available.  My theme already accounts for this if there is only one option for the product but if there are multiple options (i.e. size and color), I can't figure out how to hide the color on the product page.

It's awkward to show the color option when it's the only color available and it most cases, this color is already noted in the product description.  Here is one such product that has a size option but is only available in one color:  http://giavan.com/products/3-tiered-crystal-flower-earrings

If I add the option "Color" to this product with a single variant "Silver", it will appear on the product page just below the size variant buttons.  I am hoping somebody can tell me how to hide the color option if there is only a single color variant, as is the case with this item.  Obviously, if there is more than one color variant, the swatches must be displayed.

Here is the code from product-form.liquid:

{% if product.options.size > 1 %}
  <div class="select">
    <select id="product-select-{{ product.id }}" name='id'>
      {% for variant in product.variants %}
      <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
      {% endfor %}
    </select>
  </div>
  {% for option in product.options %}
  {% include 'swatch' with option %}
  {% endfor %}
  {% elsif product.options.size == 1 and product.variants.size > 1 %}
  <div class="select">
    <label>{{ product.options[0] }}</label>
    <select id="product-select-{{ product.id }}" name='id'>
      {% for variant in product.variants %}
      <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
      {% endfor %}
    </select>
  </div>
  {% for option in product.options %}
  {% include 'swatch' with option %}
  {% endfor %}
  {% else %}
  <div class="product-variants"></div><!-- product variants -->  
  <input  type="hidden" id="{{ variant.id }}" name="id" data-sku="{{ variant.sku }}" value="{{ product.variants[0].id }}" />    
  {% endif %}

Thanks for your help!

-Rich

0 Likes
Shopify Staff (Retired)
Shopify Staff (Retired)
409 0 60

Hi Richard,

Britton here with the Shopify support team.

We found some code on github that was desinged to help with this situation: 

#### What you have
​
For the purpose of Google shopping or else, you may need to specify a style or color for a your product variants, even when all variants of that product come in **one** color and **one** style:
​
![Alt text](https://monosnap.com/file/PB5s1H4a7gNjmWdaVZ4L68er240ZeY.png)
​
^ so the Style and Color drop-downs only have one option in them.
​
#### What you want
​
Despite that, you want to only _show_ the Size drop-down on the product page:
​
![Alt text](https://monosnap.com/file/RQpA0QK1mr6HkIF7TUxPBJD0uAZXqj.png)
​
#### How to get that
​
Given that your theme uses option_selection.js aka product option drop-downs, locate the options builder `new Shopify.OptionSelectors(...`.
​
Right after that call, add this:
​
```javascript
jQuery('.selector-wrapper').filter(function() {
  return jQuery(this).find('option').size() === 1
}).hide();
```
​
If you want to hide and replace with the one value, use that instead:
​
```javascript
jQuery('.selector-wrapper').each(function() {
  if (jQuery(this).find('option').size() == 1) {
    var label = jQuery(this).find('label, select').hide();
    var select = jQuery(this).find('select').hide();
    jQuery(this).append('<p>' + label.text() + ': ' + select.val() + '</p>');    
  }
});
```

Make sure to add in that first recommended code snippet before the end of the OptionSelectors function. Mine looked like this when it was complete: https://screenshot.click/11-59-fw0jd_u9vks.jpg.

I hope that helps!

-Britton

Britton Shopify Guru
0 Likes
Tourist
19 0 1

Hi Britton,

Should I insert this code in the product-form.liquid file?  My site uses swatches, not dropdown menus, so I'm not sure this code is going to work.  Unfortunately I don't know if enough Javascript to adapt this code to my site.

I actually contacted the Theme developer and they told me it is not possible to make this change.  I would appreciate any additional help you can provide.

Thanks,

Rich

0 Likes
New Member
5 0 0

Hi Britton,

I am having the same issue as well. I don't have product-form.liquid though.

Here is what it looks like in my product.liquid:


        {% 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="item-opiton {% if hide_default_title %}{% unless product.available %}hidden{% endunless %}{% endif %}" >
          <div{% if hide_default_title %} class="hidden"{% endif %}>
            <select id="item-select" name="id" class="hidden">
              {% for variant in product.variants %}
              <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
              {% endfor %}
            </select>
          </div>
        </div>   

0 Likes
Excursionist
18 0 7

I, too ran into the issue of having the variant color showing up because of Google Shopping demands for jewelry to have a color listed. I do not have any product options other than the default product, so I didn't want the color showing up in a dropdown to possible make the customer think we had another option available.

As people mentioned above, I don't have option_selection.js either. 

I inserted the snippet in product.liquid. On mine, around line 139:

Original:

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>

 

Enter this:

 jQuery('.selector-wrapper').filter(function() {
  return jQuery(this).find('option').size() === 1
}).hide();

 

Newly Modified snippet:

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 %}
    
    jQuery('.selector-wrapper').filter(function() {
  return jQuery(this).find('option').size() === 1
}).hide();
    
  });
</script>

 

Stupid variant dropdown appears no more! Thought this would help people wanting to hide the options dropdown if they didn't actually offer any options on a product or products.

0 Likes
New Member
13 0 0

Hi Britton, could I use this code in my store to solve the same problem?

Please let me know as I need to beat Google's 1 Sep deadline for adding the colour attribute.

0 Likes
Shopify Partner
6 0 0

We are also experiencing this issue and this solution won't work with our theme.

I'm not sure if we can submit feature requests, but it woul dbe cool to be able to add a variant field and have a check box to prevent it being displayed.

OR

Just check and if all the values for a product are the same for all variants, again do not display it.

I can think of multiple ways this could be handled by the Shopify system.

Thanks

Simon

0 Likes
New Member
13 0 0

I have an open ticket on this subject but nil response yet - I can only assume that Shopify sometimes struggle to strike a balance between responding to feature requests and ensuring the 3rd party comunity thrives.

You get sympathy from the Gurus and then directed to invest $50 a month on a sledghammer Shopping Feed/Marketplace app to solve this simple problem.

Very frustrating and makes me feel like moving store host to demonstrate how important fixing issues like this is for the smaller stores.

0 Likes
Shopify Partner
6 0 0

Our theme ( Startup by Pixel Union ) does not have the same files, but I've been doing some searching and I'm guessing this is where we'd need to add the check for the number of options and hide if it only has one.

   ProductView.prototype.setupSelectors = function() {
      var enableHistory, i, len, ref, selector;
      enableHistory = !$(document.body).hasClass('template-index');
      new Shopify.OptionSelectors('product-select', {
        product: window.productJSON,
        onVariantSelected: this.selectCallback,
        enableHistoryState: enableHistory
      });
      ref = this.$('.selector-wrapper');
      for (i = 0, len = ref.length; i < len; i++) {
        selector = ref[i];
        $(selector).find('select').wrap('<div class="select-wrapper" />').parent().prepend('<div class="select-text" />');
      }
      return this.setOptionsVisibility();
    };

    ProductView.prototype.setOptionsVisibility = function() {
      var visibility;
      visibility = window.productJSON.available ? 'visible' : 'hidden';
      this.$('.product-options').addClass(visibility);
      return this.$('.product-quantity').addClass(visibility);
    };

I found this section inthe site.js file.

I tried contacting the theme developers and they don't seem to want to help saying that its too difficult.

If anyone has any advice, It would be greatly appreciated.

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
409 0 60

Hi Simon,

I think I've come up with a script that works for Startup! All you need to do is copy this directly to the very bottom of your product.liquid file: 

{% for option in product.options %}

{% assign downcaseOption = option | downcase %}
 
	{% if downcaseOption == "colour" and forloop.index == 1 %}
		{% assign optionNum = 1 %}
	{% elsif downcaseOption == "colour" and forloop.index == 2 %}
		{% assign optionNum = 2 %}
	{% elsif downcaseOption == "colour" and forloop.index == 3 %}
		{% assign optionNum = 3 %}
	{% endif %}
{% endfor %}

{% assign optionValue = optionNum | prepend:'option' %}

{% for variant in product.variants %}
	{% assign testString = testString | append: variant[optionValue] | append: ' ' %}
{% endfor %}

{% assign testArraySize = testString | split: ' ' | uniq | size %}

{% if testArraySize == 1 %}
	{% if optionNum == 1 %}
	<script>
      $(window).load(function() {
    	$('.selector-wrapper:first-of-type').hide();
  	  });
    </script>
	{% elsif optionNum == 2 %}
    <script>
      $(window).load(function() {
    	$('.selector-wrapper:nth-of-type(2)').hide();
  	  });
    </script>
	{% elsif optionNum == 3 %}
	<script>
      $(window).load(function() {
    	$('.selector-wrapper:last-of-type').hide();
  	  });
    </script>
	{% endif %}
{% endif %}

That should hide the colour option selector whenever your product only has a single value for colour regardless of which option value it is. It should be noted though that the code above will only work for colour spelled in the Canadian/UK way. For the American spelling simply replace all instances of "colour" with "color". As always, make sure to duplicate your theme to back it up before making any code changes.

For other themes this should still work as well! It's relatively theme independant as far as I can see. You would simply need to change this class "selector-wrapper" to the equivalent in your theme. If anyone needs help adapting it to another theme let me know and I'll have a crack at it :)

-Britton

Britton Shopify Guru
1 Like