I would like to hide the variant selector in the Turbo theme when there is only one variant. I have found several solutions for this in the old version of Shopify, but not for Online Store 2.0. Any help is appreciated.
1 Like
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community! 
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Hi @DesignerJoe55 ,
You just need to add a condition before displaying variant, it will work fine. Refer code:
{%- if product.variants.size > 1 -%}
{%- endif -%}
Hope it helps!
Thank you for providing that! However, I can’t seem to figure out where it should be placed. I put the code around every section that seemed to make sense, but nothing changes on the front end. I tried both the product-form.liquid file and the product-swatch.liquid file.
Could you point me in the right direction?
Here is the code for both
product-form.liquid
{% if show_payment_button == false or product.selling_plan_groups.size > 0 %}
{% assign show_payment_button = false %}
{% else %}
{% assign show_payment_button = true %}
{% endif %}
{% assign variant = product.selected_or_first_available_variant %}
{%- assign checkout_url = '/checkout' -%}
{% for locale in shop.enabled_locales %}
{% if locale.primary == true %}
{%- assign defaultLocale = locale.iso_code -%}
{% if defaultLocale != request.locale.iso_code %}
{%- assign checkout_url = request.locale.iso_code | append: '/checkout' -%}
{% endif %}
{% endif %}
{% endfor %}
{% form 'product', product %}
{% comment %}
Automatically inserted by Shop Pay Installments theme updater
{% endcomment %}
{% unless settings.disable_autogenerated_payment_terms %}
{{ form | payment_terms }}
{% endunless %}
{% if product.options.size == 1 and settings.product_form_style == 'select' %}
{% endif %}
{% if settings.product_form_style == "radio" and product.variants.size > 1 or settings.product_form_style == "radio" and product.options[0] != "Title" %}
{% for option in product.options %}
{%
render 'product-swatch',
option: option,
product: product
%}
{% endfor %}
{% endif %}
{% if product.available %}
{% if settings.display_inventory_left %}
{% if variant.inventory_management != blank and variant.inventory_quantity > 0 %}
{% capture items_left_text %}
{% if variant.inventory_quantity == 1 %}
{{ 'products.product.items_left_count.one' | t }}
{% else %}
{{ 'products.product.items_left_count.other' | t }}
{% endif %}
{% endcapture %}
{% if variant.inventory_quantity <= settings.inventory_threshold %}
{{ variant.inventory_quantity }} {{ items_left_text }}
{% endif %}
{% endif %}
{% endif %}
{% endif %}
{% if settings.display_product_quantity %}
{% endif %}
{% if settings.cart_action == 'reload_page' %}
{% elsif settings.cart_action == 'redirect_checkout' %}
{% endif %}
{% capture add_to_cart_label %}{% if collection_handles contains 'pre-order' %}{{ 'collections.general.pre_order' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endif %}{% endcapture %}
{% if show_payment_button %}
{{ form | payment_button }}
{% endif %}
{% endform %}
product-swatch.liquid
{% comment %}
Set the extension of your color files below. Use 'png', 'jpeg', 'jpg' or 'gif'.
{% endcomment %}
{%- assign file_extension = 'png' -%}
{%- assign swatch = option -%}
{%- assign found_option = false -%}
{%- assign is_color = false -%}
{%- assign option_index = 0 -%}
{% for option in product.options %}
{% if option == swatch %}
{%- assign found_option = true -%}
{%- assign option_index = forloop.index0 -%}
{%- assign downcased_option = swatch | downcase -%}
{% if downcased_option contains 'color' or downcased_option contains 'colour' %}
{%- assign is_color = true -%}
{% endif %}
{% endif %}
{% endfor %}
{{ swatch }}
{%- assign values = '' -%}
{% for variant in product.variants %}
{%- assign value = variant.options[option_index] -%}
{% unless values contains value %}
{%- assign values = values | join: ',' -%}
{%- assign values = values | append: ',' | append: value -%}
{%- assign values = values | split: ',' -%}
{% if is_color %}
{{ value }}
{% endif %}
{% if is_color %}
{% else %}
{% endif %}
{% endunless %}
{% endfor %}
If the product don’t have variants then the selector should not show. You do not have to add code for this.
Make sure your product information is correct. When you edit your product make sure there are nothing under options if the product doesn’t have any variants. It there is anything delete the options.
If this doesn’t work let me know where the selector is showing. Product page, quick shop, mobile, desktop or mobile and desktop.
Online Store 2 is completely different to the old one.
1 Like
1 Like
@LitCommerce Thank you for that! Unfortunately, it still doesn’t work. I attached a screenshot to show a product page and the code in place. Any other ideas?
@DAW01 - Thank you for the suggestion. That would be the easy way to go, but Google and other platforms force you to have a color variation. So even though there’s only one color option, we still have to have it as a variant. It just doesn’t look great to the consumer when there’s only one option. Which is why I’m trying to hide it.
You can see in the attached screenshot what I’m trying to hide.
And yes, Online Store 2.0 is VERY different! Super awesome, but different to work with.
1 Like
You can still remove that variant and update your Google Shopping Fields using an App
I use the following 2 Apps, it is well worth using an App to edit your products if you have a lot of products.
These Apps will also not slow your store speed. It only work on the backend.
https://apps.shopify.com/bulk-product-edit
This is a really easy App to use if you want to update your Google Shopping Fields.
Also if you do something wrong you can easily undo it.
The easiest way will probably be to add the different colors as tags, then delete the variants and then update the Google shopping fields according to the tags (If tag contains black update Google Shopping Color : Black).
https://apps.shopify.com/excel-export-import
This is probably one of the best Apps available to edit your products.
It is more difficult to use and you must be carful not to make mistakes when updating but it is extremely powerful.
You will need to go true the documentation to understand it better.
What I also like about this App is you can export something to Google Sheets, have formulas work on the sheet and then import is again.
Let me know if this works for you or if you need help
1 Like
Hi @DesignerJoe55 ,
Please change code of product-swatch.liquid file:
{% comment %}
Set the extension of your color files below. Use 'png', 'jpeg', 'jpg' or 'gif'.
{% endcomment %}
{%- assign file_extension = 'png' -%}
{%- assign swatch = option -%}
{%- assign found_option = false -%}
{%- assign is_color = false -%}
{%- assign option_index = 0 -%}
{% for option in product.options %}
{% if option == swatch %}
{%- assign found_option = true -%}
{%- assign option_index = forloop.index0 -%}
{%- assign downcased_option = swatch | downcase -%}
{% if downcased_option contains 'color' or downcased_option contains 'colour' %}
{%- assign is_color = true -%}
{% endif %}
{% endif %}
{% endfor %}
{{ swatch }}
{%- assign values = '' -%}
{%- assign count = 0 -%}
{% for variant in product.variants %}
{%- assign value = variant.options[option_index] -%}
{% unless values contains value %}
{%- assign values = values | join: ',' -%}
{%- assign values = values | append: ',' | append: value -%}
{%- assign values = values | split: ',' -%}
{%- assign count = count | plus: 1 -%}
{% if is_color %}
{{ value }}
{% endif %}
{% if is_color %}
{% else %}
{% endif %}
{% endunless %}
{% endfor %}
{%- if count == 1 -%}
{%- endif -%}
Hope it helps!
1 Like
@LitCommerce This works!! Thank you so freakin’ much! You are amazing
1 Like
@DAW01 Thank you for the detailed breakdown of these apps! I will definitely take a look at them as it sounds great to be able to bulk edit/update all of those details.
Fortunately for this issue, @LitCommerce was able to write the code I need to make the single variants disappear. Your solution would definitely have worked for the Google Shopping feeds and other marketplaces.
One other reason I need the color variant, though, is for our own internal picking process. We print packing slips and send the orders into production if they aren’t already printed. Those packing slips need to show the color variant so the picker knows what color of blank shirt to grab for printing.
Thanks again for the app suggestions. I really appreciate it!
Hi, I have the same issue but using the Flex theme. I hope you can help me as well.
My product-swatch.liquid looks like this:
{% if settings.collection_swatches %}
{% assign file_extension = 'png' %}
{% for option in product.options_with_values %}
{% assign swatch_trigger = settings.swatch_trigger | strip | downcase %}
{% assign option_name = option.name | downcase %}
{% if option_name == swatch_trigger %}
{% assign option_index = forloop.index0 %}
{% assign values = '' %}
<div class="thumbnail-swatch is-justify-{{ settings.thumbnail_text_alignment }} is-flex-wrap">
{% for variant in product.variants %}
{% assign value = variant.options[option_index] %}
{% unless values contains value %}
{% assign values = values | join: ',' %}
{% assign values = values | append: ',' | append: value %}
{% assign values = values | split: ',' %}
{% assign swatch_file_url = variant.image | img_url: 'small' %}
<a href="{{ variant.url | within: collection }}" class="swatch swatch__style--{{ settings.collection_swatches_shape }}" data-swatch-name="meta-{{ option_name }}_{{ value | replace: ' ', '_' | downcase }}">
<span {% if section.settings.products_per_row == '2'%}
data-image="{{ variant.featured_image | img_url: '600x' }}"
{% elsif section.settings.products_per_row == '3' %}
data-image="{{ variant.featured_image | img_url: '500x' }}"
{% else %}
data-image="{{ variant.featured_image | img_url: '400x' }}"
{% endif %}
style="
{% if settings.swatches_option_style == 'variant_image' and product.variants[forloop.index0].image != blank %}
background-image: url({{ swatch_file_url }});
{% else %}
background-color: {{ value | split: ' ' | last | handle }};
{% endif %}
">
{% assign image_name = value | handle | append: '.' | append: file_extension %}
{% assign swatch = images[image_name] %}
<img loading="lazy" class="swatch__image {% if swatch == empty %}swatch__image--empty{% endif %}" src="{{ swatch | img_url: '50x' }}" alt="{{ variant.title }}">
</span>
</a>
{% endunless %}
{% endfor %}
</div>
{% endif %}
{% endfor %}
{% endif %}
Same issue using Turbo Portland 9.3.0 - any ideas? Need the “Style” section and button hidden on storefront (cannot be deleted) and have had no luck so far.
Here is the product-form.liquid for mine…assuming it is going to be something needed here.
{% liquid
if show_payment_button == false or product.selling_plan_groups.size > 0
assign show_payment_button = false
else
assign show_payment_button = true
endif
assign variant = product.selected_or_first_available_variant
assign checkout_url = '/checkout'
for locale in shop.enabled_locales
if locale.primary == true
assign defaultLocale = locale.iso_code
if defaultLocale != request.locale.iso_code
assign checkout_url = request.locale.iso_code | append: '/checkout'
endif
endif
endfor
assign show_recipient_form_placeholders = true
assign recipient_form_textarea_rows = 5
%}
{% form 'product', product %}
{% if product.options.size == 1 and settings.product_form_style == 'select' %}
{% endif %}
{% if settings.product_form_style == "radio" and product.variants.size > 1 or settings.product_form_style == "radio" and product.options[0] != "Title" %}
{% for option in product.options %}
{%
render 'product-swatch',
option: option,
product: product
%}
{% endfor %}
{% endif %}
{% if product.available %}
{% if settings.display_inventory_left %}
{% if variant.inventory_management != blank and variant.inventory_quantity > 0 %}
{% capture items_left_text %}
{% if variant.inventory_quantity == 1 %}
{{ 'products.product.items_left_count.one' | t }}
{% else %}
{{ 'products.product.items_left_count.other' | t }}
{% endif %}
{% endcapture %}
{% if variant.inventory_quantity <= settings.inventory_threshold %}
{{ variant.inventory_quantity }} {{ items_left_text }}
{% endif %}
{% endif %}
{% endif %}
{% endif %}
{% unless show_payment_button %}
{% comment %}Inject /pxs-gift-card-recipient-form/recipient-form begin{% endcomment %}
{% comment %}
form {Object}
The form object
section {Object}
The section object
show_recipient_form {Boolean}
If true, show the gift card recipient form
show_recipient_form_placeholders {Boolean}
If true, show recipient form placeholder attributes
show_recipient_form_labels {Boolean}
If true, show recipient form input labels
show_recipient_form_max_characters_message {Boolean}
If true, show the recipient form max characters message
recipient_form_textarea_rows {Number}
A numerical value to specify the number of textarea rows
recipient_form_textarea_classes {String}
A space separated list of class names added to recipient form textarea
recipient_form_input_classes {String}
A space separated list of class names added to recipient form inputs
recipient_form_label_classes {String}
A space separated list of class names added to recipient form labels
recipient_form_label_position {String}
The recipient form input label position, either 'top', or 'bottom'
{% endcomment %}
{% liquid
assign show_recipient_form_placeholders = show_recipient_form_placeholders | default: false
assign show_recipient_form_labels = show_recipient_form_labels | default: true, allow_false: true
assign show_recipient_form_max_characters_message = show_recipient_form_max_characters_message | default: true, allow_false: true
assign recipient_form_textarea_rows = recipient_form_textarea_rows | default: 5
assign recipient_form_label_position = recipient_form_label_position | default: 'top'
%}
{%- if show_recipient_form and product.gift_card? -%}
{%- endif -%}
{% comment %}Inject /pxs-gift-card-recipient-form/recipient-form end{% endcomment %}
{% endunless %}
{% if settings.display_product_quantity %}
{% endif %}
{% if show_payment_button %}
{% comment %}Inject /pxs-gift-card-recipient-form/recipient-form begin{% endcomment %}
{% comment %}
form {Object}
The form object
section {Object}
The section object
show_recipient_form {Boolean}
If true, show the gift card recipient form
show_recipient_form_placeholders {Boolean}
If true, show recipient form placeholder attributes
show_recipient_form_labels {Boolean}
If true, show recipient form input labels
show_recipient_form_max_characters_message {Boolean}
If true, show the recipient form max characters message
recipient_form_textarea_rows {Number}
A numerical value to specify the number of textarea rows
recipient_form_textarea_classes {String}
A space separated list of class names added to recipient form textarea
recipient_form_input_classes {String}
A space separated list of class names added to recipient form inputs
recipient_form_label_classes {String}
A space separated list of class names added to recipient form labels
recipient_form_label_position {String}
The recipient form input label position, either 'top', or 'bottom'
{% endcomment %}
{% liquid
assign show_recipient_form_placeholders = show_recipient_form_placeholders | default: false
assign show_recipient_form_labels = show_recipient_form_labels | default: true, allow_false: true
assign show_recipient_form_max_characters_message = show_recipient_form_max_characters_message | default: true, allow_false: true
assign recipient_form_textarea_rows = recipient_form_textarea_rows | default: 5
assign recipient_form_label_position = recipient_form_label_position | default: 'top'
%}
{%- if show_recipient_form and product.gift_card? -%}
{%- endif -%}
{% comment %}Inject /pxs-gift-card-recipient-form/recipient-form end{% endcomment %}
{% endif %}
{% if settings.cart_action == 'reload_page' %}
{% elsif settings.cart_action == 'redirect_checkout' %}
{% endif %}
{% capture add_to_cart_label %}{% if collection_handles contains 'pre-order' %}{{ 'collections.general.pre_order' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endif %}{% endcapture %}
{% if show_payment_button %}
{{ form | payment_button }}
{% endif %}
{{ form | payment_terms }}
{% endform %}
{% comment %}{% endcomment %}