Can I filter colour variants on a product page?

Hi Shopifiers,
New to Shopify, moving from Wordpress…

I have a couple of products which will have over 200 colours each, and looking through all those colours can be mind-numbing.

Is there a way I can offer customers a way to filter colour variants (directly on the product page), so they could see only the colours they are interested in?
For example, buttons that would select a certain colour range and de-select the remaining colours.

I have trawled through many Apps and instructions, and it I can’t find the right combination of effects :weary_face:

Thanks so much for any advice!

Nik

This is definitely doable, but not with standard Shopify themes, or any app that I know of. It would be need to be custom built variant selector block.

Have you asked Shopify Sidekick and described in detail what you would like to do? Pretty sure it’s more than capable. That’s exactly what it’s there for.

You could do buttons that each opens a small pop-up that has the different colors in that range. Or a sub-menu style drop-down.

Hi Maximus3,
Thanks so much for your reply.

I just tried your suggestion and Sidekick did create a special section that sort to might sort colours, but it is not connected to my product page at all and doesn’t appear to be able to move there.
I can keep trying (with the AI) and see if I can get it as a block within the product page itself.

Thanks so much for your input.
From what little I know, I think it should be possible too, perhaps with a little extra work.

I actually got the effect I was after by creating a couple of variant options, “Bright Colours” and “Dull colours”. The loaded the same 10 colours into each option, but then only gave bright colours stock levels in the Bright Colours and all the dull colour 0 stock (and visa versa).
So only the colour with stock level ‘showed’ as available.

But… that’s an impossible task for 200 colours…

Thanks again for your help!

Nik

Yeah I hate that it only allows 3 variant options. One thing to keep in mind, not everything needs to be a “variant”. There is such thing as an “item property”. Not a variant but will still go through the checkout and into the order in Admin. Example would be a note on the product page or a gift wrap checkbox. I’ve seen some merchants use this instead of say adult and child. If they already have size, color, and fabric style, then they could use the item property to convey adult/child.

As for Sidekick, you kinda need to treat it like a child. It doesn’t store memory. It stores your conversation history, and you can tell it to recall a certain conversation, but every new conversation is almost starting from scratch.

It can, though, store preferences indefinitely, so I made it a point to never take me to the ai code generator. This way it provides the code straight to me and I will paste it. That way, if I want to add a custom liquid block in theme editor, or create my own section or snippet in the code editor, I can do that too.

So I think for your deal I would do that. In the theme editor, depending on theme, when you add block or section, there should be a “custom liquid”. That’s where I would do it.

It usually doesn’t work the first time, because it’s going to use generic css selectors, not specific to any theme. And this goes back to treating it like a child, you have to tell it “this doesn’t work” and it’ll try something else.

I know most people give up on it. But I have managed to produce a top tier custom file upload that is comparable to the best paid apps. Even stores the upload to Cloudinary, and has full security measures. And I just got done with a drag and drop overlay snippet as well. It’s a really useful tool if you have the patience :+1:

Amazingly helpful, thanks Maximus3!

I am not at all tech savvy, nor did I know about the Item Property.
Will certainly have a look at that now too.

Thanks again.
And you are right… patience will prevail!!
All the best
Nik

Hi @Nikgenious I am trying to understand this problem. Are you trying to achieve something like this on your product page where colors are divided into different sections (categories)?

Hi @farid-movsumov,
Thanks for your message.

I am not sure exactly what you have done?!? so can’t really say.

What I want is to add about 200 colour variants, and then let customers be able to filter them into various groups.

The groups might be “Bright Colours”, “Neutral Tones”, “UV”, Skin Tones"“ for example.
At which point, I would like the colours from that group to remain active (selected) and the colours outside the group to become un-selectable. It would be good if the deselected colours were obviously unable to be selected - like what happens when you are out of stock, where they go darker and get a line through, them for example.

I hope that is clearer.
Any ideas greatly appreciated!

Kind regards
Nik

Hi @Nikgenious :waving_hand: I’m @PaulNewton shopify-partner I provide services for merchant needs like this.
It’s custom work to do it right, especially if products data isn’t organized the right way.
Just reach out to me for customization services.
To connect CLICK my profile-pic or visit my profile on the forums
ALWAYS include context in new communications, e.g. reference urls, posts urls, etc


Making all variants into stand alone products stitched together like they are variants* in some cases can be the sanest but hardest approach.
As then it’s mainly an organization matter of putting products in collections and literally use collection filtering to do the bulk of the UI and user journey work til the customer gets to the product description page with some javascript to utilize the last pages filters to map to products to enable/disable/group etc.
Though giant catalogs and deep needs may need a search app to support it for .
*aka flat products, sibling products, pseudo combined listings, etc

It can be done with theme customizations in various ways the pretty quickly

Yup, its working out the info-arch and the UI/UX that can make up most effort.
As you don’t want to confuse customers between sold out and a color-preference setting; and avoid making them think the are unable to change their mind to change colors.

Merchants that are serious about getting more sales with better UX, and have a real budget can reach out to me to get this built.

Hi @PaulNewton,
Thanks so much for your response, ideas and offer.

It’s a lot to take in for someone who is not tech minded, but I tend to agree with your recommendations.

Give me a day or two to discuss and I’ll get back to you with a clearer idea of how we can move forward.

Thanks again for taking the time to message me.

Kind regards
Nik

Hi! What you’re describing is less of a standard Shopify variant setup and more of a product-page UX / option management problem.

Shopify can handle the colour variants themselves, but once you want to group 200+ colours into ranges and make non-matching colours appear disabled, that usually goes beyond what standard themes handle cleanly. In your thread, the current suggestions are already pointing toward custom work for that reason.

If you’d rather avoid building all of that from scratch, an options app with swatches + conditional logic is usually the cleaner route. Avis Product Options could be worth looking at for this kind of workflow, especially if your goal is to simplify how customers browse a very large colour set.

So yes — definitely possible, but I’d approach it as a customized option-selection experience rather than trying to force it through basic variant display alone.

A demo created with Avis Product Options, using color swatches and conditional logic. Clicking each color family will display its corresponding option set:

Thanks so much @Avis_Tyler for the extra information.

I think we have solved the problem - mostly with the use of sibling pages.
But will check out your recommendation of the Avis Product Options.

Thanks again
Nik

Hi @Nikgenious :raising_hands:

With products that have a very large number of color variants, having customers scroll through hundreds of swatches on the product page can quickly become overwhelming :blush: You could handle this type of setup quite nicely with Easify Product Options to make the color selection experience much cleaner and easier to navigate.

I’ve created a similar demo to help you better visualize how it works:

  • This is the result:

  • This is the app setting:

Inside the app, you can organize your colors into separate groups such as Light Colors , Dark Colors, etc. instead of displaying every single color at once.

The colors themselves can also be displayed using Color Swatches or Image Swatches, which creates a much more visual and user-friendly experience compared to Shopify’s default variant dropdowns.

You can then create filter buttons or selector options for each color group and use Conditional Logic to control which swatches are visible. For example, when a customer selects “Pink Tones”, the app can display only the pink-related swatches while temporarily hiding the remaining colors to keep the layout more organized :blush:

This approach works especially well for stores with large color catalogs such as fabric, wallpaper, POD, paint, or apparel stores because it helps customers find the exact shades they want much faster without endless scrolling.

The setup is also very flexible and usually doesn’t require custom JavaScript or complicated theme edits. The app is designed to be beginner-friendly as well, so it’s a fairly easy solution to explore even without coding knowledge.:pink_heart:

Hi @Nikgenious,

I hope you’re doing well. If you want to show many color variants across different subgroups, you can try the Inkybay – Product Personalizer app.

With the Product Option feature, you can easily create color variants/ image swatch options. Each variant can have its own image or swatch. Instead of showing 200 color variants at a time, you can create different subgroups of colors so that by selecting a color, corresponding colors show up. This makes it easier for customers to find their preferred color variants.

Inkybay also lets you create different product options like text fields, file attachment options, single/multiple choice options, etc., and display them as drop-down options, radio buttons, swatches, checkboxes, etc. Also, you can set extra pricing for each option.

No coding is required, and a simple setup. The best part of Inkybay is that it offers a free 21-day trial so you can explore it without any cost and see how it works for your product.

Thanks so much for the information.

I will look into it!

Kind regards

Nik

Thanks so much for the information.

I will have a look!

Kind regards

Nik

Thank you so much for showing your interest @Nikgenious

You can check out & install Inkybay directly from the Shopify App Store to explore its features. Also, if you need any assistance or face any issues, our live support team is always available to help you.

Please feel free to reach out anytime.

Hi Everyone,
Thanks to all that read this and especially those that replied.

I tried a lot of options, but the one that actually suited us best was to use the sibling page setup, and not an app or code at all.

Not sure that helps anyone, but please - no more responses necessary.

Thanks again
Nik

Yes, this is a common issue when products have a large number of variants, and Shopify can handle it, but not natively in the exact filter inside the product page way you’re describing without some setup.

What you’re trying to achieve (filtering 200+ colors on the product page) is usually solved in one of three ways:

1. Variant Swatches (best standard solution)
Instead of a dropdown, you convert your color variants into visual swatches (small clickable color buttons). Customers don’t scroll through 200 options they instantly scan and click.

  • Works with Shopify 2.0 themes
  • Much cleaner UX
  • Apps like Swatch King or Globo Color Swatches handle this well

2. Color Grouping (recommended for 200+ variants)
You don’t show all 200 at once. You group colors into families like:

  • Reds
  • Blues
  • Neutrals
  • Pastels

Then customers click a group first, which dynamically filters the swatches shown. This is usually done with:

  • Metafields
  • Custom variant logic
  • Or apps like Easify Product Options

3. Custom Product Page Filtering (advanced / best UX)
This is the closest to what you described:

  • Buttons like Warm tones / Cool tones / Bright colors
  • Clicking hides/unhides variant swatches instantly

This requires either:

  • Custom JavaScript in your theme (most flexible)
  • Or a more advanced variant app with filtering rules

Important note: Shopify does not natively support true filtering variants inside the product page without either swatch apps or custom code so what you’re looking for is absolutely doable, but it’s implemented through theme customization or apps rather than a built in setting.

If you want the cleanest long-term setup, I usually recommend: Swatches + Color grouping + light custom filtering (best balance of speed and UX)

If you’d like, I’m free to reach out and can guide you step by step on how to set this up properly for your store.