October 30, 2024

How to Add a Buy Now Button in Shopify with Shogun

Arrow pointing left
back to blog

about

Learn the easy way to add a buy now button to your Shopify store using Shogun.

the author

Adam Ritchie
Ecommerce Contributor

share this post

Back in 1999, Amazon changed the ecommerce game with their innovative “1-click” ordering button. Allowing customers to enter their payment and shipping details just once, rather than every time they wanted to place an order, made the purchasing process much easier — and this, of course, led to more purchases. It also gave consumers a good reason to provide online retailers with their personal information, opening up opportunities for more targeted marketing practices. 

This practice has become especially persuasive now that we’re in the age of mobile commerce. As of September 2024, about 63% of internet traffic comes from mobile devices rather than desktops. In other words, whenever someone lands on your site, they’re likely using a smartphone or tablet.

Brands on Shopify can also get in on the 1-click purchase action by testing “Buy Now” buttons that take customers straight to the checkout page–bypassing the cart page.

While there are pros and cons to using this approach–there’s little doubt that Buy Now buttons can be useful for many brands and are certainly worth testing.

Below, we’ll go over exactly what you need to do to add a Buy Now button in Shopify using Shogun.

Customize your Shopify storefront the easy wayShogun’s intuitive interface and expansive set of ecommerce features enable high-growth merchants to create and optimize pages on their Shopify storefront.Get started now

Adding a Buy Now Button to A Product Page

Before you can add a Buy Now button to a product page with Shogun, you’ll first need to import the page you want to customize from your Shopify account:

  • After downloading and installing Shogun, select the “Apps” option in the left sidebar of the Shopify control panel. 
  • Open Shogun.
  • Go to the “Pages” section of the Shogun app. Here, you’ll see two tabs — “Shogun” and “Shopify”. Open the “Shopify” tab. 
  • This tab lists out the pages on your Shopify store that have yet to be imported into Shogun. Click on the “Import page” button next to the page that you would like to import (if necessary, you can filter this list to only product pages or use the search bar to find the exact page you’re looking for). 
It’s easy to import pages from Shopify into Shogun.

If the product page doesn’t already have a Buy Now option, you can add one yourself by simply following these steps:

  • In the “Pages” section of the Shogun app, select the product page you just imported — this will open the page in Shogun’s visual editor. 
  • Select the “Elements” option in the left sidebar of the visual editor — this will open the element library, which allows you to quickly add a wide variety of ecommerce features to the page.
  • Click and hold on the “Add to cart” element and place it wherever you want your button to be located. 
  • Adjust the “Click behavior” setting to “Go directly to checkout” and rewrite the button text as “Buy Now” or something similar. 
  • Whenever you’re done editing the page, save and publish your changes.
You can use the “Add to cart” element to create a new Buy Now button.

Your other customization options for this element include:

  • Change the font of your button text.
  • Change the size of your button text. 
  • Add alternate button text content for when the item is unavailable or sold out.
  • Add a border or box shadow to the button.
  • Add a different background and other styling options for when the visitor is hovering their mouse over the button. 
  • Add a different background and other styling options for when the visitor clicks on the button. 
  • Adjust the margins and padding that separate the Buy Now button from other elements on the page.
Customize your Shopify storefront the easy wayShogun’s intuitive interface and expansive set of ecommerce features enable high-growth merchants to create and optimize pages on their Shopify storefront.Get started now

Adding a Buy Now Button to a Homepage

With the same method described above, you can also use Shogun’s visual editor and element library to add a Buy Now button to your homepage (as well as any other page on your store). 

There is one extra step involved in this particular process, though. Once you have imported the page from Shopify into Shogun, you will then need to manually set it as your homepage:

  • Once the page has been imported, you will be able to see it in the “Shogun” tab of the Shogun app’s “Pages” section — again, you can use the filters or search bar to find the page if necessary.
  • Open the “…” button next to the page you just imported. 
  • Select “Set as homepage”. 
Shogun allows you to set any page as your homepage.

Adding a Buy Now Button to a Landing Page

Buy Now buttons are an especially useful design element on landing pages, which are standalone pages designed for specific marketing campaigns. 

By using a landing page rather than just linking to your homepage or a default product or service page, you can tailor your messaging to address the specific group of people you’re targeting.

Another common practice for landing pages is to remove your standard navigation options, such as your header menu and footer links, in order to get rid of anything that might distract the visitor from your offer. In turn, this will help improve your campaign’s conversion rate and return on investment. 

A Buy Now button can heighten these benefits, as it removes the extra step of dealing with a shopping cart and keeps the visitors focused on making a purchase. 

To create a new landing page in Shogun, go to the “Pages” section of the Shogun app and hover your mouse over the “Build or edit a page” option. You can use two of the options in this menu — “Start from scratch” and “Browse our templates” — to set up your own custom landing page in the visual editor. 

If you want to save time by using a template, you’ll find that there are 40+ pre-made designs available specifically for landing pages, which cover promoting a holiday sale, showcasing customer testimonials, and a variety of other scenarios. 

Shogun provides you with a variety of landing page template options.

Adding Personalization to Buttons in Shopify

Finally, it’s worth noting that Shogun gives you the power to personalize your pages according to the needs and preferences of different types of visitors. You can show one version of a page to some visitors while displaying an alternate version to others. 

For example, there are some situations where you might not want to display a Buy Now button at all. While Buy Now buttons are effective at reducing abandoned cart rates, that can come at the expense of your average order value. After all, if someone goes immediately from a product page to your checkout page, they won’t have a chance to check out everything else you have to offer. 

So, when someone is visiting a product page for the first time, you might want to make Add to Cart buttons more prominent in order to encourage them to become familiar with your entire catalog. But returning visitors are likely already familiar with your product selection, and they may only be interested in placing a quick reorder anyway — in this case, the greater risk is that they’ll get distracted and leave before completing the transaction, so you might want to make Buy Now buttons more prominent.

You can display the most appropriate page design to each of these groups at the same time with Shogun’s Personalization feature:

  • Go to the “Pages” section of the Shogun app and select the page you want to personalize. 
  • In the visual editor, click on the “Personalization” button located near the top-right corner of your screen. 
  • Select “Turn on personalization”. 
  • Click on the “create a custom segment” link.
  • There are many different types of conditions you can use to create your audience segment — in this example, you would use Shogun’s integration with Klaviyo to target people who have previously purchased your product. 
  • Once you’ve added your audience segment, select “Next: Edit variant designs”. 
  • You’ll now be able to toggle between two versions of the page in the visual editor. Edit the Add to Cart and Buy Now buttons as needed on each variant, then save and publish your changes. 
With the Personalization feature, you can publish multiple versions of the same page at the same time.

With the visual editor,  personalized experiences, and Shogun’s other powerful yet user-friendly features, you have everything you need to fully optimize your Shopify store. 

Customize your Shopify storefront the easy wayShogun’s intuitive interface and expansive set of ecommerce features enable high-growth merchants to create and optimize pages on their Shopify storefront.Get started now

You might also enjoy

Get started for free

Get hands on with everything you need to grow your business with a comprehensive suite of tools.
Start now
Arrow pointing up and to the right Arrow pointing up and to the right