In my store, each product is created as a separate product, even if it’s the same item in different colors. In other words, the only variation available for each product is its size.
I’d like to display, on the product page, not only the size options but also links or swatches for the same product in other colors, allowing customers to easily view and choose the color they prefer.
I’m using the Fabric theme. Does anyone have any suggestions or ideas on how to achieve this? Thank you!
It would be helpful to look at your store to get a better idea of your setup.
The important point is how those products can be linked together.
Shopify has a technology called “combined listings” but unfortunately, it’s Plus only.
Some themes support similar “sibling products”, say Broadcast has it – About product siblings | Broadcast Documentation
Just asked Sidekick to generate one for me – works fine:
Create a block which will get first part of the product title before the dash, use storefront API to fetch products which has the same text in their title and output links to them as swatches
Finally, I’ve shared a similar solution here – Dynamically update product title based on color swatch - #17 by tim_tairli
If your store has access to Combined Listings, I’d recommend trying that first, as it’s Shopify’s native solution for linking products by color.
If Combined Listings isn’t available, another approach is to create a Metaobject (for example, Product Color Group) that contains a list of product references. Then create a product metafield that references the appropriate metaobject entry for each product. This way, every product in the same color group points to the same metaobject, making it easy to maintain.
After that, you can add a small Liquid block to your product template to render the linked products as color swatches or image swatches. For example:
{% assign color_group = product.metafields.custom.color_group.value %}
{% if color_group %}
<div class="color-swatches">
{% for related_product in color_group.products.value %}
<a
href="{{ related_product.url }}"
class="color-swatch{% if related_product.id == product.id %} active{% endif %}"
title="{{ related_product.title }}"
>
{{ related_product.featured_image | image_url: width: 60 | image_tag }}
</a>
{% endfor %}
</div>
{% endif %}
You can style the links as circular color swatches or image swatches to match the Fabric theme, while keeping Size as the only variant on each product. This approach is scalable and only requires assigning the same metaobject entry to related products.
One of the stores I am working with now has this exact setup for different colors.
The store is using an app called platmart swatches to display other colors for the same product.
Most probably possible with code as well as I recently added color filters to collection pages using metaobjects and metafields.
Have a look at the store and the app.
Best
Thanks for your answer, tim_tairli. I asked to the Shopify AI to build a block in the Product Page using product metafield I had created months ago to linkk same color products and, after 2 or 3 attempts, it worked properly.
In time, our store is www.lygiaenanny.com
Thanks for your answer. I asked to the Shopify AI to build a block in the Product Page using product metafield I had created months ago to linkk same color products and, after 2 or 3 attempts, it worked properly.
Hi @Lygia2026
Yes, this is definitely possible.
A common approach is to link all of the related color products together using metafields or metaobjects, then display them as color swatches or clickable color options on the product page. When a customer clicks a color, they are taken to the corresponding product while the selected size options remain available.
This approach works well when each color is a separate product and helps keep the product page clean and easy to navigate.
I’ve implemented similar functionality on several Shopify stores, and it can be customized to match your theme’s design. Since you’re using the Fabric theme, this can be integrated into the existing product template with custom Liquid and a small amount of JavaScript, without relying on a heavy third-party app.
Best regards,
Devcoder 
Hi there 
A setup like this can be achieved quite smoothly with Easify Custom Product Options 
Since each color in your store is created as a separate product, Shopify won’t automatically connect them together as color variants. However, you can create a swatch-based navigation experience that allows customers to easily switch between different color products directly from the product page.
I’ve created a similar demo to help you better visualize how it works:
First, you can keep your current setup where each color is created as a separate product in Shopify. This allows every color to have its own images, URL, and dedicated product gallery while still maintaining size variants within each product.
Then inside the app, you can create a Color Swatches or Image Swatches option to represent the available colors. For the size selection, simply create another option using Buttons or Dropdowns and add your available sizes such as S, M, L, XL, etc.
Next, use the Add/Edit Cross-product Links feature within the Color Swatches option. There, you’ll simply paste the corresponding product URL for each color. For example, the Black swatch links to the Black product page, the White swatch links to the White product page, and so on.
Once configured, when customers click a color swatch, they’ll be automatically redirected to the corresponding product page for that color. This gives shoppers a seamless way to browse between colors while allowing each color to maintain its own product gallery, images, and inventory setup.
This approach works particularly well for stores that prefer managing each color as a separate product but still want the familiar color-swatch experience customers expect. Everything can be configured directly inside the app without requiring custom code or complex theme modifications 
Hello @Lygia2026
Yes, this can be done, but since each color is created as a separate product, Shopify will not treat those colors as normal variant swatches automatically. Your size options can stay as variants, but the colors need to be connected as “linked products.”
The best way is to group the same product colors together using a metafield or tag, then show those related products as clickable color swatches on the product page.
For example:
Each product keeps its own size variants, and the color swatches link customers to the other color product pages.
A possible setup would be:
This is a common solution when colors are separate products instead of variants. It may need a small Liquid customization in the Fabric theme, or you can use a linked product swatch/product options app if you prefer not to edit code.
I’d recommend the metafield approach because it keeps the setup clean and gives you control over exactly which products should appear as color options.
Yes, this is definitely possible.
A common approach is to link the related color products using metafields or metaobjects, then display them as color swatches or clickable color options on the product page. When a customer selects a different color, they’re taken to the corresponding product while still being able to choose from the available size variants.
This works particularly well when each color is set up as a separate product, as it keeps the product page organized and provides a more intuitive shopping experience.
Since you’re using the Fabric theme, I’d first check whether it already supports linked products or color swatches through theme settings. If not, this can be added with a lightweight customization using Liquid and a small amount of JavaScript, avoiding the need for a feature-heavy third-party app unless you need more advanced merchandising features.
