How to change Buy Now buttons

Last updated

Ecwid enables you to alter every bit of your storefront layout so that it will fit your site's design better. You can do it by means of adding styles to your custom CSS theme. More information about custom CSS themes: How to change Ecwid design. The same approach can be used for changing the buy now buttons, which are displayed on the products grid page. You can turn on those buttons for your store in your control panel: Settings → General → Cart → Show "Buy now" buttons on products list pages.

 

Please find further explanation and CSS code samples of buy now buttons customization below.

If you need unique custom design for your store or need multiple style changes, we can help. Please fill in this form: Custom design for Ecwid store. We will be glad to help you designing your Ecwid store.

Customizing look of the buy now buttons

The 'Buy now' buttons on product list pages are designed in CSS3, which means they are done with the help of a set of gradients, opacity filters, rounded corners and other CSS effects specified right in the code (they are not static images). It makes them quite flexible to adjust and easy to translate . While it may be quite tricky to manually specify shape or color in the CSS3 codes for beginners, there are plenty ready CSS3 button generators on the web – you can use one of those for creating your own button and copy the generated CSS code to your custom CSS theme. For more details on CSS customizations in Ecwid, please refer to this article: CSS FAQ .

Example

For example, let's make Buy Now button orange. You'll need the following code:

.ecwid .ecwid-btn--buyNow {
 background: #ff9c33;
}
.ecwid .ecwid-btn--buyNow:hover {
 background: #ffc180;
}
.ecwid .ecwid-btn--buyNow:focus,
.ecwid .ecwid-btn--buyNow:focus:hover {
 border-color: #ffc180;
}
.ecwid .ecwid-btn--buyNow:active,
.ecwid .ecwid-btn--buyNow:focus:active {
 background: #ff9c33;
}

Customizing text of the buy now buttons

Add to bag button in Ecwid is designed by means of CSS3, it is not an image, thus in order to change 'Add to bag' text, you can use the general approach for changing or translating texts in Ecwid, the Storefront Label Editor App. It allows to change storefront labels right in your Ecwid control panel.

Another option is to change the label using this approach: How can I change or translate any text in my storefront? In particular, the JS code for changing 'Add to bag' label to 'Buy' will look as follows: 

<script>
ecwidMessages = {
"BuyNow.buy_now":"Add to bag"
}
</script>

Please change the 'Buy now' text as you wish.

Was this article helpful?
1 out of 2 found this helpful
Questions?
Get help
  • Presales Chat

    Need help choosing the right Ecwid plan? Our Sales team has the answer you’re looking for.

  • Forums

    Join the Ecwid community. Discuss support topics and store ideas with other Ecwid users.

  • Contact us

    Still have questions about Ecwid? Let us know! We will be glad to help you with your Ecwid store.

  • Status Monitor

    Get real time status updates on Ecwid services here, 24/7