Page Design Based on Variant Color

Store Design

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

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!!

2

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
3

YAY! Thank you in advance for helping out!

1 Like
4

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

5

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.

6

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

7

https://chaoscases.com/