Support Center

How to Change Buy Now Buttons

Last Updated: Jan 12, 2018 11:11AM EST

The store allows 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 the store 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: System 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.

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 example, let's try the 'Shiny blue' button from this samples list.  The author published his button codes here. Let's grab the shiny blue's button CSS code from there, adjust it a little and add to our custom CSS theme. Here is the resulting CSS code with comments: .

  • Please pay attention the first code block - it prevents some issues with custom button's layout so please do not remove it
  • Wherever you got the CSS code, please do not forget to change the button's CSS class in the code to '.AccentedButton' as in the code above. Otherwise your custom code won't work

Customizing text of the buy now buttons

The buy now buttons in your store are designed by means of CSS3, they are not images, thus in order to change the text 'Buy now' you can use the general approach for changing or translating texts: How can I change or translate any text in my storefront? . In particular, the JS code for changing the 'Buy now' label to 'Add to bag' will look as follows:

storeMessages = {
"BuyNow.buy_now":"Add to bag"

Please change the 'Add to bag' text as you wish.

Liquid error: undefined method `gsub' for nil:NilClass
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found