Changing "Buy Now" buttons

Last updated

Ecwid enables you to alter every bit of your storefront layout so that it fits 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: Changing store design. The same approach can be used for changing "Buy Now" buttons, which are displayed on category pages in grid view. You can turn on those buttons for your store in your Ecwid 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 "Buy Now" buttons

"Buy Now" buttons are quite flexible to adjust and easy to translate

Please see below an example code for changing the color if the buttons to orange.

Example

You'll need the following code, where#ff9c33 is the hex code for orange:

.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;
}

You should add the code to your active CSS theme in your Ecwid Control Panel → Settings → Design → CSS themes. Please remember to save the changes.

Customizing the text on "Buy Now" buttons

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?
6 out of 15 found this helpful
Questions?
Get help
  • 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