log inhelp

View
 

How to change your "Add to Bag" button

Page history last edited by Eugene 2 years ago

1. Grab this image: http://app.ecwid.com/icons/add_to_bag.png

It is a CSS sprite, so it actually has two images of the button.

 
2. Edit this image in any image editor. Change the look of the button.
 
3. Upload this image to your server or to any image hosting.
 
 
/* The "Add to bag" button in up state */
div.ecwid-AddToBagButton-up, div.ecwid-AddToBagButton-up-hovering {
    background: transparent url(icons/add_to_bag.png) no-repeat top center !important;
}
/* The "Add to bag" button in down state */
div.ecwid-AddToBagButton-down, div.ecwid-AddToBagButton-down-hovering {
    background: transparent url(icons/add_to_bag.png) no-repeat bottom center !important;
}
Replace the "icons/add_to_bag.png" with the real absolute path to the modified image. For example:
 
    url(http://www.example.com/images/my_custom_add_to_bag.png)
That's all.
 
For more details on how to add any CSS code to your store or create a custom CSS theme, refer to this article: CSS Faq

 

PDF version