Some of our clients choose to populate color variations as separate products instead of using ↗︎Variants, as a workaround for Shopify's limitations:

1. Show each color as a separate product on Collection pages
2. Display only images of selected color in product gallery on Product pages.

We've developed the 'Linked Products' feature, which allows linking products and displaying them as ‘Color swatches' block on the ‘Product page’ in the ‘Product overview’ section.

Setup

1. Create a product metafield custom.linked_products. For this, navigate to Settings → Custom data → Products, and click on Add definition. Fill out the fields exactly as shown in the screenshot below.

   

2. Then, go to the product editing page, find the newly created Linked products metafield, and select the products you need to link. Also, select the current product if you want it to appear first and look selected. You will need to do the same with each linked product.

   

3. Now, go to the Theme Editor, select the Default product template, and display the Linked Products block in the Product Overview section.

   

4. To adjust the design of the Linked Products block, open Theme Sections → Variant Selector and scroll down to the Linked Products header. There, you can change the ratio, focal point, and corner radius of the swatches. If you move up a bit, you can toggle the shadow on or off.