View
 

How to change your "Place Order" button

Page history last edited by Eugene 1 year, 10 months ago

1. Grab this image: http://app.ecwid.com/icons/place_order.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 "Place Order" button in up state */
div.ecwid-Checkout-placeOrderButton-up, div.ecwid-Checkout-placeOrderButton-up-hovering {
    background: transparent url(icons/place_order.png) no-repeat top center !important;
}

/* The "Place Order" button in down state */
div.ecwid-Checkout-placeOrderButton-down, div.ecwid-Checkout-placeOrderButton-down-hovering {
    background: transparent url(icons/place_order.png) no-repeat bottom center !important;
} 
 
Replace the "icons/place_order.png" with the real absolute path to the modified image. For example:
 
   url(http://www.example.com/images/my_custom_place_order.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