PrestaShop button color: use custom.css instead of editing theme.css
You change a PrestaShop button colour by adding a CSS rule to the custom.css file in your theme. In Classic it is assets/css/custom.css, loaded after the main styles. Do not edit theme.css, because a theme rebuild or update will overwrite it. After saving, clear the cache, otherwise the store will keep showing the old colour.
Author: The TellMyShop team. A guide for PrestaShop store owners: the cause, the manual fix and the same work in a chat conversation.
Last updated: · 5 min read
Where to add the colour so it does not disappear
In the active theme's custom.css, and with a bought theme ideally in a child theme. Before you open any files, look at the theme settings in the admin. Many bought themes have their own configuration module with a choice of colours for buttons and headings. Then the change takes a few clicks and needs no CSS. The Classic theme has no such settings. Each place you can make the change has different consequences.
| Where you change it | Survives a theme rebuild | Survives a theme update |
|---|---|---|
| theme.css | no | no |
| custom.css in the theme | yes | not always, depends on the theme author |
| custom.css in a child theme | yes | yes |
| custom CSS field in the theme settings | yes | usually yes |
The order in which stylesheets load is described in the theme asset management documentation. If theme changes have disappeared on you after an update before, read what to do when a theme update removed your changes.
How to change a button colour step by step
You need access to the theme files via FTP or your host's file manager.
- Open a product page and check the button's class in the browser tools (right-click, Inspect).
- Open the assets/css/custom.css file in the active theme's folder.
- Add a rule for the button and a separate one for the hover state.
- Save the file, keeping a copy of it first.
- Clear the cache in Advanced Parameters > Performance.
- Check the product page in a private window and on a phone.
In the Classic theme, the add to cart button has the class add-to-cart. The rule can look like this:
.product-add-to-cart .add-to-cart {
background-color: #2e7d32;
color: #ffffff;
}
.product-add-to-cart .add-to-cart:hover {
background-color: #1b5e20;
}The hover state is described by MDN under the :hover selector. Phones do not have it, so the base colour has to work on its own.
How to change the colours of other store elements
The same way, with a rule in custom.css, but with a different class. Below are classes from the Classic theme. In a bought theme the names may differ, so always check them in the browser tools.
| Element | Class in Classic | What changes |
|---|---|---|
| All primary buttons | .btn-primary | buttons in the cart, checkout and forms |
| The button on the product page | .product-add-to-cart .add-to-cart | only that one button |
| Price on the product page | .current-price | the colour of the current price |
| Page header | #header | the background of the top of the page |
| Footer | #footer | the footer background |
Change one element at a time and check the page after each change. Several changes at once make it hard to find the one that broke something. Also add a short comment in the file saying what you changed and when. In six months it will be easier to find the rule that needs fixing.
A full change of the theme palette, for example all shades of green at once, is usually work on the theme's source files and a rebuild. A developer or the theme author usually does that.
How to choose a colour that will be readable
Check the contrast between the button text and its background before you save the change. For normal text, accessibility guidelines recommend a contrast of at least 4.5 to 1, as the W3C explains for the contrast criterion. You can check a colour in the WebAIM Contrast Checker by entering the background and text codes.
Sunday, 20:30, and you are changing the green in the file for the third time, clearing the cache and refreshing the page. The bright brand colour looks good in the logo, but white text on it gets lost. A darker shade of the same colour usually helps.
Why can't you see the new colour?
Most often because of the cache or a rule that is too weak. Check in turn:
- Did you clear the cache in the admin and refresh the page bypassing the browser cache?
- Did you edit custom.css in the active theme, not in the parent theme?
- Is the theme's rule more specific than yours? Then add a parent class to your selector.
We say more about the layers of caching in the post PrestaShop changes not visible.
How to change the button colour with the chat
You give the colour and the button. Your chat (Claude or ChatGPT) finds the stylesheet, shows the rule it will add and saves it after your approval, with a copy of the file.
You: Make the “Add to cart” button our green #2E7D32 with white text, slightly darker on hover.
Your chat: Classic theme, the assets/css/custom.css file is empty. White on #2E7D32 meets the contrast recommendation for normal text. I will add:
Before saving I will make a copy of the file. Then I will clear the cache and check the product page.
Card status: waiting for your “yes”old version: (empty file)
new version: .product-add-to-cart .add-to-cart { background-color: #2e7d32; color: #fff; }
new version: .product-add-to-cart .add-to-cart:hover { background-color: #1b5e20; }
If you do not like the colour, the chat restores the previous version of the file from the copy. TellMyShop Free does not change theme files; for that you need TellMyShop Pro with the Theme switch on.
Example request: changing the colour of the “Add to cart” button. The comparison of versions is on the pricing page.
Questions and answers
Where is the custom.css file in PrestaShop?
In the Classic theme it is assets/css/custom.css in the theme folder. PrestaShop loads it after the main stylesheet, so your rules win over the theme's rules. In bought themes the file may have a different name, or the theme has a field for your own CSS in its settings. Check the theme's documentation.
Why not edit theme.css?
Because theme.css is a file built from the theme's source code. When the theme is updated or rebuilt, it is created again and your changes disappear. The custom.css file is meant for your own styles and is not overwritten on a rebuild. When you update a bought theme, it is safer to keep your changes in a child theme.
Does changing the button colour work across the whole store?
That depends on the rule. If you change the general class for primary buttons, all such buttons change: in the cart, at checkout, in forms. If you target only the add to cart button on the product page, only that button changes. In the change preview, the chat shows which rule it is adding.
How do I check that the button colour is readable?
Check the contrast between the text and the background in a free tool, such as the WebAIM Contrast Checker. For normal text, accessibility guidelines recommend a contrast of at least 4.5 to 1. White text on light green or yellow usually does not meet this. A darker shade of the same colour usually helps.
How many theme file changes will the chat make in an hour?
As many as the hourly limits you set in the module panel allow. Before a larger job, the chat checks whether it fits within them, and if not, it suggests stages. Theme file changes work in TellMyShop Pro once you turn on the Theme switch. The switch lasts 24 hours and needs a database backup made the same day. Before every save, the chat shows the difference in the file and makes a copy of it.
PrestaShop is a registered trademark of PrestaShop SA. Claude is a trademark of Anthropic PBC. ChatGPT and OpenAI are trademarks of OpenAI. TellMyShop is not affiliated with these companies.