Change "add to cart" color

We want to change the checkout button (the “legg i handlekurv”) button to this green color: #76c54d

Here is the link to the product website: https://nattlig.no/products/nattligputen

Can someone give me some code and guide me on how to implement it? thanks!

@Nattlig , Hello! Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file. If you have a custom CSS file, open that instead.
  5. If you can’t find your custom CSS file, open base.css" OR “theme.css”.
  6. Add the following code at the end of the file.
product-form.product-form .product-form__buttons .button {
    background: #76c54d;
}

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

Hi @Nattlig ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:


Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

  • Here is the solution for you @Nattlig
  • Please follow these steps:

  • Then find the theme.liquid file.
  • Then add the following code at the before tag and press ‘Save’ to save it.

  • Here is the result you will achieve:

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

Very nice! Can you give me the full code which also removes or changes the button outline color to the same color?

Also do you know how to make the “sale”/ “Salg” label green as well?

Nattlig_0-1725972873590.png

It can done by theme customisation with theme settings,

Go to online store → Open theme customisation → Open theme settings.

Add color scheme whichever you want.


Can you try this code @Nattlig

Hello @Nattlig

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

.product-form__submit { background-color: #76c54d !important; } .product-form__submit:before, .product-form__submit:after { box-shadow: none !important; }

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

Hi

Edit your theme file

Add bellow css in your base.css file.

.product-form__buttons button {
background: #76c54d;
border: none;

}