Page Design Based on Variant Color

Topic summary

A user wants to dynamically change the “add to cart” button color and header logo color on product pages based on the selected variant (e.g., pink variant → pink button and logo, blue variant → blue elements). They’re using the Dawn theme and cite the Skims website as inspiration for this effect.

Current Status:

  • Another user confirmed this is achievable using JavaScript with conditional logic
  • Offered to help implement the solution by reviewing the theme code
  • The original poster shared their store URL (chaoscases.com) for review

Next Steps:

  • Awaiting custom code implementation after theme review
  • Solution will likely involve JavaScript to detect variant selection and apply corresponding CSS color changes
Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.

Hi! I am trying to change the “add to cart” button color and my header logo color on my product page based on the selected variant - i.e the variant selected is pink - add to cart button changes to pink and my website logo changes to pink, or the variant selected is blue - the add to cart button changes to blue and the website logo changes to blue.

The Skims website does this and I am trying to recreate on my end because I think its really cool!

I am using the dawn theme currently.

Thanks for all the help!!

That’s a cool idea! Yes, it’s possible using conditional logic in JavaScript. I can help you set it up—let me take a look at your theme.

1 Like

YAY! Thank you in advance for helping out!

1 Like

:grinning_face_with_smiling_eyes: Let me know if it helps :slightly_smiling_face:

So sorry - not sure if i missed the solution here to try. New to the forum and not sure if solution was posted some where other than this thread.

No worries if possible allow me to check your theme code so that i can sort it perfectly :slightly_smiling_face:

https://chaoscases.com/