Variant colours and inventory

Store Design

Topic summary

A store owner using the Symmetry theme wants to implement a color-based product browsing system for 9 products with 4 color variants each.

Current Setup:

  • Products display color swatches successfully
  • Color variants are configured under each product

Desired Features:

  1. Color-first navigation: Customers click a color image to view all 9 products filtered to show only that color in thumbnails (no dropdown menus)
  2. Individual color display: Product thumbnails should show only the selected color variant
  3. Linked inventory: All variants need to remain connected while displaying separately

Response:
A developer offered a partial solution using custom code that hides non-selected color variants on product pages, showing only the chosen color in thumbnails. They note this was implemented on a free Shopify theme and acknowledge different themes require different code approaches. An example implementation was shared.

Status: The request remains partially unresolved, as the full color-filtering collection page functionality hasn’t been addressed.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hi, I am looking for some advice to help me move forward to soon launch my business.

I have 4 colour variants for 9 products.

I have set up under ‘Products’ the 9 products, and added the 4 colour variants under each product, for the customers to see the swatch of colours that the product comes in. -This works as I intended. However, I would also like to set up the following and still be able to show the colour variant swatches that product comes in, and for the inventory to link together.

This is what I envision:

  1. I would like for the customer to click on the image of their colour choice to shop all 9 products of that one colour they chose, and only see that product displayed in the thumbnails of that one colour when they go onto the next page.

    I have advertised/displayed/set-up the 4 colour options on a ‘image with text overlay’ template, this is how I want them to choose the tools they want in that one colour they choose, by clicking on the image (shop now). I do not want a drop down menu to choose a colour.

  2. I also would like to display the products in individual colours, showing that colour in the thumbnail only.

I hope this make sense. Your expertise would be of much help, and will stop my head from spinning trying to work it out myself. I am using Symmetry.

2

I was able to implement a part of what you are looking out for with custom code where it shows only the color of products selected by the user on the thumbnails while hiding the rest of the variants. Only thing i was able to implement this on a free theme by shopify and different themes have different code bases.

Check out product page for a product: https://kpsclothing.in/products/poomex-golden-rn?variant=45238618161393

Please reach out via personal links below for a convenient conversation and collaboration.

Best
Shadab