Hide Variants Label on products

Highlighted
New Member
12 0 0

Hi,

I searched for it for a while now but i can't find a solution.

On my product page, I want to hide the variant labels.

For example: For the Size and Color dropdown menu, I only want to see the dropdown menu and not the dropdown labels.

The user see what the dropdowns are for because any option is always picked, so the label right before the dropdowns are not needed.

Any hints for me?

Something in this code what I didn't recognize?

{{ '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,
      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
    });

    // 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>

 

Thanks so far!

0 Likes
Shopify Partner
385 0 57

Hello Kersten,

Can we see a live example, as otherwise we helping blind?

Kasimir

"Good design is good business"
0 Likes
Highlighted
New Member
12 0 0

I want the labels of the dropdowns to disappear, I am very aware of changing the wrong, especially JS code. So far I modified everything myself, but at this point I'm stuck :(

please check the pictures for more information.

The "label" should be it... but remobing it doesn't help.

 

Labels
Code

0 Likes
Highlighted
Shopify Partner
385 0 57

Hello Kersten,

Most probably that label is not coming from the actual JS but is rendered in the product.liquid. Again I cannot help you more without seeing a live example or knowing which theme you are using.

Kasimir

"Good design is good business"
0 Likes
Highlighted
New Member
12 0 0

My shop is not online yet. So i can not show any online example. The Codesnippet I attached is from product.liquid, I am using Minimal Theme.

If you show variants with Minimal Theme, you will always have Variant labels.

Didn't you see my screenshots?

0 Likes
Highlighted
Shopify Partner
385 0 57

Hello Kersten,

As this theme uses option_selector.js as default, it adds the label.

Easiest way to go around this is to add some css, place this on the bottom of theme.scss.liquid

.product-single {
  .selector-wrapper {
    label {
      display: none;
    }
  }
}

Hope this helps.

Kasimir

"Good design is good business"
1 Like
Highlighted
New Member
12 0 0

Thank you very much!
I will try this as soon as possible and reply again :)

0 Likes
Highlighted
New Member
12 0 0

Hello,

it worked perfectly!

Thank you very much.

Kersten

0 Likes
Highlighted
Excursionist
24 1 6

Yesssss!! Spent almost two hours trying to do this!! Thank you soooo much<3

0 Likes