Hello there, I am trying to figure out how link colour swatches to new product pages, similar to the image attached. Would be grateful for some assistance
Topic summary
Goal: make color swatches that, when clicked, redirect to separate product pages (each color is its own product). A screenshot was attached; later a YouTube tutorial was shared.
Proposed approaches:
- Separate product per color, then link swatch buttons via anchor tags or JS (JavaScript) click listeners to redirect.
- Group related products using a shared tag, query those products, and render/link swatches accordingly (external how‑to article referenced, but one user reported it didn’t work for them).
- App-based: install “Swatch King – Variants Options” to group products and create swatches that link to the corresponding product page; an example store link was provided.
Follow-ups and issues:
- The tag-based/article method failed for the original requester.
- Another user successfully created separate links per color via tags but cannot get multiple swatches to display on collection pages (only one swatch shows; tags not recognized there).
- Some participants asked for paid implementation help.
Status: No confirmed, code-level solution posted in-thread. The app recommendation is the most concrete next step. Discussion remains open with unresolved collection-page swatch behavior.
You need different a product for each colour. Then you can add the link to the colour button so it redirects to the other page.
The easier way that I can think of is to wrap this button in a tag but you would need to somehow link the product in the backend.
I’ve seen some theme the variant in manage with JS. In that case you can add a event listener to the colours elements and redirect once click.
Hope this help!
Hey Bruno,
Yes, I currently have separate product pages for each colour, now looking for a way to add swatches and link them! https://gaineasy.co/products/reflex-sustainable-leggings-onyx-black here is one of my product pages, not sure if you have any idea!
I think the idea would be to add a tag on every product that you want to be linked together. Then you can search every product in the store based on that tag.
I haven’t read it all but I think this article might provide the solution that you are looking for.
https://thatsnovel.co.uk/2021/06/29/cross-linking-products-variants-shopify/
of course you’ll have to modify the code snippet according to what you want it to display.
Thank you for getting back to me Bruno, sadly that solution did not work!
You can check this video.
Hi! I have wrapped my products under the same tag and now I have a separate link for each color. But how do I get color swatches to display on the collection page? It doesn’t recognize tags and only shows one swatch per product. Thank you.
Hello! I am looking for someone to do this exact thing to my website. Are you able to help?
Hi there, can you let me know the price to do this on our site, we are looking for this exact feature as you showed in the video. Thank you. AM
Hello, I have solution if you are still struggling on this
https://38995b-74.myshopify.com/products/bamboo-lattice-apricot-light-pink?option1=XS
Look at this store
Just Install “Swatch King - Variants Options” app
group Products and customize colour
whenever you click on color it will take your to specific product page
1 Like