Shopify Theme: Hide Dropdown if Only One Variant Exists

I was working with a friend on his Shopify store and think others may find our results useful.

Problem:

Recently take5drink.com started offering just one product size: the 12-pack. Their Shopify theme was displaying the size drop-down regardless, so we needed a way to hide it when only one option is available.

Shopify Hide Variants Before and After

Solution:

We don’t want to physically remove the drop-down from the screen because it is used by the “Add to Cart” button. We simply want to hide it from the user. We can do that with a simple CSS class.

  hidden {
    display:none;
  }

Locate the variant drop-down, in our case it was located in index.liquid, but yours may be on product.liquid. Searching the template for “product.variants” is a good place to start. It will look something like this:

<label>Select Size:</label>
<select id="product-select" name="id">
  {% for variant in product.variants %}
    <option{% if variant == product.selected_or_first_available_variant %} selected{% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">
{{ variant.title }} - {{ variant.price | money }}
    </option>
  {% endfor %}
</select>

We want to hide the label and the select box when there is only one product variant. The solution is to wrap the code in a div, with a conditional hidden class.

<div class="{% if product.variants.size == 1 %}hidden{% endif %}">
  <label>Select Size:</label>
  <select id="product-select" name="id">
  {% for variant in product.variants %}
    <option{% if variant == product.selected_or_first_available_variant %} selected{% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">
      {{ variant.title }} - {{ variant.price | money }}
    </option>
  {% endfor %}
  </select>
</div>

What is going on?

  • Notice the bold text, our new div is now a container for both the label, and the select element. This way we can hide both in one operation.
  • The div element has a class attribute
  • We use the “if” control flow tag to check if the size of the product.variants collection is equal to 1. If it is, we add “hidden” to the div class. Otherwise, the div class is left blank.

Closing Note:

If Shopify theme customization is stressing you out, you should Take 5 and check out my friend’s shop: take5drink.com