Colour Theme for "ADD TO CART"

[netgroup]

Dear all,

Can we change "ADD TO CART" button colour theme to BLUE. currently it is white and not matching to the entire web page theme.

Please suggest the steps.

[Rey]

If you are using the default theme, the Add To Cart button is already blue not white.
Can you show us a screenshot please?

Thanks.

[Basara]

Check our demo http://demo.abantecart.com/

[morrisr]

This is how I changed the background of the ADD TO CART button
a.   You want to make changes in the style.css file by default located here
Storefront\view\default\stylesheet\style.css
b.   For both views product list and product page, change the value of the property background in css classes productcart and productpagecart.
b.1. Product list view (style shown in category view, featured, latest products, specials & search results)
style.css around line 1015
.thumbnail a.productcart {
   background: #000;   /* background color */
   color: #fff;    /*Font color */
   float: right;
   padding: 8px 27px 8px 8px;
   font-size: 13px;
   text-transform: uppercase;
    position:relative;
}
The hover is a little after in line 1042:
.thumbnail a.productcart:hover {
   background: #0e5f86;   /* background color */
}
b.2. Product page view, in style.css line 1576
.productpagecart a {
    background: #000;          /* background color */
   color: #fff;                       /* Font color */
    border-radius: 5px;
    border-width: 1px 0 0;
    padding: 15px 15px 15px 60px;
   font-size: 18px;
    position:relative;
}
And the hover located in style.css line 1606
.productpagecart li a:hover {
   background-color: #0e5f86;     /* background color */
}

[demoncho87]

Can you show with one picure the changes you made?

[morrisr]

You need to download the file style.css from this folder
/storefront/view/default/stylesheet

change the background color in 2 lines where I noted the comment /* background color */ (2 more lines if you want to change the color of the hover)
  background: #000;   /* background color */

I picked #000 the color black, choose the hexa color code for the color you want

Then upload the file style.css back to the website.

Here is the result

[netgroup]

Dear All,

Provided information was very helpful.

Actually when we embed the product code in other site, ADD TO CART button see's in white. Please check enclosed screenshot and suggest the necessary changes.

[Basara]

Hi.

Change embed css for your needs
http://demo.abantecart.com/storefront/view/default/stylesheet/embed.css about line#92

[lucydawson056]

Thanks to everyone for the useful tips shared here. I've also been experimenting with layout customisation in AbanteCart, especially for displaying multiple product blocks on the homepage. One trick I found helpful is modifying the block templates under storefront/view/default/template/blocks and using CSS tweaks to achieve a responsive grid layout.