Custom colour swatch not showing - ENVY

[RMN05]

Maybe somebody can help me with why this is happening.
I’m using the shopify theme ENVY for my store and whenever I add a new colour swatch; either a hex code colour or an image it is not showing on my website. It shows up on my shopify product listing page through the dashboard but not on my live product page or collection page.

Hopefully somebody has some solutions for me!?

On the dashboard above, on the website below. It just shows as an empty colour swatch.

[ZestardTech]

Hello @RMN05

Please share your store URL and password.
So that I will check and let you know the exact solution here.

[RMN05]

Oh yes… so you can gain access to all my personal details, bank information and income? how stupid do you think I am. Reported you,

[Mehran_Ali]

Without looking at the live website preview can someone help you?
The @ZestardTech is just asking for the website link so he can see the issue and try to resolve

if you are afraid of the password he asks it is not that password that gives access is a security password when you share you have no live store it 4 digit password protected we can’t see the website until we input the password

[RMN05]

Oh my mistake.
Well, my website isn’t password protected. so it’s accessible by anybody.

Handmade Jewellery

[Mehran_Ali]

Hi @RMN05

The issue is that you are using the word charcoal which is not available so instead of the name try using the hex code " #4a4a4a "

See in the ScreenShot:

[ZestardTech]

Hello @RMN05

I had asked for your store’s URL, and if it is password-protected, I only asked for the password. I never asked for access to your store.

Without the store URL, how can I assist you?

[RMN05]

Not sure if that is the exact problem though. I’ve added a custom colour called “charcoal” and a hex code for this swatch and all others, let me show you.

[RMN05]

sorry I misunderstood your message.

[Mehran_Ali]

I get the Issue the main issue is in the theme coding the theme is not using the Hexa code it’s using the actual name of color due to which there are some color name which is not supported into Css directly by its name this is the main issue

To Resolve this issue you have Two ways:

First Using CSS:

1. Go to the Online Store

2. Click on three dots and select Edit Code

3. Find theme.css / base.css

4. past that CSS Code:

.swatch-element.bone label {
    background-color: #e3dac9 !important;!i;!;
}

.swatch-element.charcoal label {
    background-color: #4a4a4a !important;!i;!;
}

Note: This issue resolves your problem for the particular color like for Bone and Charcoal if you see any other color is missing you have again write the CSS for that color that is why ist resolves the issue but not the recommended solution.

Second Modify the Liquid Code:

The Second way is recommended to modify the liquid code of the theme so that it uses Hexa code. for that, you need an expert who can modify your theme liquid code. i also can help you with that