Buy Now Button | Advanced Design Settings

1. EC (EN).png

Adding a "Buy Now" Button to your store simplifies the buying process. Customers can instantly add an item to their cart and go straight to the checkout page.

This article will cover the following: 


1. Admin settings

In the SHOPLINE Admin, go to [Online Store Design] > [Design] > [Advanced Settings].


Choose a custom color for your "Buy Now" Button using a HEX 6-digit color code. For more information on color codes visit

Once setup is complete, click Save and Publish at the bottom right.

*Note: A dark color is recommended for better readability.  


2. Storefront feature display

When the customer clicks Buy Now, the product will be added immediately to the cart and they will be directed straight to the checkout page. The button will be displayed for different page types as shown below: 

  • Product detail page Screen_Shot_2022-08-29_at_4.45.03_PM.png
  • Product list page: When clicking on a product with multiple variations, a window will pop up displaying a "Buy Now" button. 
  • Advanced pages: When an advanced page includes a "Single product widget/ Category widget", a window will pop up displaying a "Buy Now" button. Screen_Shot_2022-08-29_at_4.53.44_PM.pngScreen_Shot_2022-08-29_at_4.52.44_PM.png


  • WishlistScreen_Shot_2022-08-29_at_4.54.52_PM.png


3. New Page Builder 

Enable feature

Proceed to SHOPLINE Admin > [Settings] > [Product Settings] and select whether to display the "Buy Now" button at the storefront. 



Set the button color 

Proceed to [Online Store Design] > [Pages] and click the Advanced Page button to open the new page builder. On the left menu, click [Store Settings] > [Color], you will be able to adjust the background and text color of the "Buy Now" button. For more information, please refer to this articleScreen_Shot_2022-08-29_at_4.59.51_PM.png


4. Notes

  • If the product has Add-on products, customers can click the "Buy Now" button to add the main product and the Add-on items to their cart together for checkout.
  • The "Buy Now feature is currently not supporting non-variant products on the product list page/ advanced pages. Customers need to click on the product image to enter the product details page to make a purchase using the "Buy Now" button.
  • The "Buy Now" button does not appear when an item or variant is out of stock.
  • When a customer already has products in the shopping cart, clicking on the "Buy Now" button will combine the Buy Now purchases with those items already in the cart.  
  • When the "Buy Now" button is enabled, a preorder product's "Preorder Now" button will become an "Add to Cart" button.


Read more






Have more questions? Submit a request