My fabric swatches are not displaying

[bridget47]

Hi I desperately need to fix the fabric swatches on my site: smudj.co.za 

I just uploaded new products on pre-order but my colours are not showing up. 

We use the ella theme and we launch this collection tomorrow

[Asad-Mahmood]

Need to check theme code to debug the issue

[bridget47]

It is displaying fabric swatches from previous products though

[Laza_Binaery]

Hi @bridget47 

It looks like a strange issue. But check first if those new products use the same product template. Next, check the actual files of the colors mentioned. 

For example https://smudj.co.za/cdn/shop/files/black-pinstripe.png?4848  returns a 404 so it is missing or the link is not correct. But for colors that works link is like https://smudj.co.za/cdn/shop/files/soapstone.png?v=10726325820796464221 so see the end after ? is different. That 4848 does not look good.

[bridget47]

Definitely the same product template. How would I resolve the actual files?

[tim]

You need to go to your Files in admin and ensure that there is a file named black-pinstripe.png. then you click the "copy link" button, paste clipboard content into text editor or browser address field and make sure that it matches whatever the them outputs.

You ca safely ignore whatever is after ?, only the part before ? matters.

the files on this product are:

• smudj.co.za/cdn/shop/files/navy-pinstripe.png
• smudj.co.za/cdn/shop/files/black-pinstripe.png

These files must be uploaded by you, they are not created automatically by the system.

See also https://halosoft.gitbook.io/ella-documentation/product-page/product-information/product-variant#the-... 

[bridget47]

Hi This is still not solving the issue. All of the swatches have been uploaded with the file name and its still showing all of my new products with plain white colours 

[tim]

No, as @Laza_Binaery pointed out, the files are not available where theme code expects them to be.

Can you make a screenshot of your Files screen with navy-pinstripe.png or black-pinstripe.png visible and can you paste here the links to these files as I've instructed above?

[bridget47]

@tim thanks for the help.

Please see links here: https://cdn.shopify.com/s/files/1/2216/4243/files/Black_pinstripe.png..png?v=1742475680

https://cdn.shopify.com/s/files/1/2216/4243/files/navy-pinstripe.png..png?v=1742475839

[Laza_Binaery]

Hi @bridget47 

You see the issue, right?

You need to rename those files: so try to rename Black_pinstripe.png..png to black-pinstripe.png  ( So nodouble. png, extra . and capital B and no _ but use -) that should match the format needed to show correctly.

And navy-pinstripe.png..png to navy-pinstripe.png but check all other files you uploaded ant not showing.

Good luck

[tim]

In addition, just to put it side by side:

What theme code expects	What was uploaded
black-pinstripe.png	Black_pinstripe.png..png
navy-pinstripe.png	navy-pinstripe.png..png

The theme code does not know what files are available -- it simply takes the option value, converts it as explained here(theme dox) and puts it into your page HTML.

Then it's up to you to name your files to match.

[Easify-Jolie]

Hi @bridget47 

Looks like your fabric swatches aren’t displaying correctly. If you want a quick fix without any coding, I recommend trying Easify Product Options. It lets you set up and customize swatches effortlessly, so you can get your colors showing properly before launch. Here's how it works:

• This is the result:

• This is the app setting:

This app is simple to set up, and I hope you check it out. Let me know or reach out to Easify if you need any support! 🤗