Color Swatches Shopify Dawn Theme (not working?).

[JimmyJT]

Hi, 

Im trying to add color swatches to my Dawn theme 9.0.0. 
I followed almost all tutorials that can be found at this community. 

However everything I try does not seem to work.
I think something is missing in my code.  

Could anyone take a look into my code to see why its not working? 

The last tutorial I tried was: https://websensepro.com/blog/how-to-add-stylish-color-swatches-in-shopify/
Followed all the steps but it wont show color swatches. 

Thanks! 

Store link: https://sterren-stof.myshopify.com/
Password: Sheoto

[PaulNewton]

No code looks like it's even present on the frontend.

When dealing with issue provide an EXACT product url others need to visit to see the current work.

Good luck.

[JimmyJT]

Hi Paul, 

Kinda new to this. 
Thanks for the feedback. 

Do you mean the product url that leads to the page where I want my color swatches to be shown? 
Link: https://sterren-stof.myshopify.com/products/edelsteen-armbandje-2

[PaulNewton]

I followed almost all tutorials that can be found at this community. 
However everything I try does not seem to work.
I think something is missing in my code.  

A page where the work you've done so far is viewable by others that isn't working.

[JimmyJT]

Hi Paul, 

Thanks for the quick reply!

This is my code on my product-variant-options.liquid:

This is my code at the bottom of my base.css

[JimmyJT]

Anyone else who can help me? 

Would be much appreciated 🙏

[PaulNewton]

Screenshots make it harder for others to parse through code and lots of text, squinting isn't fun.

At minimum there is an insert code sample button.

Decrease others effort when seeking help.

Decrease variables and distractions - Ignore the CSS style aspects of this until you have some sort of working HTML output as that's is what matters ,  either visible on the page or findable in the source of the page. Press ctrl+u in most browsers to view source then ctrl+f to try and find some text piece of that code.

Get the base html working then worry about style.

A quick look it's probably the metafield  looks like it was changed..

the name and key should be color.values plural with an s.

Meanwhile in the screenshot it's referencing the singular word ".value".

This depends on what name and key was actually used when creating the metafield definition.

It should be product.variants[forloop.index0].metafields.color.values  or Possibly product.variants[forloop.index0].metafields.color.values.value

The second .value may be needed because metafield definitions quirk though color objects should just output  🤷

 https://shopify.dev/docs/api/liquid/objects/metafield#metafield-access-metafields

  https://shopify.dev/docs/api/liquid/objects/color 

If you just need this customization done with a service you can contact me directly to debug it.
Please provide context: store url, theme name, post url and any further detail. Contact Info in signature.

Good Hunting.

[MRamzan]

Here is the latest video which you can follow: