With the Shopify Buy Button, you may fully integrate Shopify’s ecommerce tools with any website, whether it’s built on WordPress, Squarespace, Wix or another website builder.

Shopify isn’t only for full-fledged ecommerce businesses. Anyone seeking to monetize their projects⁠—be they bloggers, artists, writers, designers, podcasters, or influencers⁠—stands to learn from selling online. 

But establishing a web-based store takes time, and redirecting web traffic adds friction to the checkout process that might negatively impact your sales. The Shopify Buy Button is your solution!

The way to add a Shopify Buy Button to any website

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

You’ll want to begin by logging in to your Shopify store. If you happen to see the Buy Button listed under your Sales Channels on the left side menu, then the sales channel has already been added and you may skip ahead to step 2.

Skip to step 2 in case you already see the Buy Button sales channel listed in your store.

On desktop

  1. Go to the Buy Button sales channel page within the Shopify App Store (you may as well get to this page by going to Settings > Visit the Shopify App Store and searching Buy Button⁠).
  2. Click Add app, then Add Sales Channel on the following screen.

Add Sales Channel screen on the Shopify Admin showing Buy Button being added

After the page refreshes, it is best to see Buy Button listed under Sales channels on the left-side menu. You’ll want to pin the channel to your navigation for easy accessibility down the road.

Animated gif showing Buy Button sales channel being pinned to Shopify Admin

If you happen to don’t pin the Buy Button, you’ll find it again by clicking on Sales Channels after which Buy Button under your installed channels.

On mobile 

  1. Open the Shopify app in your mobile device and choose Store from the underside menu.
  2. Next to Sales channels, select Add channel (on iPhone) or + (on Android).
  3. Select Buy Button from the list of options, then tap Add Buy Button.

Add Buy Button screen on Shopify mobile app

2. Create a Buy Button

When you’ve added the Buy Button sales channel, you’re ready to begin creating your Buy Button. Navigate to your Buy Button page, either by clicking Buy Button (in case you pinned it to your navigation) or by going to Settings > Apps and sales channels > Buy Button.

From there, click Create a Buy Button.

Create a Buy Button screen in the Shopify Admin

You’ll be able to create Buy Buttons for either a single product, or a complete collection of products. On the following screen, you’ll be asked to pick out which option you favor. Click your chosen option, then seek for the product or collection you ought to use to create your Buy Button.

Ensure that the checkbox is filled and click on Select.

Screenshot of product selection window in the Shopify Admin when creating a Buy Button

When you’ve made your selection, you’ll be dropped at the Buy Button editor, where you may customize the look of your Buy Button.

The way to Customize your Buy Button

Within the Buy Button editor, you’ll see a variety of options listed on the left-hand side for customizing the feel and look of your Buy Button. On the fitting, you will note a preview of what your Buy Button will seem like.

Customize Shopify Buy Button screen in the Shopify Admin

Adjust the choices on the left to your liking. Your preview will update with the adjustments routinely, so you may see what your Buy Button looks like as you’re creating it. Within the preview, you’ll find a way to view how your Buy Button will appear on each desktop and mobile screens by clicking the desktop or mobile icons, centered at the highest of the editor. 

Here’s a breakdown of the choices you may customize:

  • Product variant: Select which variants of the product you ought to be purchasable through the Buy Button. All variants might be chosen by default.
  • Layout: Make a choice from Basic, Classic, and Full view. On the fitting, you’ll see a preview of every layout while you select it from the Layout drop-down.
  • Motion when people click: Make a choice from “Add product to cart,” “Direct to checkout,” or “Open product details.” The “Add product to cart” option will create a cart widget on the fitting side of your screen. The “Direct to checkout” option will create a Buy Now button that can take a user on to checkout (note that customers won’t find a way so as to add a couple of item to their cart using this feature). The “Open product details” option will create a View Product button that opens a pop-up that features product information and an Add to Cart button.
  • Button style: Here you may adjust the colours, font, size, and corner shape of your Buy Button. 
  • Layout: The Layout menu will let you make finer adjustments to the layout of your button. You’ll be able to customize font colours, button text, and typography settings. 
  • Shopping cart: Here you’ll find a way to regulate the settings of your shopping cart widget, including copy and colours. Note that this feature might be grayed out in case you use the “Direct to checkout” layout, since there isn’t a cart widget. 
  • Detailed pop-up: If you happen to select “Open product details” under “Motion when people click,” you’ll find a way to customize the text, colours, and typography options for the pop-up on this section.
  • Advanced settings: Here you may adjust how your checkout is served to your user. You’ll be able to either select “Open pop-up window” (which is able to create a pop-up checkout that closes when the order is complete), or “Redirect in the identical tab” (which is able to send the user to your Shopify checkout page from inside their browser window, and return them to your page once the transaction is complete). 

Do not forget that making adjustments to those settings won’t change Buy Buttons which have already been embedded. That’s why it’s good to take a while to regulate the Buy Button to your liking before moving on to the following step.

Shopify Buy Button customization screen showing customized Buy Button design

Whenever you’re blissful together with your design, click the Next button in the highest right corner.

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

Whenever you click Next, the embed code in your Buy Button might be routinely generated. Click the Copy Code button in case you’re able to embed it on a webpage, or the Keep Customizing button in case you’d prefer to return to the Buy Button editor to make adjustments. 

The code you’ve copied here may be pasted into the HTML of any webpage and it should create a Buy Button and cart that can connect on to your Shopify admin, allowing you to administer and process orders from any webpage from inside your Shopify admin.

The means of adding the embed code may be a bit of different, depending how you wish the button to look, the web site builder you’re using, and even the theme that you just’re using on the platform.

Here’s a breakdown of among the more common places to embed a Shopify Buy Button, and what steps you’d must follow to accomplish that:

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

Your Shopify store will have already got product pages and a cart inbuilt, but occasionally there could also be situations where you’d prefer to add a Buy Button directly right into a page or blog post for added convenience. 

For instance, in case you were writing a blog post a few newly released product, you could want to offer readers a simple approach to purchase directly from the post, fairly than linking them to a separate page. 

In cases like these, listed here are the steps you’ll need to follow: 

    1. Out of your Shopify admin, go to Online Store > Blog Posts or Online Store > Pages, depending on whether you’re adding it to a blog post or page. 
    2. Select the blog post or page you ought to add the Buy Button to.
    3. Within the Content window, select the <> button to modify from the Edit view to the HTML view. 

Shopify Admin page editor highlighting the Switch to HTML tab

  1. Paste your embed code you copied earlier into the HTML editor, wherever you’d prefer it to look. Click Save.

Screenshot showing Buy Button embed code in the HTML view of the blog editor.

When you’ve saved your page or blog post, your Buy Button might be added to the page. If you ought to see what it looks like without publishing, select Preview (or View page in case you’re adding it to a page) at the highest right corner of the page editor.

Screenshot of Shopify Buy Button on blog post

Add a Buy Button to a Squarespace website

On Squarespace, you’ll find a way so as to add your Buy Button to individual posts or to menus in your homepage. So as to add a Buy Button to your Squarespace site: 

  1. Log into your Squarespace dashboard and open the page where you ought to add a Buy Button.
  2. Hover over the Page Content area of the page element where you wish the Buy Button to look and click on Edit. 
  3. Select the insert point where you ought to add the embed code. 
  4. From the Content Blocks menu, under the More section, select Code. 
  5. Make sure that HTML is chosen from the drop-down menu in the highest right corner, after which paste the Buy Button embed code into the Code field. 
  6. Click Apply.

Take into account that some custom Squarespace themes may require more advanced knowledge of HTML for customizations. In cases like these, it’s best to achieve out to a developer directly for help adding custom code to your site.

Add a Buy Button to a WordPress blog

So as to add a Buy Button to a post in your WordPress.org site: 

  1. Out of your WordPress dashboard, go to your posts and choose the one you’d prefer to add a Buy Button to.
  2. Depending on the version of the WordPress editor you’re using, complete considered one of the next steps: 
    • If you happen to’re using the Classic Editor in your WordPress site, click the Text tab within the editor to modify from Visual view to Text view.
    • If you happen to’re using the Block Editor in your WordPress site, click the + button, then search and choose Custom HTML.
  3. Paste the Buy Button embed code into the space where you’d prefer it to look. 
  4. Click Save Draft, Preview, or Publish, depending on the motion you’d prefer to take. 

You may also add the embed code to a WordPress menu by completing the next steps: 

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

Note that Shopify Buy Buttons are compatible with WordPress.org platform, but not with WordPress.com, as a consequence of HTML customization limitations.

Add a Buy Button to Wix

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

  1. Out of your Wix dashboard, select the location from the My Sites page that you just’d prefer to add the Buy Button to, after which select Edit Site. 
  2. Within the Wix website editor, click +, then More. Select HTML Code. It 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 dimensions of the HTML code widget to your liking. Remember to be certain the cart tab is visible in case you’ve embedded a Buy Button with a cart. 
  6. Whenever you’re finished adjusting, click Save.

It’s value noting that if you ought to embed Buy Buttons for multiple products, it’s best to embed a group Buy Button, fairly than a Buy Button for a single product. If you happen to embed multiple single-product Buy Buttons, then visitors will see a separate cart for every product.

Adding Shopify Buy Button script tags

In some cases, website builders (akin to Unbounce) would require that you just paste element from the

element in your Buy Button embed code. You’ll see the

element at the highest of the code. It looks something like this: 

The script element (which is for much longer) makes up the rest of the embed code, starting with .

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

  1. Open the page header for the web site where you ought to embed your Buy Button.
  2. Copy and paste the