Color Swatch metafield stop working after theme change

[Raymenheng]

I was using the Kalles theme v 4.3.6, color swatch was working perfectly fine. Then I am trying to update the theme to v 4.3.7.1, the color swatches stop fetching from the metafields that I set up. I crawl through all of the setting, I just can't find out why. Then I switch to an older Ella theme, color was work fine before, now it stop working too! Does anyone have any idea how I can fix this? Thank you so much!

Old theme:

New theme

[MustafA16]

hey @Raymenheng  if you feel comfortable then try this one to solved your problem 
https://youtu.be/vk8KUZN0hrI?si=o_mbaHYoNl_mnIH-
and if this is helpfull for you then don't forget to like and mark it solution 

[Dotsquares]

Hello @Raymenheng 
It seems the recent theme update have affected color swatches to retrieve data from metafields in a different way.
Follow these simple steps to check and resolve the issue:

Check Metafield Settings – Ensure that metafield keys and namespace are correctly set under Settings > Custom Data in Shopify since theme updates can have the risk of resetting or altering metafield relationships.

Verify Theme Code Updates – If the update changed the theme code in how it loads swatch data, look for version-to-version differences in relevant files such as product-form.liquid, variant-picker.liquid, or theme.js.

Re-save Metafields – Try re-saving the metafields or rearranging them in your product settings to refresh the connection.

Clear Cache & Test in Incognito – Some updates might not be immediately visible due to caching. Test the store in an incognito browser or clear your Shopify theme cache.

Rollback to a Previous Version – If the issue persists, consider rolling back to an earlier working version of the Kalles theme while still troubleshooting.

[Easify-Jolie]

Hi @Raymenheng 

If you're open to using an app, Easify Product Options makes it simple to set up color swatches without any coding. It works seamlessly across different themes, so you won’t have to worry about compatibility issues when updating or switching themes. Plus, your product options are available in the free plan, so you can try it out at no cost. Here's how it works:

• This is the result:

• This is the app setting:

Easify is a hassle-free solution, and I think you’ll love it. Reach out to Easify if you need any help with the setup! 🤗

[Raymenheng]

So I found the fix for it myself, it's the theme.css, I copied the the these part from 4.3.6 to 4.3.7, then it worked!

In 4.3.6 (working one)
[class*=' bg_color_'] {
font-size: 0;
--t4s-bg-color: #e5e5e5;
background-color: var(--swatch--background, var(--t4s-bg-color));
}

4.3.7

    [class*=' bg_color_'] {

        font-size: 0;

        --t4s-bg-color: #e5e5e5;

        background-color: var(--t4s-bg-color);

        background-image: var(--swatch--background);

    }