How to hide Color and Size from the product page

Solved
Highlighted
Tourist
3 0 1

I have tried all the other suggested solutions in past questions and none seem to work for my theme. I need to hide both Color and Size variant dropdown from the product details page. All of my products come in 1 size, 1 color and I only add the variant info of "One Size" and "Blue" or "Red" (etc) to satisfy Google Shopping. If I simply comment out the following code, it will hide from the screen, but the entire site breaks as soon as someone adds a product to the cart.  So obviously the checkout needs this data, but I don't want it shown on the screen. Is there any way to hide this from the front end without breaking the rest of the site, including checkout? 

 

Theme is called Retina.  Code below is located in product-form.liquid

 

 

{% if product.options.size > 1 %}
<div class="select">
<select id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}" name="id" class="multi_select">
{% for v in product.variants %}
<option {% if v == variant %}selected="selected"{% endif %} value="{{ v.id }}" data-sku="{{ v.sku }}">{{ v.title }}</option>
{% endfor %}
</select>
</div>
{% elsif product.options.size == 1 and product.variants.size > 1 or product.options.size == 1 and product.options[0] != "Title" %}
<div class="select">
<label>{{ product.options[0] }}</label>
<select id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}" name="id">
{% for v in product.variants %}
<option {% if v == variant %}selected="selected"{% endif %} value="{{ v.id }}" data-sku="{{ v.sku }}">{{ v.title }}</option>
{% endfor %}
</select>
</div>
{% else %}
<input type="hidden" name="id" value="{{ variant.id }}" />
{% endif %}

{% if settings.product_form_style == "swatches" and product.variants.size > 1 or settings.product_form_style == "swatches" and product.options[0] != "Title" %}
<div class="swatch_options">
{% for option in product.options %}
{% include 'product-swatch' with option %}
{% endfor %}
</div>
{% endif %}

1 Like

Success.

Shopify Partner
19 4 5

Hi, the simplest way to do this is hiding the block via CSS. 

{% if product.options.size > 1 %}
<div class="select" style="display: none;">
<select id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}" name="id" class="multi_select">
{% for v in product.variants %}
<option {% if v == variant %}selected="selected"{% endif %} value="{{ v.id }}" data-sku="{{ v.sku }}">{{ v.title }}</option>
{% endfor %}
</select>
</div>
{% elsif product.options.size == 1 and product.variants.size > 1 or product.options.size == 1 and product.options[0] != "Title" %}
<div class="select" style="display: none;">
<label>{{ product.options[0] }}</label>
<select id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}" name="id">
{% for v in product.variants %}
<option {% if v == variant %}selected="selected"{% endif %} value="{{ v.id }}" data-sku="{{ v.sku }}">{{ v.title }}</option>
{% endfor %}
</select>
</div>
{% else %}
<input type="hidden" name="id" value="{{ variant.id }}" />
{% endif %}
{% if settings.product_form_style == "swatches" and product.variants.size > 1 or settings.product_form_style == "swatches" and product.options[0] != "Title" %}
<div class="swatch_options" style="display: none;">
{% for option in product.options %}
{% include 'product-swatch' with option %}
{% endfor %}
</div>
{% endif %}

It's a bit rough because it's better to try to select the first product variant via Liquid, but should work in your case. 

This is a more correct solution, but I'm not sure that it will work as is, because I cannot test it in your store:

<input type="hidden" name="id" value="{{product.selected_or_first_available_variant.id }}" />

You can try to put it instead of the whole code snippet

 

1 Like
Shopify Partner
455 80 99

Click on Actions button and go into Edit Code.

Here search/open styles.scss.liquid file.

Scroll at the very bottom of this file and put this there

#product-form .select {
	display: none;
}
Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes
Tourist
3 0 1

Thank you Alex! It worked! And I figured out how to do the same on the Cart and slide-out cart.

 

Now just need to figure out how to remove the variant info from the final steps of the checkout screens.

0 Likes
Shopify Partner
455 80 99

You can edit checkout template unless you are shopify plus plan.

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes