Сhanging Add to Bag button in your Ecwid store

Last updated

Ecwid enables you to alter every bit of your storefront layout so that it will fit your site's design better. You can do it by adding styles to your custom CSS theme. More information about custom CSS themes: How to change Ecwid design. The same approach can be used to change Add to bag button that is displayed on the cart page. 

Please find further explanation and an example of customized Add to bag button below.

Customizing look of Add to bag button

Add to bag button is designed in CSS3, which means it is done with the help of a set of gradients, opacity filters, rounded corners and other CSS effects specified right in the code (they are not static images). It makes it quite flexible to adjust and easy to translate . While it may be quite tricky to manually specify shape or color in the CSS3 codes for beginners, there are plenty ready CSS3 button generators on the web – you can use one of those for creating your own button and copy the generated CSS code to your custom CSS theme. For more details on CSS customizations in Ecwid, please refer to this article: CSS FAQ .


For example, let's make Add to bag button orange, like in the image above. You'll need the following code:

.ecwid .ecwid-btn--addToBag {
 background: #ff9c33;
.ecwid .ecwid-btn--addToBag:hover {
 background: #ffc180;
.ecwid .ecwid-btn--addToBag:focus,
.ecwid .ecwid-btn--addToBag:focus:hover {
 border-color: #ffc180;
.ecwid .ecwid-btn--addToBag:active,
.ecwid .ecwid-btn--addToBag:focus:active {
 background: #ff9c33;

Add it to Ecwid Control panel → Design, CSS Themes, your active CSS Theme.

If you need unique custom design for your store or need multiple style changes, we can help. Please fill in this form: Custom design for Ecwid store. We will be glad to help you designing your Ecwid store.

Customizing text of Add to bag button

Add to bag button in Ecwid is designed by means of CSS3, it is not an image, thus in order to change 'Add to bag' text, you can use the general approach for changing or translating texts in Ecwid, the Storefront Label Editor App.  It allows to change storefront labels right in your Ecwid control panel.


Back to top
Was this article helpful? 9 out of 17 found this helpful