Remove variant drop down selectors if it's only one variant

New Member
1 0 0

I'm trying to remove the drop down selectors on the product page where there is only one option in the drop down for example, a product might have a variant of colour 'Blue' but no other colours. In my example it will have other options such as size, material.

How do I hide the colour option but leave the other ones available?

Here is my product.liquid

{% include 'breadcrumb' %}

<div class="grid" itemscope itemtype=";
  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">

  <div class="grid-item large--two-fifths">
    <div class="grid">
      <div class="grid-item large--eleven-twelfths text-center">
        <div class="product-photo-container" id="productPhoto">
          {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
          <img id="productPhotoImg" src="{{ featured_image | img_url: 'large' }}" alt="{{ featured_image.alt | escape }}" {% if settings.product_image_zoom_enable %} data-zoom="{{ featured_image | img_url: '1024x1024' }}"{% endif %}>
        </div>
        {% if product.images.size > 1 %}
          <ul class="product-photo-thumbs grid-uniform" id="productThumbs">

            {% for image in product.images %}
              <li class="grid-item medium-down--one-quarter large--one-quarter">
                <a href="{{ image.src | img_url: 'large' }}" class="product-photo-thumb">
                  <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
                </a>
              </li>
            {% endfor %}

          </ul>
        {% endif %}

      </div>
    </div>

  </div>

  <div class="grid-item large--three-fifths">

    <h2 itemprop="name">{{ product.title }}</h2>
<span class="variant-sku"></span>
    <div itemprop="offers" itemscope itemtype=";

      {% assign variant = product.selected_or_first_available_variant %}

      <meta itemprop="priceCurrency" content="{{ shop.currency }}">
      <meta itemprop="price" content="{{ variant.price | money }}">

      {% if settings.product_vendor_enable %}
        <p class="product-meta" itemprop="brand">{{ product.vendor }}</p>
      {% endif %}

      <ul class="inline-list product-meta">
        <li>
          <span id="productPrice" class="h1">
            {% include 'price' with variant.price %}
          </span>
        </li>
        {% if product.compare_at_price_max > product.price %}
        <li>
          <span id="comparePrice" class="sale-tag large">
            {% assign compare_price = variant.compare_at_price %}
            {% assign product_price = variant.price %}
            {% include 'price-sale' %}
          </span>
        </li>
        {% endif %}
        {% if settings.product_reviews_enable %}
          <li class="product-meta--review">
            <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
          </li>
        {% endif %}
      </ul>

      <hr id="variantBreak" class="hr--clear hr--small">

      <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

      <form action="/cart/add" method="post" enctype="multipart/form-data" id="addToCartForm">
        <select name="id" id="productSelect" class="product-variants">
          {% for variant in product.variants %}
            {% if variant.available %}

              <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

            {% else %}
              <option disabled="disabled">
                {{ variant.title }} - {{ 'products.product.sold_out' | t }}
              </option>
            {% endif %}
          {% endfor %}
        </select>

        {% if settings.product_quantity_enable %}
          <label for="quantity" class="quantity-selector">{{ 'products.product.quantity' | t }}</label>
          <input type="number" id="quantity" name="quantity" value="1" min="1" class="quantity-selector">
        {% endif %}

        <button type="submit" name="add" id="addToCart" class="btn">
          <span class="icon icon-cart"></span>
          <span id="addToCartText">{{ 'products.product.add_to_cart' | t }}</span>
        </button>
        {% if settings.product_quantity_message %}
          <span id="variantQuantity" class="variant-quantity"></span>
        {% endif %}
      </form>

      <hr>

    </div>

    <div class="product-description rte" itemprop="description">
      {{ product.description }}
    </div>

    {% if settings.social_sharing_products %}
      {% include 'social-sharing' %}
    {% endif %}

  </div>
  
  
  
</div>

<div class="yotpo yotpo-main-widget"
    data-product-id="{{ product.id }}"
    data-name="{{ product.title | escape }}"
    data-url="{{ shop.url }}{{ product.url }}"
    data-image-url="{{ product.featured_image | product_img_url: "large" |replace: '?', '%3F' | replace: '&','%26'}}"
    data-description="{{ product.description | escape }}">
</div>
            

{% if settings.related_products_enable %}
  {% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half' %}
  {% include 'related-products' %}
{% endif %}

{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<script>

  // Pre-loading product images, to avoid a lag when a thumbnail is clicked, or
  // when a variant is selected that has a variant image.
  Shopify.Image.preload({{ product.images | json }}, 'large');

  var selectCallback = function(variant, selector) {
if (variant) {
  $('.variant-sku').text(variant.sku);
}
else {
  $('.variant-sku').empty();
}

    var $addToCart = $('#addToCart'),
        $productPrice = $('#productPrice'),
        $comparePrice = $('#comparePrice'),
        $variantQuantity = $('#variantQuantity'),
        $quantityElements = $('.quantity-selector, label + .js-qty'),
        $addToCartText = $('#addToCartText'),
        $featuredImage = $('#productPhotoImg');

    if (variant) {
      // Update variant image, if one is set
      // Call timber.switchImage function in shop.js
      if (variant.featured_image) {
        var newImg = variant.featured_image,
            el = $featuredImage[0];
        $(function() {
          Shopify.Image.switchImage(newImg, el, timber.switchImage);
        });
      }

      // Select a valid variant if available
      if (variant.available) {
        // We have a valid product variant, so enable the submit button
        $addToCart.removeClass('disabled').prop('disabled', false);
        $addToCartText.html({{ 'products.product.add_to_cart' | t | json }});

        // Show how many items are left, if below 10
        {% if settings.product_quantity_message %}
        if (variant.inventory_management) {
          if (variant.inventory_quantity < 10 && variant.inventory_quantity > 0) {
            $variantQuantity.html({{ 'products.product.only_left' | t: count: '1' | json }}.replace('1', variant.inventory_quantity)).addClass('is-visible');
          } else {
            $variantQuantity.removeClass('is-visible');
          }
        }
        else {
          $variantQuantity.removeClass('is-visible');
        }
        {% endif %}


        $quantityElements.show();
      } else {
        // Variant is sold out, disable the submit button
        $addToCart.addClass('disabled').prop('disabled', true);
        $addToCartText.html({{ 'products.product.sold_out' | t | json }});
        $variantQuantity.removeClass('is-visible');
        $quantityElements.hide();
      }

      // Regardless of stock, update the product price
      var customPriceFormat = timber.formatMoney( Shopify.formatMoney(variant.price, "{{ shop.money_format }}") );
      $productPrice.html(customPriceFormat);

      // Also update and show the product's compare price if necessary
      if ( variant.compare_at_price > variant.price ) {
        var priceSaving = timber.formatSaleTag( Shopify.formatMoney(variant.compare_at_price - variant.price, "{{ shop.money_format }}") );
        {% comment %}
        priceSaving += ' (' + ( (variant.compare_at_price - variant.price)*100/(variant.compare_at_price) ).toFixed(0) + '%)';
        {% endcomment %}
        $comparePrice.html({{ 'products.general.save_html' | t: saved_amount: '[$]' | json }}.replace('[$]', priceSaving)).show();
      } else {
        $comparePrice.hide();
      }

    } else {
      // The variant doesn't exist, disable submit button.
      // This may be an error or notice that a specific variant is not available.
      $addToCart.addClass('disabled').prop('disabled', true);
      $addToCartText.html({{ 'products.product.unavailable' | t | json }});
      $variantQuantity.removeClass('is-visible');
      $quantityElements.hide();
    }
  };

  jQuery(function($) {
    new Shopify.OptionSelectors('productSelect', {
      product: {{ product | json }},
      onVariantSelected: selectCallback,
      enableHistoryState: true
    });
{% if product.options.size == 1 %}
  {% for variant in product.variants %}
    {% unless variant.available %}
    jQuery('.single-option-selector option:eq({{ forloop.index0 }})').attr('disabled', 'disabled');
    {% endunless %}
  {% endfor %}
  jQuery('.single-option-selector').trigger('change');
{% endif %}


    
    
    // 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>{{ 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();
    {% else %}
      $('#variantBreak').removeClass('hr--clear');
    {% endif %}
  });
</script>

{% if settings.product_image_zoom_enable %}
  {{ 'jquery.zoom.min.js' | asset_url | script_tag }}
{% endif %}

{% include 'limespot-tracker-product' %}
{% include 'limespot-related-product' %}
{% include 'limespot-recently-viewed' %}

 

0 Likes
New Member
1 0 0

I am trying to figure it out too.  I think there should be an option on the theme editor to make. Could you please share how you did it if you figured it out?

0 Likes