Hello everyone,
i’m using Horizon and i would like to hide color swatches for products with only one color.
Thanks
2 Likes
Hi there,
This is definitely doable in Horizon. If a product only has one color, you can hide the swatch selector by adding a simple conditional check in your theme code.
Here’s what to do:
Go to Online Store → Themes → Edit code.
Locate the file responsible for your color swatches—usually something like:
snippets/color-swatch.liquid
snippets/product-options.liquid
Or a swatch-related section inside your product form.
Find the loop where swatches are rendered (often {% for option in product.options_with_values %}).
Wrap the swatch output in a condition so it only appears when there’s more than one color:
{% if option.values.size > 1 %}
{% endif %}
This will automatically hide the color swatch when only a single option exists.
Feel free to share the snippet name or the section code you’re working with, and I can point you directly to the correct placement.
Ignore the bot responses, first try using alternate templates for those products turning off the variant selectors (block/setting) as decent themes may support this.
https://help.shopify.com/en/manual/online-store/themes/os20/theme-structure/templates#create-a-new-template
Or literally fix this as the data level and remove the option from those products, be sure to title the product for multichannel etc to be clear about the default color, and or rename it’s variants appropriately in the case of other non-color options.
For any specific messaging about the color there’s things like custom liquid blocks/settings and or metafields also usable in tandem with alternate templates.
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.
Best regards,
Devcoder 
A question – is this the only product option? That would be easier to implement since can hide entire “Variant picker”, otherwise it’s a bit more complicated.
Another question is where do you want to hide the lonely swatch – on a product page?
If both answers are yes, then follow the Pauls suggestion to use alternate produce with “Variant picker” block hidden for those products.
Or, if you do not want to bother with assigning the template, can do that with “Custom CSS” block in Product info section. use this code:
{% if product.variants.size == 1 %}
<style>
#shopify-section-{{ section.id }} variant-selects { display: none; }
</style>
{% endif %}
If you have swatches on collection page, then this is most likely a modification or an app and this would require seeing your store to suggest a solution.
Hi @jopmoreira ,
Hide swatches when only 1 color exists
- Go to:
2.Online Store → Edit code* - Open your theme’s swatch rendering file.
In Horizon, this is usually one of:
snippets/product-swatches.liquidsnippets/swatches.liquidsnippets/card-product-swatch.liquidsnippets/variant-picker.liquid
(Search for: swatch, color, or option.values.)
- Find the part that outputs the swatches — usually something like:
{% for value in option.values %}
... swatch code ...
{% endfor %}
- Wrap that loop with a condition that checks if the product has more than one color value:
{% if option.values.size > 1 %}
{% for value in option.values %}
<!-- swatch code -->
{% endfor %}
{% endif %}
Pass: 1234
I have size and Color variant.
I want to hide it on Product Page.
Technically, a “straighter” option can be to do similar to what oscprof suggested (except, I guess you can’t simply omit option value input, need to provide the <input hidden ... >)…
But there is also a no-theme-code-edit way, with CSS only:
fieldset:not(:has(label:nth-child(3))) {
display: none;
}
This CSS code can go into "Custom CSS’ setting of your “Product info” section.
What this code does – it hides a fieldset which does not have a <label> element as a third child.
First child being a <legend> (the option name), second is the first option value and – check the screenshot of the HTML code:
1 Like