Linking separate Shopify products with color swatches is useful when each color deserves its own product page but shoppers should still experience the group as one item. It is common with clothing, footwear, bundles, or products where color changes the photography, inventory setup, price, or merchandising story.
The target is simple: a shopper opens one product, sees the available colors, and can move to another color without searching the collection again. This guide uses Supra Swatch Colors, which supports both regular Shopify variants and swatches that link separate products.
Before you start
You need the individual products already created in Shopify. Each one should have its own title, images, price, inventory, and URL. For example, a jacket in Navy, Clay, and Moss can remain three separate products if that is how your catalog is managed.
Check these items first:
- Every product is published to the same sales channel.
- Each product has a clear color value in its title, tag, or internal naming convention.
- The product photos make the selected color obvious.
- The products belong to the same collection or group you plan to maintain.
You do not need to edit theme code for this setup. The point of a linked-product swatch system is to keep the catalog structure intact while making the storefront easier to browse.
1. Decide which products belong in one group
Start with a single family of products that a shopper would reasonably expect to switch between. The products should represent the same core item, not merely related items. A linen shirt in three colors is a good group. A linen shirt, a linen trouser, and a tote bag are not.
Give the group a consistent internal rule. You might group by shared style name, a product type, vendor, or a dedicated tag such as jacket-archer. The rule matters because it helps the next person on the store team understand why those pages are connected.
What you should see: a clean list of separate Shopify products that differ by color but describe the same purchase decision.
2. Create the linked-product swatch group
Open Supra Swatch Colors and create a product group. Add every separate product that represents a color option, then assign the color or image swatch that should represent each one. If the product imagery already does the job better than a flat color, use an image swatch. If the colors are distinct and familiar, a simple color swatch is usually easier to scan.
Keep the label honest. If the products vary in more than color, do not hide that difference behind a tiny circle. A different fabric, fit, or price should be visible in the product title, selection label, or page content after the shopper switches.
Choose a swatch style that suits the storefront, then check its size, shape, label, tooltip, and selected state. Supra Swatch Colors includes more than twenty styling options, but the best setting is usually the one that is instantly recognizable and does not compete with the product photography.
3. Add the app block to the product template
In Shopify Admin, go to Online Store, then Themes, then select Customize. Open the product template used by the grouped products. Add the Supra Swatch Colors app block near the variant picker or near the product title and price.
Place it where shoppers expect to make a color decision. For most apparel stores, that means above the Add to cart button and close to any size selector. Putting the swatches after a long description asks the shopper to hunt for a basic option.
Save the template, then preview one product in the group. Select a different swatch and confirm that the browser moves to the corresponding product page. The selected state should update so the shopper can tell where they are.
What you should see: the swatch group appears on every intended product page, and each swatch opens the correct product URL.
4. Check the product page after every switch
Click through every color from every product page in the group. This takes a few minutes and catches most setup problems. Check the title, gallery, price, stock state, size selector, and Add to cart button after each change.
Linked products are separate pages, so the details are allowed to differ. That is often why the products are separate in the first place. The important part is that the swatch behaves like a helpful navigation control rather than a misleading variant selector.
Test the flow on a phone as well. Swatches that look tidy on a wide desktop can wrap awkwardly on a small screen, especially with image swatches or long labels. Make sure the active state is visible without relying only on color; a border, check mark, or label helps shoppers who cannot distinguish every hue.
5. Add swatches to collection cards when discovery matters
If your collection pages are doing real merchandising work, add swatches there too. Shoppers often decide which color they want before opening a product. Showing the choices on collection cards can reduce unnecessary page loads and makes a color-heavy catalog feel more deliberate.
Supra Swatch Colors supports collection-page swatches without code. Keep the collection version smaller and simpler than the product-page control. Its job is to reveal options and help navigation, not duplicate every detail from the full product page.
Troubleshooting
A swatch is missing. Confirm that the product is published, is included in the group, and uses the correct product template. Also check whether a collection or market hides the product.
The swatch opens the wrong product. Review the group assignment and make sure two products have not been given the same swatch value by mistake.
The colors look inconsistent. Use a shared swatch value or replace a loosely matched color circle with an image swatch taken from the real product.
The group looks good on desktop but not mobile. Reduce the swatch size, simplify labels, and preview the product page on a narrow viewport before publishing the change.
Final check
A linked-product swatch group should make the catalog feel smaller, not more complicated. Build one group, place the app block near the buying controls, test every destination, and then repeat the same pattern for the next product family. Once the flow is solid, install Supra Swatch Colors and use it to keep color choices visible across product and collection pages.