We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Re: Change "add to cart" color

Change "add to cart" color

Nattlig
Excursionist
19 0 9

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_0-1725970965911.png

 

Replies 9 (9)

dws_pvt_ltd
Shopify Partner
369 69 88

@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;
}

 

 

dws_pvt_ltd_0-1725971429840.png

 

 

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

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.

BSSCommerce-HDL
Shopify Partner
2305 835 907

Hi @Nattlig

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

BSSCommerceHDL_1-1725971600679.png

 

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

BSSCommerceHDL_2-1725971649263.png

 

 

 

<style>
.product-form__submit {
    background-color: #76c54d !important;
}

.product-form__submit:after {
    box-shadow: none !important;
}
</style>

 

 

Here is result: 

BSSCommerceHDL_0-1725971544958.png

 

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

BSS-TekLabs
Shopify Partner
2401 695 836

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

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg

- Then find the theme.liquid file.
- Then add the following code at the before tag </head> and press 'Save' to save it.

<style>
.product-form__submit {
    background: #76c54d !important;
}
</style>

- Here is the result you will achieve:

BSSTekLabs_0-1725971751610.png

 

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

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


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
Nattlig
Excursionist
19 0 9

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

Nattlig
Excursionist
19 0 9

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

 

Nattlig_0-1725972873590.png

 

dws_pvt_ltd
Shopify Partner
369 69 88

It can done by theme customisation with theme settings,

Go to online store -> Open theme customisation -> Open theme settings.

download (46).png

Add color scheme whichever you want.

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.
BSS-TekLabs
Shopify Partner
2401 695 836
<style>
.product-form__submit {
    background: #76c54d !important;
}
.product-form__submit:after {
    box-shadow: none !important;
}
span.badge.price__badge-sale {
    background: #76c54d !important;
}
</style>

Can you try this code @Nattlig 

BSSTekLabs_0-1725974225436.png

 

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


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

Tech_Coding
Shopify Partner
520 133 131

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 </body> on theme.liquid
<style>
  .product-form__submit {
      background-color: #76c54d !important;
  }
 .product-form__submit:before, .product-form__submit:after {
      box-shadow: none !important;
  }
</style>

Tech_Coding_0-1725974658508.png

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

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.

KuldeepKumar20
Shopify Partner
316 38 66

Hi 

Edit your theme file

Add bellow css in your base.css file.

 

 

.product-form__buttons button {
background: #76c54d;
border: none;
}
For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: codermail30@gmail.com