You can change all of your store's buttons at once or individually by going to the Store manager → Design. Once you're there, scroll down to the bottom and find the Create theme button:

Or, if you already have a theme that's activated, click Edit theme:

Click Add New CSS Theme (or edit the existing theme) and paste the new CSS code (examples of most common button CSS codes can be found below). Make sure the theme is active and save the changes.


The large buttons on your website include buttons for Add to Bag, Continue Shopping on the product page, Continue, Checkout, Place Order.

The buttons that are considered small include Add More, Go to Checkout, Continue Shopping on the cart page, Clear Bag.

Below, you will find codes for:


All large buttons

Replace the below hex codes (#F0F8FF) or colors with a preferred hex code or color title (for example, #FF0000 = red).

Button color:

.ec-size .ec-store .form-control–primary .form-control__button { background-color: red;}


Button color on hover:

.ec-size .ec-store .form-control–primary .form-control__button:hover { background: #F0F8FF; }

Text color:

.ec-size .ec-store .form-control–primary .form-control__button { color: black; }

Text color on hover:

.ec-size .ec-store .form-control–primary .form-control__button:hover { color: green; }


Add to Bag

Button color:

.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button { background: #FFA500; }

Button color on hover:

.ec-size .ec-store .details-product-purchase__add-buttons .form control__button:hover { background: #FFA500; }

Text color:

.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button { color: #000000; }

Text color on hover:

.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button:hover { color: #000000; }


Buy Now

Button + text color:

.ec-size.ec-size .ec-store .form-control .form-control__button { background-color: red; color: black; }

Button + text color on hover:

.ec-size.ec-size .ec-store .form-control .form-control__button:hover { background-color: yellow; color: blue; }


Checkout

Button + text color:

.ec-size .ec-store .form-control–primary.ec-cart__button–checkout .form-control__button { background-color: black; color: blue }

Button + text color on hover:

.ec-size .ec-store .form-control–primary.ec-cart__button–checkout .form-control__button:hover { background-color: red; color: white }


Continue

Button + text color:

button.ecwid-btn–primary.ecwid-btn–continue { background: yellow; color: black }

Button + text color on hover:

button.ecwid-btn–primary.ecwid-btn–continue:hover { background: red; color: white}


All smaller buttons

Button + text color:

.ec-size .ec-store .form-control–secondary .form-control__button { background: black; color: yellow; }

Button + text color on hover:

.ec-size .ec-store .form-control–secondary .form-control__button:hover { background: white; color: red; }


Add More

Button + text color:

.ec-size .ec-store .details-product-purchase__add-buttons .form-control–secondary .form-control__button { background-color: purple; color: green; }

Button + text color on hover:

.ec-size .ec-store .details-product-purchase__add-buttons .form-control–secondary .form-control__button:hover {background-color: green; color: purple; }


Go to Checkout

Button + text color:

.form-control–primary.form-control–flexible.details-product-purchase__checkout .form-control__button { background: red; color: black; }

Button + text color on hover:

.form-control–primary.form-control–flexible.details-product-purchase__checkout .form-control__button:hover { background: black; color: red; }


Hide the Add to Bag button on all product pages

.details-product-purchase__controls { display: none; }


Additional resources

Did this answer your question?