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

Shopify Partner
6 0 0

Britton,

Thanks for your efforts, but I cant seem to get it to work.

I made a duplicate product template called "product.ProductHiddenColor.liquid" and then assigned this template to one product as a test and nothing happened.

I'm doing the testing on a development store we have setup and Im very happy to give you access if you'd like to debug it.

Here's the entire template file with your code at the bottom.

I tried it before and after the short >script> secton you see at the bottom.

{% assign selectedVariant = product.selected_or_first_available_variant | default: product %}

<div itemscope itemtype="http://schema.org/Product">
  <h1 class="page-title" itemprop="name">{{ product.title }}</h1>

  <div class="product-details mobile">
    {% if settings.product-display-vendor %}
      <p class="meta vendor">{{ product.vendor }}</p>
    {% endif %}
    <p class="product-price">
      <span class="price">
        <span class="money">{{ selectedVariant.price | money }}</span>

        {% unless product.variants.size == 1 and product.compare_at_price_min <= selectedVariant.price %}
          <span class="original money">
            {% if selectedVariant.compare_at_price > selectedVariant.price %}
              {{ selectedVariant.compare_at_price | money }}
            {% endif %}
          </span>
        {% endunless %}
      </span>
    </p>
  </div>

  {% assign featured_image = selectedVariant.featured_image | default: product.featured_image %}
  <div class="product-slideshow clearfix">
    <div class="product-big-image" data-no-image-svg="{{ 'no-image.svg' | asset_url }}" data-no-image-png="{{ 'no-image.png' | asset_url }}">
      <span class="product-slideshow-loader"></span>
      {% if product.images.size > 0 %}
        <img itemprop="image" alt="{{ featured_image.alt }}" src="{{ featured_image | img_url: 'master' }}" />
      {% else %}
        <img class="product-no-images" src="{{ 'no-image.svg' | asset_url }}" alt="No Image Available" onerror="this.src='{{'no-image.png' | asset_url}}';this.onerror=null;" />
      {% endif %}

      {% if settings.product-enable-zoom %}<div class="product-image-zoom"></div>{% endif %}
    </div>

    {% if product.images.size > 1 %}
    <div class="product-thumbnails">
      {% for image in product.images %}
        <img alt="{{ image.alt }}" data-high-res="{{ image | product_img_url: 'master' }}" src="{{ image | product_img_url: 'thumb' }}" class="{% if image == featured_image %}active{% endif %}">
      {% endfor %}
    </div>
    {% endif %}
  </div>

  <div class="product-wrap">

    <div class="product-details">
      {% if settings.product-display-vendor %}
        <p class="meta vendor" itemprop="brand">{{ product.vendor }}</p>
      {% endif %}
      <p class="product-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <span class="price" itemprop="price">
          <span class="money">{{ selectedVariant.price | money }}</span>

          {% unless product.variants.size == 1 and product.compare_at_price_min <= selectedVariant.price %}
            <span class="original money">
              {% if selectedVariant.compare_at_price > selectedVariant.price %}
                {{ selectedVariant.compare_at_price | money }}
              {% endif %}
            </span>
          {% endunless %}
        </span>
      </p>
    </div>

    <form class="product-form" action="/cart/add" method="post">

      {% if product.variants.size > 1 %}
        <div class="product-options">
          <select name="id" id="product-select" class="product-select">
            {% for variant in product.variants %}
              <option {% if variant == selectedVariant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
            {% endfor %}
          </select>
        </div>
      {% else %}
        <input type="hidden" name="id" class="product-select" value="{{ product.variants[0].id }}" data-variant-title="{{ product.variants[0].title }}" />
      {% endif %}

      <div class="input-wrapper product-quantity">
        <label for="quantity">{{ 'general.quantity' | t }}</label>
        <input type="text" name="quantity" id="quantity" value="1" />
      </div>

      <div class="add-to-cart">
        {% if product.available %}
          <div class="product-form-submit-wrap">
            <input type="submit" value="{{ 'products.product.add_to_cart' | t }}" />
            <div class="add-to-cart-loader"></div>
          </div>
          {% capture cart_link %}
            <a href="/cart">{{ 'products.product.cart_link' | t }}</a>
          {% endcapture %}
          {% capture continue_link %}
            <a href="/collections/all">{{ 'products.product.continue_link' | t }}</a>
          {% endcapture %}
          {% capture checkout_link %}
            <a href="/checkout">{{ 'products.product.checkout_link' | t }}</a>
          {% endcapture %}
          {% capture product_item %}
            <span class='added-product-name'></span>
          {% endcapture %}
          <p class="product-add-success-message">{{ 'products.product.success_html' | t: cart_link: cart_link, continue_link: continue_link, checkout_link: checkout_link, product: product_item  }}</p>
          <p class="product-add-error-message"></p>
        {% else %}
          <input type="button" class="disabled" disabled="disabled" value="{{ 'products.product.sold_out' | t }}" />
        {% endif %}
      </div>

    </form>

    {% if product.description.size > 0 %}
    <div class="product-description rte" itemprop="description">
      {{ product.description }}
    </div>
    {% endif %}
    
    <!-- TA -->
    <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>

    {% if settings.product-show-info-link-1 or settings.product-show-info-link-2 %}
    <div class="product-more-info">
      {% if settings.product-show-info-link-1 %}
        <p class="product-info-link {{ settings.product-info-link-icon-1 }}">
          {% if settings.product-info-link-url-1.size > 0 %}<a href="{{ settings.product-info-link-url-1 }}">{% endif %}
            {{ settings.product-info-link-text-1 }}
          {% if settings.product-info-link-url-1.size > 0 %}</a>{% endif %}
        </p>
      {% endif %}

      {% if settings.product-show-info-link-2 %}
        <p class="product-info-link {{ settings.product-info-link-icon-2 }}">
          {% if settings.product-info-link-url-2.size > 0 %}<a href="{{ settings.product-info-link-url-2 }}">{% endif %}
            {{ settings.product-info-link-text-2 }}
          {% if settings.product-info-link-url-2.size > 0 %}</a>{% endif %}
        </p>
      {% endif %}
    </div>
    {% endif %}

    {% if settings.product-show-share-buttons %}
      {% include 'share-buttons' %}
    {% endif %}

  </div>
</div><!-- close itemscope -->

{% if settings.product-show-related %}

  {% assign number_of_related_products_to_show = 4 %}

  {% capture number_of_related_products_to_fetch %}
    {{ number_of_related_products_to_show | plus: 1 }}
  {% endcapture %}

  {% if collection == null or collection.handle == 'frontpage' or collection.handle == 'all' %}
      {% assign found_a_collection = false %}
      {% for c in product.collections %}
          {% if found_a_collection == false and c.handle != 'frontpage' and c.handle != 'all' %}
              {% assign found_a_collection = true %}
              {% assign collection = c %}
          {% endif %}
      {% endfor %}
  {% endif %}

  {% if collection.products.size > 1 %}
    <div class="related-products">

      <h3 class="section-title">
        {{ 'products.related_products.header' | t }}
      </h3>

      <div class="collection-products">
      {% assign current_product_found = false %}
      {% for prod in collection.products limit: number_of_related_products_to_fetch %}
        {% if prod.title == product.title %}
          {% assign current_product_found = true %}
        {% else %}
          {% unless current_product_found == false and forloop.last %}

              {% include 'product-list-item' %}

          {% endunless %}
        {% endif %}
      {% endfor %}
      </div>

    </div>
  {% endif %}

{% endif %}

{% for option in product.options %}

{% assign downcaseOption = option | downcase %}
 
	{% if downcaseOption == "color" and forloop.index == 1 %}
		{% assign optionNum = 1 %}
	{% elsif downcaseOption == "color" and forloop.index == 2 %}
		{% assign optionNum = 2 %}
	{% elsif downcaseOption == "color" 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 %}


<script>
  // required for splitting variants
  // see ProductView
  window.productJSON = {{ product | json }};
</script>

 

0 Likes
Shopify Partner
6 0 0

FYI: If you want to see the resulting page go to 

https://handsome-smooths-2.myshopify.com/products/performance-boxer-short-black 

Password is: TalenAlexander

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

Hi again Simon,

I think we should test that the jQuery is working at all on your theme before we really get into the nitty gritty of troubleshooting. Could I get you to add this to the bottom of product.liquid: 

<script>
$(window).load(function() {
    	$('.selector-wrapper:nth-of-type(2)').hide();
  	  });
</script>

If that hides your colour input box then the jQuery bits are fine! If it doesn't, could I get you to add the most recent jQuery to your theme in the header in theme.liquid from Google Hosted Libraries

Let me know the results of these experiments as we can go from there.

-Britton

Britton Shopify Guru
0 Likes
New Member
2 0 0

I added the script and it dod nothing.

I then added

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 

In the HEAD section of theme.liquid and stil nothing happened.

Bangs head in frustration

0 Likes
Shopify Partner
6 0 0

Britton,  Sorry, I logged with company account. TalenAlexnader above is also me.

0 Likes
New Member
6 0 0

Could someone please modify the code when the selector is a radio button and not a drop down?

 

Please!

0 Likes
Tourist
8 0 3

I too use colour swatches not the dropdown link, is it possible to have a revised version for the swatch option as most of my items are jewellery and all show a single variant which looks confusing

0 Likes