Set up the Buy Now button inside your store header

This article will explain to you the benefits of having a Buy Now button inside your header, and guide you through the steps to make it happen in EcomSolid.


Benefits of a Buy Now button in the header

While it’s not absolutely necessary to have a Buy Now button sitting inside your store’s header, there are clear benefits to using this design:

  • If you are running a one-product store, a Buy Now button in the header provides a seamless one-click checkout method and turns any of your pages into a high-converting landing page. Regardless of which page, visitors can always be converted into customers the second your product starts appealing to them.
  • Even if you sell multiple products and would like to focus on a single strategic flagship product: You can always design the Buy Now button inside the header for a specific stand-alone page using the Page Builder, while leaving the rest of your store untouched.

When combined with a sticky header for easier navigation, you effectively have a sticky checkout button that is less obvious, more elegant, and can possibly replace the sticky cart usually found at the bottom of a website.

In the next section, we’ll show you the steps to set up a Buy Now button in your store’s header.


Set up the Buy Now button inside the header

Step 1: Enter your EcomSolid Editor and select your theme, or you can create a stand-alone page using the Page Editor. See this article for an overview of the Theme Editor and Page Editor.

*Remember to turn on the Header and Footer option.


Step 2: In the Editor, select the Header section at the top of the page. If you don’t have one, add one to your page in the Library.

Step 3: On the left sidebar, select the Solid Brush preset for the Header section. This is the only preset that supports the Buy Now button inside the Header.

The Solid Brush preset is a Pro preset and is available for the Growth and Advanced plans only. Visit our comparison chart for more information on all EcomSolid plans.

Step 4: Make modifications as needed and hit “Save” to save your changes.

It is recommended to also enable the sticky header along with the Buy Now button. This way, site visitors will constantly be reminded and the second they make a decision, the Buy Now button is there. See this article to learn how to make your header sticky and always appear on top.

Step 5: To preview the changes, hit “Preview”. To update your front store, hit “Update Live” > “Yes, Update”.



Note: On the Mobile screen, the Buy Now button is included in the hamburger menu, adapting to the narrow, vertical screen ratio on most mobile devices.



For any further assistance you need, our EcomSolid Support Team is here to help. We can be reached at any time via email or live chat.



Was this helpful?