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 %}

Highlighted
Shopify Partner
23 4 7

This is an accepted solution.

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

 

VT Labs
Growth-Driven Shopify Development
Email: dev@vtlabs.org
Highlighted
Shopify Partner
482 86 134

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
Telegram: @sarhov
Try Shopify free for 14 days,
0 Likes
Highlighted
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
Highlighted
Shopify Partner
482 86 134

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
Telegram: @sarhov
Try Shopify free for 14 days,
0 Likes
Highlighted
Tourist
20 0 1

Hi Alex,

 

Please could you help me achieve the same goal but with the Brooklyn theme?

 

Best,

James

0 Likes
Highlighted
New Member
22 0 0

Good idea Alex!! But I am using Mr Parker theme and the code you had suggested didn't hide the color swatches. Do you have another suggestion for how to hide the color swatch from product pages? Thank you!

0 Likes
Highlighted
Shopify Partner
23 4 7

Hi, Lauren! You can try to add 

.swatch.clearfix {
  display: none;
}

at the bottom of the file in assets folder named stylesheet

VT Labs
Growth-Driven Shopify Development
Email: dev@vtlabs.org
0 Likes
Highlighted
New Member
22 0 0

That worked! Thank you kindly for your help.

0 Likes
Highlighted
New Member
22 0 0

Hi Alex, I just realized! I want to have the Size, but not the Color. How can I alter the code? Right now both size and color are gone.

0 Likes