Shopify Buy Button: How to Add Ecommerce Features to Any Website in 3 Steps

With theShopify Buy Button, you can fully integrate Shopify’secommerce toolswith any website, whether it’s built on WordPress, Squarespace, Wix or any otherwebsite builder.

Shopify isn’t just for full-fledged ecommerce businesses. Anyone looking to monetize their projects⁠—be they bloggers, artists, writers, designers, podcasters, or influencers⁠—stands to benefit fromselling online.

But setting up an online store takes time, and redirecting web traffic adds friction to the checkout process that could negatively impact your sales. The Shopify Buy Button is your solution!

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

You’ll want to start bylogging in to your Shopify store. If you see the Buy Button listed under yourSales Channelson the left side menu, then the sales channel has already been added and you can skip ahead to step 2.

On desktop

1. Go to the Buy Button sales channel pagein the Shopify App Store (you can also get to this page by going toSettings > Visit the Shopify App Storeand searchingBuy Button⁠).
2. ClickAdd app, thenAdd Sales Channelon the next screen.

After the page refreshes, you should seeBuy Buttonlisted underSales channelson the left-side menu. Be sure to pin the channel to your navigation for easy access down the road.

If you don’t pin the Buy Button, you can find it again by clicking onSales Channelsand thenBuy Buttonunder your installed channels.

On mobile

1. Open theShopify appon your mobile device and selectStorefrom the bottom menu.
2. Next toSales channels, selectAdd channel(on iPhone) or+(on Android).
3. SelectBuy Buttonfrom the list of options, then tapAdd Buy Button.

2. Create a Buy Button

Once you’ve added the Buy Button sales channel, you’re ready to start creating your Buy Button. Navigate to your Buy Button page, either by clickingBuy Button(if you pinned it to your navigation) or by going toSettings > Apps and sales channels > Buy Button.

From there, clickCreate a Buy Button.

You can create Buy Buttons for either a single product, or a whole collection of products. On the next screen, you’ll be asked to select which option you prefer. Click your preferred option, then search for the product or collection you want to use to create your Buy Button.

Make sure the checkbox is filled and clickSelect.

一旦你做出了选择,你就会了to the Buy Button editor, where you can customize the look of your Buy Button.

How to Customize your Buy Button

In the Buy Button editor, you’ll see a number of options listed on the left-hand side for customizing the look and feel of your Buy Button. On the right, you will see a preview of what your Buy Button will look like.

Adjust the options on the left to your liking. Your preview will update with the adjustments automatically, so you can see what your Buy Button looks like as you’re creating it. In the preview, you’ll be able to view how your Buy Button will appear on both desktop and mobile screens by clicking the desktop or mobile icons, centered at the top of the editor.

Here is a breakdown of the options you can customize:

• Product variant: Select which variants of the product you want to be purchasable through the Buy Button. All variants will be selected by default.
• Layout: Choose between Basic, Classic, and Full view. On the right, you’ll see a preview of each layout when you select it from the Layout drop-down.
• Action when people click: Choose between “Add product to cart,” “Direct to checkout,” or “Open product details.” The “Add product to cart” option will create a cart widget on the right side of your screen. The “Direct to checkout” option will create a Buy Now button that will take a user directly to checkout (note that customers won’t be able to add more than one item to their cart using this option). The “Open product details” option will create a View Product button that opens a pop-up that includes 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 make finer adjustments to the layout of your button. You can customize font colors, button text, and typography settings.
• Shopping cart: Here you’ll be able to adjust the settings of your shopping cart widget, including copy and colors. Note that this option will be grayed out if you use the “Direct to checkout” layout, since there is no cart widget.
• Detailed pop-up: If you select “Open product details” under “Action when people click,” you’ll be able to customize the text, colors, and typography options for the pop-up in this section.
• Advanced settings: Here you can adjust how your checkout is served to your user. You can either select “Open pop-up window” (which will create a pop-up checkout that closes when the order is complete), 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).

记住作出调整这些设置will not change Buy Buttons that have already been embedded. That’s why it’s good to take some time to adjust the Buy Button to your liking before moving on to the next step.

When you’re happy with your design, click the Next button in the top right corner.

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

When you click Next, the embed code for your Buy Button will be automatically generated. Click the Copy Code button if you’re ready to embed it on a webpage, or the Keep Customizing button if you'd like to go back to the Buy Button editor to make adjustments.

The code you’ve copied here can be pasted into the HTML of any webpage and it will create a Buy Button and cart that will connect directly to your Shopify admin, allowing you to manage and process orders from any webpage from within your Shopify admin.

The process of adding the embed code can be a little different, depending how you want the button to appear, the website builder you’re using, or even the theme that you’re using on the platform.

Here’s a breakdown of some of the more common places to embed a Shopify Buy Button, and what steps you’d need to follow to do so:

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

Your Shopify store will already have product pages and a cart built in, but occasionally there may be situations where you’d like to add a Buy Button directly into a page or blog post for added convenience.

For example, if you were writing a blog post about a newly released product, you may want to give readers an easy way to purchase directly from the post, rather than linking them to a separate page.

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

1. From yourShopify admin, go toOnline Store > Blog PostsorOnline Store > Pages, depending on whether you’re adding it to a blog post or page.
2. Select the blog post or page you want to add the Buy Button to.
3. In theContentwindow, select the<>button to switch from the Edit view to the HTML view.

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

Once you’ve saved your page or blog post, your Buy Button will be added to the page. If you want to see what it looks like without publishing, selectPreview(orView pageif you’re adding it to a page) at the top right corner of the page editor.

Add a Buy Button to a Squarespace website

On Squarespace, you’ll be able to add your Buy Button to individual posts or to menus on your homepage. To add a Buy Button to your Squarespace site:

1. Log into your Squarespace dashboard and open the page where you want to add a Buy Button.
2. Hover over thePage Contentarea of the page element where you want the Buy Button to appear and clickEdit.
3. Select the insert point where you want to add the embed code.
4. From theContent Blocksmenu, under theMoresection, selectCode.
5. Be sure thatHTMLis selected from the drop-down menu in the top right corner, and then paste the Buy Button embed code into theCodefield.
6. ClickApply.

Keep in mind that some custom Squarespace themes may require more advanced knowledge of HTML for customizations. In cases like these, it’s best to reach out to a developer directly for help 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. From your WordPress dashboard, go to your posts and select the one you’d like to add a Buy Button to.
2. Depending on the version of the WordPress editor you’re using, complete one of the following steps:
   • If you’re using the Classic Editor for your WordPress site, click theTexttab in the editor to switch from Visual view to Text view.
   • If you’re using the Block Editor for your WordPress site, click the+button, then search and selectCustom HTML.
3. Paste the Buy Button embed code into the space where you’d like it to appear.
4. ClickSave Draft,Preview, orPublish, 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, clickAppearance.
2. SelectCustomizeto open the theme editor, then selectWidgets.
3. Select the area where you’d like to add your Buy Button.
4. ClickAdd a Widget, thenText⁠.
5. Paste the Buy Button embed code.
6. ClickSave & Publish.

Note that Shopify Buy Buttons are compatible with WordPress.org platform, but not with WordPress.com, due to HTML customization limitations.

Add a Buy Button to Wix

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

1. 从你的Wix仪表板,选择站点from theMy Sitespage that you’d like to add the Buy Button to, and then selectEdit Site.
2. In the Wix website editor, click+, thenMore. SelectHTML Code. This will add an HTML code widget to your page.
3. ClickEnter code. On theHTML Settingspop-up, paste your Buy Button embed code into theAdd code herefield.
4. ClickApply.
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, clickSave.

It’s worth noting that if you want to embed Buy Buttons for multiple products, it’s best to embed a collection Buy Button, rather than a Buy Button for a single product. If you embed multiple single-product Buy Buttons, then visitors will see a separate cart for each product.

Adding Shopify Buy Button script tags

In some cases, website builders (such asUnbounce) will require that you paste.

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