how to change the color of checkout buttons and apply filter with Dawn theme

Lahijadeljeque
Visitor
1 0 0

Hello to all.

I would like to know if someone could help me to change the color of the checkout buttons and filter products, I attach photo of the buttons to which I refer.

Thanks
Captura de pantalla 2023-09-18 a las 19.09.36.png

 

Captura de pantalla 2023-09-18 a las 19.09.25.png

 

Reply 1 (1)

Liam
Shopify Staff
2731 302 777

Hi Lahijadeljeque,

 

There's a couple of ways you could change the color of a specific button (or any element) on a Shopify store and the process depends on how colors are currently set up on your theme, and how much customisability you want to give yourself in controlling the colours. For example if your theme is using color schemes, you could create a bespoke color that would be applied to the specific elements and then you could set that color from the theme editor. This would be the approach I'd recommend if you're building a theme for the Shopify Theme Store, or for a client. 

 

If this is for your own store and you don't need to be able to control the color on the theme editor an easier approach could be to make some changes to the code of your theme. You'd need to:

  1. Identify where the button element is contained in the theme 
  2. Add a custom class name to the element
  3. Create a CSS rule that targets the custom class name and defines a new color for the button

Please note, before making any code changes to your theme, that you've duplicated your theme and are making changes to an unpublished version of your theme to avoid any errors appearing on your live store. 

 

It looks like you might be using Dawn (or another free theme) and you're looking to change the "Checkout" button in the cart drawer component. This means you'd be looking to make a change in the cart-drawer.liquid file which is in your theme's /snippets directory. If you use Google inspect tool to analyse the button you can see that it has an ID of `CartDrawer-Checkout` so if we search for that in the cart-drawer Liquid file we'll find where that element is (you can see it on the repo here, but it could look different depending on the version of Dawn you're using).

 

Now you'll want to add a custom class to the button element, so you would change `class="cart__checkout-button button"` to something like `class="cart__checkout-button button custom-color"` (so you're adding a new class "custom-color" that we'll be able to reference in your theme's stylesheet). 

 

Next, you'll open up your themes base.css file which is in the /assets directory and at the very bottom of the file you can create a new CSS rule that targets the custom class you've just added and defines a new color for any element that has that class. This is what you'd add:

 

.custom-color {
  background-color: #008000; /* Replace hexcode with your desired color */
}

 

You'd want to replace `#008000` here, which is green, with the hexcode you'd prefer. Now when you navigate to the product page, and add a product to cart you'll see a different color for your checkout button:

 

 

Hope this helps!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog