Tip: Before you get started, familiarize yourself with how to add the CSS codes to your store theme.
In this article you will learn the CSS code needed to update Larger buttons (Add to Bag, Continue, Checkout, Place Order); Smaller buttons (Add More, Go to Checkout, Continue Shopping on cart page, Clear Bag); and Buy Now buttons
Larger buttons
The large buttons in your store include Add to Bag, Continue Shopping on product page, Continue, Checkout, Place Order. You can change all these buttons with one code or alter them separately.
Use the following CSS code to update all the larger buttons at once. Feel free to change "red" and "black" in the examples to any colors you like.
/*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: red;
}
/*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: black;
}
Copy
To change individual buttons:
Add to Bag
/*Button color*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button {
background: red;
}
/*Button color on hover*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button:hover {
background: red;
}
/*Text color*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button {
color: black;
}
/*Text color oh nover*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button:hover {
color: black;
}
Copy
Checkout
/*Button color*/
.ec-size .ec-store .ec-cart__button {
background: red;
}
/*Button color on hover*/
.ec-size .ec-store .ec-cart__button:hover {
background: red;
}
/*Text color*/
.ec-size .ec-store .ec-cart__button {
color: black;
}
/*Text color oh nover*/
.ec-size .ec-store .ec-cart__button:hover {
color: black;
}
Copy
Continue
/*Button color*/
button.ecwid-btn--primary.ecwid-btn--continue {
background: red;
}
/*Button color on hover*/
button.ecwid-btn--primary.ecwid-btn--continue:hover {
background: red;
}
/*Text color*/
button.ecwid-btn--primary.ecwid-btn--continue {
color: black;
}
/*Text color oh nover*/
button.ecwid-btn--primary.ecwid-btn--continue:hover {
color: black;
}
Copy
Place Order
/*Button color*/
button.ecwid-btn--primary.ecwid-btn--placeOrder {
background: red;
}
/*Button color on hover*/
button.ecwid-btn--primary.ecwid-btn--placeOrder:hover {
background: red;
}
/*Text color*/
button.ecwid-btn--primary.ecwid-btn--placeOrder {
color: black;
}
/*Text color oh nover*/
button.ecwid-btn--primary.ecwid-btn--placeOrder:hover {
color: black;
}
Copy
Smaller buttons
You can also change the smaller buttons, the secondary ones: Add More, Go to Checkout, Continue Shopping on cart page, Clear Bag.
Here are the codes for changing all these buttons at a time:
/*Button color*/
.ec-size .ec-store .form-control--secondary .form-control__button {
background: red;
}
/*Button color on hover*/
.ec-size .ec-store .form-control--secondary .form-control__button:hover {
background: red;
}
/*Text color*/
.ec-size .ec-store .form-control--secondary .form-control__button {
color: black;
}
/*Text color oh nover*/
.ec-size .ec-store .form-control--secondary .form-control__button:hover {
color: black;
}
Copy
To change individual buttons:
Add More
/*Button color*/
.ec-size .ec-store .form-control--secondary .form-control__button {
background: red;
}
/*Button color on hover*/
.ec-size .ec-store .form-control--secondary .form-control__button:hover {
background: red;
}
/*Text color*/
.ec-size .ec-store .form-control--secondary .form-control__button {
color: black;
}
/*Text color oh nover*/
.ec-size .ec-store .form-control--secondary .form-control__button:hover {
color: black;
}
Copy
Go to Checkout
/*Button color*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button {
background: red;
}
/*Button color on hover*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button:hover {
background: red;
}
/*Text color*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button {
color: black;
}
/*Text color oh nover*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button:hover {
color: black;
}
Copy
Continue Shopping on cart page
/*Button color*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--continueShopping {
background: red;
}
/*Button color on hover*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--continueShopping:hover {
background: red;
}
/*Text color*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--continueShopping {
color: black;
}
/*Text color oh nover*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--continueShopping:hover {
color: black;
}
Copy
Clear Bag
/*Button color*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--clearBag {
background: red;
}
/*Button color on hover*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--clearBag:hover {
background: red;
}
/*Text color*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--clearBag {
color: black;
}
/*Text color oh nover*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--clearBag:hover {
color: black;
}
Copy
Buy Now buttons
You can change the Buy Now buttons in your Ecwid store. These buttons are displayed on category pages.
/*Button color*/
.ec-size .ec-store .form-control--small .form-control__button {
background: red;
}
/*Text color*/
.ec-size .ec-store .form-control--small .form-control__button {
color: white;
}