Change button color on my wishlist - Dawn Theme 7.01

Topic summary

A user seeks to customize wishlist button styling in Shopify’s Dawn Theme 7.01, specifically wanting to change the button background to black.

Initial Solution:

  • Add CSS code to base.css or theme.css file
  • Target .st-product-card .st-atc-button with black background
  • Alternative method: Insert CSS in theme.liquid before </body> tag

Additional Customizations Requested:

Removing rounded corners:

  • Apply border-radius: 0 !important; to achieve square corners
  • Successfully implemented

Adding border and hover effect:

  • Border: border: 2px solid #000;
  • Hover state: Change background to #d38927 and text color to #000
  • Hover effect works, but border not displaying properly
  • Issue remains unresolved; user suspects buttons may be too large

Multiple community members provided CSS solutions that were marked as accepted answers for the initial color change and corner removal requests.

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

Hi

I would like to change button and textcolor within my whishlist, i want to change the color into black background instead. How can this me done? If someone possible things to try and inspect within google dev tools and inspect the button and find out which section i can find this. Hope you can help me out here, tried everything without luck. Thanks in advance. :slightly_smiling_face: (The yellow button)

See attached file:

Mystore url:

www.dekanten.no

1 Like

Where is it on your website? Can you take a screenshot of it on your website? @Dekanten

1 Like

Hi ofcourse

Just go into a product, add it on wishlist with the green button on top of the product and click the heart icon on header after this have been done. The product will show up like on the previous post. :slightly_smiling_face:

Anything else i can bring to you for information, just ask and i will provide. :slightly_smiling_face:

1 Like
  • Here is the solution for you @Dekanten
  • Please follow these steps:

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
.st-product-card .st-atc-button {
 background: black !important;
}
  • Here is the result you will achieve:

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.st-product-card .st-atc-button{ background-color: #000 !important; color: #fed800 !important; /*change color according to you*/ }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like

Thank u we are into something now, glad this works finally now. :slightly_smiling_face:

1 Like

Thank you very much for your solution, works very well. Is it possible to remove the rounded corner on those buttons? I want to change them into better looking buttons with square corners. :slightly_smiling_face:

Glad to help you. Have a good day.

1 Like

You too and have a wonderful day with your ones. :slightly_smiling_face:

1 Like

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.st-product-card .st-atc-button{ border-radius: unset !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

.st-product-card .st-atc-button {
 border-radius: 0 !important;
}

can you try add more code @Dekanten

Thank u so much for your solution, this works quite good. Thanks again for your contribution. :slightly_smiling_face:

Hi again, is it possible to add a hover and a border around the button? :slightly_smiling_face:

Hope this will be possible. :slightly_smiling_face:

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.st-product-card .st-atc-button{ border: 2px solid #000; /*change color according to you*/ } button.st-atc-button:hover { background: #d38927 !important; /*change color according to you*/ color: #000 !important; /*change color according to you*/ }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like

Hi again, we are into something here and the hover works well but there is no border. Maybe the buttons is to big perhaps? Hope we can figure something out, youre a miracle man aswell. :slightly_smiling_face: