Shopify themes, liquid, logos, and UX
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
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 </head> tag:
<style>
.product-form__submit {
background-color: #76c54d !important;
}
.product-form__submit:after {
box-shadow: none !important;
}
</style>
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 😍
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
- 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 </head> and press 'Save' to save it.
<style>
.product-form__submit {
background: #76c54d !important;
}
</style>
- Here is the result you will achieve:
- 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
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?
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.
<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
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
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>
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.