Color Swatches Shopify Dawn Theme (not working?).

JimmyJT
New Member
6 0 0

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

Replies 7 (7)

PaulNewton
Shopify Partner
6339 579 1345

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.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


JimmyJT
New Member
6 0 0

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
Shopify Partner
6339 579 1345

 

 

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.

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


JimmyJT
New Member
6 0 0

Hi Paul, 

Thanks for the quick reply!

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

JimmyJT_0-1681587772903.png


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

JimmyJT_1-1681587941525.png

 



JimmyJT
New Member
6 0 0

Anyone else who can help me? 

Would be much appreciated 🙏

PaulNewton
Shopify Partner
6339 579 1345

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.valueplural 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.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


MRamzan
Shopify Partner
165 1 21

Here is the latest video which you can follow:

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112