How can I Change the hover variant picker colour ?

Store Design

Topic summary

A user wants to customize their variant picker hover color to match their ‘Add to Cart’ button color (#1A374E).

Solutions Provided:

Two community members offered similar CSS-based solutions:

  • Method: Add custom CSS code to the theme.liquid file
  • Location: Insert code above the </body> tag (one response suggests before </head>)
  • Implementation: Access Online Store → Theme → Edit Code → Find theme.liquid

Both responses include code snippets, though the actual CSS code appears corrupted or reversed in the conversation text, making it unreadable. Screenshots were shared showing the expected results.

Status: Solutions provided but not yet confirmed as implemented. One additional user requested the store URL, possibly to offer further assistance.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

How can I make the variant picker colour the same as my “Add to Cart” button colour? The colour is 1A374E

Screen Shot 2024-11-21 at 1.24.28 AM.png
Screen Shot 2024-11-21 at 1.24.28 AM.png564×367 10.5 KB

Screen Shot 2024-11-21 at 1.24.23 AM.png
Screen Shot 2024-11-21 at 1.24.23 AM.png494×275 9.49 KB

1 Like
2

Hey @mayatranquila

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1732171393196.png
Moeed_0-1732171393196.png656×666 26.6 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the tag

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

4

Hello,

Please share “Store URL”

Thanks!