Shopify Buy Button: 3 Steps to Add Ecommerce Features to Website

You can completely integrate Shopify's ecommerce tools with any website, regardless of whether it was made with WordPress, Squarespace, Wix, or another website builder, using the Shopify Buy Button.

Shopify is not just for established e-commerce businesses. Selling online is advantageous for everyone trying to monetize their ventures, including bloggers, influencers, artists, authors, designers, and podcasters.

However, setting up an internet business takes time, and diverting web traffic makes the checkout process more difficult, which might hurt your sales. Your remedy is the Buy Button for Shopify.

1. Add the Buy Button sales channel to your Shopify store

Logging into your Shopify store is where you should begin. The sales channel has already been created, therefore you can move on to step 2 if you see the Buy Button displayed in your Sales Channels on the left side menu.

On desktop

1. Go to the Shopify App Store's Buy Button sales channel page (you can also find this page by selecting Settings > Visit the Shopify App Store and typing in “Buy Button“).
2. On the next screen, click Add App, and then Add Sales Channel.

After the website refreshes, the Buy Button should be featured under Sales channels in the left-side menu. Make sure to save the channel to your navigation for quick access later.

If you don't pin the Buy Button, you may find it by going to Sales Channels and then clicking on the Buy Button under your installed channels.

On mobile

1. Select Store from the bottom menu of the Shopify app on your mobile device.
2. Select Add channel (on iPhone) or + next to Sales channels (on Android).
3. Tap Add Buy Button after selecting Buy Button from the list of alternatives.

2. Create a Buy Button

After you've added the Buy Button sales channel, you can begin designing your Buy Button. Go to your Buy Button page by clicking Buy Button (if it was pinned to your navigation) or by navigating to Settings > Apps and sales channels > Buy Button.

From there, click Create a Buy Button.

You may make Buy Buttons for a single product or an entire collection of items. On the next screen, you'll be prompted to choose your preferred alternative. Choose your desired choice, then look for the product or collection you want to utilize to create your Buy Button.

Make sure the checkbox is filled and click Select.

After you've picked your choice, you'll be sent to the Buy Button editor, where you may personalize the appearance of your Buy Button.

How to Customize your Buy Button

On the left side of the Buy Button editor, you'll notice a variety of choices for changing the appearance and feel of your Buy Button. On the right, you can get a sample of how your Buy Button will look.

Adapt the settings on the left to your preferences. Your preview will instantly update with the changes, allowing you to see what your Buy Button will look like as you create it. You can see how your Buy Button will look on desktop and mobile displays in the preview by tapping the desktop or mobile icons at the top of the editor.

Here is an overview of the customization options:

• Product variant: Choose which variations of the product you wish to make available for purchase via the Buy Button. By default, all versions will be picked.
• Layout: Select from Basic, Classic, or Full view. When you pick a layout from the Layout drop-down menu, you'll get a preview of it on the right.
• Action when people click: Select “Add product to cart,” “Direct to checkout,” or “Open product details.” When you select “Add product to cart,” a cart widget will appear on the right side of your screen. Customers will be unable to add more than one item to their basket if the “Direct to checkout” option is selected. The “Open product details” option will generate a View Product button, which will launch a pop-up with product information and an Add to Cart button.
• Button style: Here you can adjust the colors, font, size, and corner shape of your Buy Button.
• Layout: The Layout menu will allow you to fine-tune the layout of your button. Font colors, button text, and typography settings may all be changed.
• Shopping cart: You may change the settings of your shopping cart widget here, including the copy and colors. Because there is no cart widget, this option will be greyed out if you utilize the “Direct to checkout” style.
• Detailed pop-up: You may edit the wording, colors, and font options for the pop-up in this area if you select “Open product details” under “Action when people click.”
• Advanced settings: You may change how your checkout is delivered to your user here. You may either choose “Open pop-up window” (which will open a pop-up checkout that will close after the order is finished) or “Redirect in the same tab” (which will send the user to your Shopify checkout page from within their browser window, and return them to your page once the transaction is complete).

Remember that changing these settings will not affect Buy Buttons that have already been embedded. That is why, before proceeding to the following stage, you should spend some time adjusting the Buy Button to your desire.

When you're finished, click the Next button in the top right corner.

3. Add the Buy Button embed code to your website HTML

The embed code for your Buy Button will be produced immediately once you click Next. If you want to embed it on a website, click the Copy Code button. If you want to return to the Buy Button editor to make changes, click the Keep Customizing button.

You can manage and process orders from any webpage from within your Shopify admin by pasting the code you've copied here into the HTML of any webpage, creating a Buy Button and cart that will connect directly to your Shopify admin.

Depending on how you want the button to appear, the website builder you're using, or even the platform theme you're using, the embed code-adding procedure may change slightly.

The steps you must take to embed a Shopify Buy Button in some of the more popular locations are broken out below:

Add embed code to a landing page or blog post on your Shopify store

Although your Shopify store already comes with built-in product pages and a shopping cart, there may be times when you want to conveniently add a Buy Button to a page or blog post.

For instance, rather than connecting readers to a different website, if you were writing a blog post about a recently released product, you may want to provide them with a simple option to purchase right from the post.

Here are the measures you should take in these situations:

• Go to Online Store > Blog Posts or Online Store > Pages in your Shopify admin, depending on whether you're adding it to a blog post or a page.
• Choose the blog post or page to which you wish to put the Buy Button.
• To transition from the Edit view to the HTML view in the Content window, click the > button.

• Copy and paste the embed code you copied previously into the HTML editor, where you want it to display. Click Save.

Your Buy Button will be put to your website or blog post when you save it. If you want to see how it appears before publishing, go to the upper right corner of the page editor and click Preview (or View page if you're adding it to a page).

Add a Buy Button to a Squarespace website

You may add your Buy Button to specific posts or menus on your Squarespace homepage. To add a Buy Button to your Squarespace site, follow these steps:

• Open the page where you want to put a Buy Button in your Squarespace dashboard.
• Hover your cursor over the Page Content area of the page element where you want the Buy Button to appear, and then click Edit.
• Choose the insert location where you wish the embed code to appear.
• Select Code from the Content Blocks menu's More section.
• Make sure HTML is selected in the upper right corner, and then paste the Buy Button embed code into the Code area.
• Click the Apply button.

Keep in mind that some Squarespace custom themes may necessitate more extensive HTML expertise for modification. In these circumstances, it's advisable to contact a developer directly for assistance with adding custom code to your site.

Add a Buy Button to a WordPress blog

To add a Buy Button to a post on your WordPress.org site:

1. Go to your WordPress dashboard and pick the post to which you want to add a Buy Button.
2. Complete one of the following steps, depending on the version of the WordPress editor you're using: 
   • If you're using the Classic Editor for your WordPress site, switch from Visual view to Text view by clicking the Text tab in the editor.
   • If you're using the WordPress Block Editor, click the Add button, then search for and select Custom HTML.
3. Copy and paste the Buy Button embed code into the desired location. 
4. Click Save Draft, Preview, or Publish, depending on the action you’d like to take. 

You can also add the embed code to a WordPress menu by completing the following steps:

1. From your WordPress dashboard, click Appearance.
2. Select Customize to open the theme editor, then select Widgets.
3. Select the area where you’d like to add your Buy Button.
4. Click Add a Widget, then Text⁠.
5. Paste the Buy Button embed code.
6. Click Save & Publish.

Due to HTML customization constraints, Shopify Buy Buttons are only compatible with the WordPress.org platform and not with WordPress.com.

Add a Buy Button to Wix

To add a Shopify Buy Button to your Wix site, follow these steps:

1. From your Wix dashboard, select the site from the My Sites page that you’d like to add the Buy Button to, and then select Edit Site.
2. In the Wix website editor, click +, then More. Select HTML Code. This will add an HTML code widget to your page.
3. Click Enter code. On the HTML Settings pop-up, paste your Buy Button embed code into the Add code here field.
4. Click Apply.
5. Adjust the size of the HTML code widget to your liking. Remember to make sure the cart tab is visible if you’ve embedded a Buy Button with a cart.
6. When you’re finished adjusting, click Save.

It's worth mentioning that if you wish to embed Buy Buttons for numerous goods, you should embed a collection Buy Button rather than a single Buy Button. Visitors will see a separate cart for each product if you include multiple single-product Buy Buttons.

Adding Shopify Buy Button script tags

Some website builders (such as Unbounce) will need you to put <script> tags individually in your header, while the remainder of the code is pasted in the body of your page, wherever you want the Buy Button to appear.

To do this, detach the <script> element from the <div> element in your Buy Button embed code. The <div> element may be found at the top of the code. It appears to be as follows:

<div id=”product-component-1655929612938″></div>

The script element (which is much longer) makes up the remainder of the embed code, starting with <script type=”text/javascript”> and ending with </script>.

Once you have these elements separated, here are the steps to take:

1. Open the page header for the website where you want to embed your Buy Button.
2. Copy and paste the <script> element, in its entirety, into your website page header.
3. Save your changes.
4. Now, open the page editor for the page where you want to add your Shopify Buy Button.
5. Copy and paste the <div> element into the page, wherever you want your Buy Button to appear. 
6. Save your changes.

Add ecommerce to any website with a Shopify Buy Button

Shopify Buy Buttons enable retailers to reach customers where they are—regardless of the page or platform. The ease of selling directly to clients rather than redirecting them to another website eliminates friction and can assist enhance sales.

A properly positioned Buy Button on a blog page may provide business owners with a simple option for consumers to purchase things without leaving the page they're on.

Shopify Buy Buttons are a simple method for bloggers, artists, authors, designers, podcasters, influencers, and anyone else wishing to monetize their work to use Shopify's ecommerce platform without having to develop a whole new website.

Shopify Buy Buttons, with their configurable designs, colors, and functionality, allow you to transform any page or website into a full-fledged online store.

Shopify Buy Button FAQ