Every product that is the same, but in different colors are made as different products. How do I make the color swatches take the customers to the correct color product page? Is there a way to link the color swatches of a product to another product?
Topic summary
A Shopify merchant is struggling with color variant management where identical products in different colors are set up as separate product listings rather than variants of a single product.
Core Issue:
- Color swatches show “sold out” for other colors even when inventory exists
- Need to link separate product pages together so customers can navigate between color options
Solutions Offered:
Manual Code Approach:
- Add swatch code to product template using Liquid markup
- Filter products by color tags from a collection
- Apply custom CSS for swatch styling (circular buttons with hover effects)
- However, this doesn’t fully resolve the cross-product linking issue
App Solution:
- Easify Product Options app recommended for cross-product linking
- Uses “Color Swatches” option type with “Option URL” feature enabled
- Allows linking between separate product pages as if they were variants
Status: The merchant provided their store URL for troubleshooting but the fundamental architectural issue (separate products vs. variants) remains unresolved through code alone.
impulse theme
Hi
You have to do 2 things Add Swatches Code at Product Template and add swatch css to style
Swatch code example
{% for product in collections['your-collection-handle'].products %}
{% if product.tags contains 'color' %}
{{ product.title }}
{% endif %}
{% endfor %}
Css example
.color-swatches {
display: flex;
gap: 10px;
}
.swatch {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid #fff;
cursor: pointer;
transition: border 0.3s;
}
.swatch:hover {
border-color: #000;
}
But how do I link them together? It still says sold out on the other colors, when it`s not. Did I do something wrong?
Here is my url: https://sansfordeg.no/products/10434127-frdedina-dr-8-black?_pos=1&_psq=frded&_ss=e&_v=1.0
There you can see what I mean
Hi @sansfordeg1 ,
Easify Product Options app can help your create cross-product linking for products that are actually the same but different colors, using the Color/Image Swatches option type with the Option URL feature enabled. Below is an example similar to your case:
