Color Swatch issue on collection pages

Store Design
, , , , ,

Topic summary

A Shopify store owner is experiencing broken color swatch images on collection pages. Some PNG swatches uploaded to the Assets folder are not displaying correctly.

Core Issue Identified:

  • The rendered image URLs contain an incorrect path segment (/t/89/) instead of the correct one (/t/93/)
  • Example: The “desert dust” swatch loads from .../t/89/assets/... but the actual file exists at .../t/93/assets/...
  • This path mismatch causes certain swatches to fail loading while others work fine

Troubleshooting Attempts:

  • Initially suggested the images were missing from Assets folder, but screenshots confirm they exist
  • Proposed replacing spaces with hyphens in filenames, but this didn’t resolve the issue
  • The problem appears to be in the theme’s swatch rendering code (likely in swatch.liquid)

Current Status:
The discussion remains unresolved. The helper requested the theme name to provide specific code fixes, as the exact location and structure of the swatch logic varies by theme. The issue requires identifying where the incorrect path (/t/89/) is being generated in the theme files.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hi Shopify community,

I have an issue with some color swatches on my collection pages. It affects .pngs I have added to the ASSETS folder in the Shopify Online Store admin. You’ll see below that some of them are note showing anymore in collection pages.

I’ve noticed something when looking at the code. If you take the first product at this page: https://www.hiroclark.com/collections/color. And look at the first dot image source (desert dust color) is: https://www.hiroclark.com/cdn/shop/t/89/assets/desert%20dust.png. But when looking at it in my asset folder the source of it is https://cdn.shopify.com/s/files/1/0542/2553/t/93/assets/desert%20dust.png?v=1739377407. So it seems there’s a mistake in the code as it should be /93 instead of /89. I am not sure where to fix this. Any idea on your end ?

Check this specific collection and you’ll see what I mean: https://www.hiroclark.com/collections/color & below screenshot.

Capture d’écran 2025-02-13 à 09.41.09.png
Capture d’écran 2025-02-13 à 09.41.09.png2912×1608 322 KB

Thanks for your help!
Antoine

2

Hi @ablakart ,

I looked into it and found that the image source of the swatch code is looking for in the asset folder is missing, please place that color name swatch image in your assets theme folder example “salton sand.png” and then check hopefully it will resolve.

Thanks

3

Hi @Liquid_xPert_SJ

Thanks a lot for your help. This is weird because I can actually see the assets in my asset folder :(.

See below screenshot:

Capture d’écran 2025-02-13 à 10.25.35.png
Capture d’écran 2025-02-13 à 10.25.35.png2904×1758 327 KB

Thanks,

Antoine

4

just replace the space with a hyphen (-) like i explain the file name above.

5

Thanks for your help. It does not seem this is the issue here. I’ve noticed something when looking at the code. If you take the first product at this page: https://www.hiroclark.com/collections/color. And look at the first dot image source (desert dust color) is: https://www.hiroclark.com/cdn/shop/t/89/assets/desert%20dust.png. But when looking at it in my asset folder the source of it is https://cdn.shopify.com/s/files/1/0542/2553/t/93/assets/desert%20dust.png?v=1739377407. So it seems there’s a mistake in the code as it should be /93 instead of /89. I am not sure where to fix this. Any idea on your end ?

6

@ablakart well you can find the file might be with the name swatch.liquid where the condition should be shown variant image something like this, Since every theme files and code structure is different i cannot exactly explain what code should be needs to be update and where to update, what is your theme name?

Thanks