Help with Filter Issue – Selected Color Swatch Not Showing Product Properly

Technical Q&A
, , , , ,
1

Hi everyone,

I’m facing an issue with the filtering on my Shopify store. When a customer selects a color swatch (e.g., Blue Links), instead of showing the product that has that Blue Links variant, it shows the main product style grouped with other colors. Ideally, I want the product that matches the selected swatch/color to be shown first (or only that one). This is causing confusion for users as they can’t easily see the color they selected. Can anyone suggest a way to fix this or point me in the right direction? I’m happy to share my website link for reference: https://www.apnyapparel.com/

Thanks in advance for your help!

2

Here are a few solutions or directions you can try:

  1. Update Your Theme’s Variant Handling Logic

Most Shopify themes display the default product image, even when a filter or swatch is selected. To fix this:

  • Go to your theme code (Online Store > Themes > Actions > Edit code).
  • In collection.liquid or product-card.liquid (depending on your theme), locate the logic that handles how products are shown.
  • You may need to modify it so the first image displayed corresponds to the selected variant, if available.

This might involve adjusting JavaScript to:

  • Detect the selected swatch (e.g., “Blue Links”),
  • Search for the variant associated with it,
  • Dynamically load that image and display it first.
  1. Consider Using Shopify Search & Discovery App

If you’re using Shopify’s native filter system, install or check the Search & Discovery app:

  • Go to the Filters > Color section.
  • You can link swatches to specific variants (sometimes via metafields), but behavior still depends on your theme.
  1. Use a Variant-Specific Display App

If you want each color to show as a separate product in the collection page, you could use an app like:

  • “Variant Image Automator” by StarApps Studio
  • “Swatch King” by StarApps
    These apps allow separate URLs and images for each color, improving the user experience dramatically.
  1. Create Separate Listings (if necessary)

As a last resort, you can list each color variant as its own product (e.g., “Tee - Blue Links,” “Tee - Red Flame”) to control how filtering and images are displayed. This adds some manual management but gives you full control.

3

Hi there! I understand how frustrating this can be Shopify’s default behavior when filtering by color swatch often still groups all variants under a single product page, showing the default image instead of the selected variant (like your “Blue Links” color).

Here are a few solutions or directions you can try:

  1. Update Your Theme’s Variant Handling Logic

Most Shopify themes display the default product image, even when a filter or swatch is selected. To fix this:

  • Go to your theme code (Online Store > Themes > Actions > Edit code).
  • In collection.liquid or product-card.liquid (depending on your theme), locate the logic that handles how products are shown.
  • You may need to modify it so the first image displayed corresponds to the selected variant, if available.

This might involve adjusting JavaScript to:

  • Detect the selected swatch (e.g., “Blue Links”),
  • Search for the variant associated with it,
  • Dynamically load that image and display it first.
  1. Consider Using Shopify Search & Discovery App

If you’re using Shopify’s native filter system, install or check the Search & Discovery app:

  • Go to the Filters > Color section.
  • You can link swatches to specific variants (sometimes via metafields), but behavior still depends on your theme.
  1. Use a Variant-Specific Display App

If you want each color to show as a separate product in the collection page, you could use an app like:

  • “Variant Image Automator” by StarApps Studio
  • “Swatch King” by StarApps
    These apps allow separate URLs and images for each color, improving the user experience dramatically.
  1. Create Separate Listings (if necessary)

As a last resort, you can list each color variant as its own product (e.g., “Tee - Blue Links,” “Tee - Red Flame”) to control how filtering and images are displayed. This adds some manual management but gives you full control.

4

Hi @Adesh1

If you want to make the chosen color swatch (e.g., Blue Links) as priority, then you can take advantage to link EACH variation to a unique product URL thru metafields or custom liquid code. Or apps like Variant Image Automator and Swatch King can show isolated variants to be selected first for more clarity without having to split your products.

5

Hi @Adesh1 ,

There are 2 options available right now. Can you please confirm if the first solution works for you? Here is the first solution :

Go to Themes >> Edit code >> Global.js, search and comment the below code
window.history.replaceState({ }, ‘’, ${this.dataset.url}?variant=${this.currentVariant.id});

Basically, above code will remove the varient id and I think it will work. If it didn’t worked, please message here so that I can provide you the another code for you.

6

Hi

“Global.js” not found this file

7

@Adesh1 Yes, basically I have checked and confirmed that this required custom code to implement. It’s not quick and fast. If you want to get this done, feel free to message me with collaboration code.