Shopify Buy Button: How To Add to Any Website

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

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

Get started with the Shopify Buy Button in three steps

1. Add the Buy Button sales channel to your Shopify store
2. make a Buy Button
3. Add the Buy Button embed code to your website HTML

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

commence by logging in to your Shopify store. If you view the Buy Button listed under your sales channels on the left-side menu, then you can skip ahead to step 2.

On desktop

1. leave to the Buy Button sales channel page in the Shopify App Store (you can also get to this page by going to “Settings” >”Visit the Shopify App Store” and then searching “Buy Button⁠”).
2. Click “Add app,“ then “Add sales channel“ on the next screen.

After the page refreshes, you should view Buy Button listed under “Sales channels“ on the left-side menu. Be sure to pin the channel to your navigation for straightforward access down the road.

If you don’t pin the Buy Button, you can discover it again by clicking on “Sales channels” and then “Buy Button” under your installed channels.

On mobile 

1. Open the Shopify app on your mobile device and select “Store“ from the bottom 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.“

2. make a Buy Button

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

From there, click “make a Buy Button.“

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

Make sure the checkbox is filled and click “Select.“

Once you’ve made your selection, you’ll be brought 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 view a number of options listed on the left-hand side for customizing the look and feel of your Buy Button. On the correct, you will view a preview of what your Buy Button will look like.

Adjust the options on the left to your liking. Your preview will update automatically, so you can view what your Buy Button looks like as you’re adjusting it. You can also view how your Buy Button will appear on 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 desire to be purchasable through the Buy Button. All variants will be selected by default.
• Layout: Choose between “Basic,“ “Classic, “ and “packed view.“ On the correct, you’ll view 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” alternative will make a cart widget on the correct side of your screen. The “Direct to checkout“ alternative will make a Buy Now button that will receive a user directly to checkout (note that customers won’t be able to add more than one item to their cart using this alternative). The “Open product details“ alternative will make 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 alternative 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 make 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, and gain them to your page once the swap is complete).

recall that adjusting these settings will not transformation Buy Buttons that have already been embedded. receive your period and ensure the Buy Button is formatted to your liking before moving to the next step.

When you’re joyful with your design, click the “Next“ button in the top correct 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 leave back to the Buy Button editor to make adjustments.

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

The procedure of adding the embed code varies depending on how you desire the button to look and which website builder and theme you’re using.

Here are the steps you require to pursue to embed a Shopify Buy Button on your Shopify store landing page or blog post, a Squarespace website, or a WordPress blog:

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 desire to provide readers an straightforward way to purchase directly from the post, rather than linking them to a divide page. 

In this case, pursue these steps:

1. First, pursue the steps above to copy the Buy Button embed code
2. From your Shopify admin, leave to “Online Store“>“Blog posts“ or “Online Store“>“Pages,“ depending on whether you’re adding it to a blog post or page. 
3. Select the blog post or page you desire to add the Buy Button to.
4. In the “Content“ window, select the “<>“ button to switch from the edit view to the HTML view.4. Paste the 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 desire to view what it looks like without publishing, select “Preview“ (or “View page“ if you’re adding it to a page) at the top correct 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 person posts or to menus on your homepage. To add a Buy Button to your Squarespace site: 

1. First, pursue the steps above to copy the Buy Button embed code.
2. Log into your Squarespace dashboard and open the page where you desire to add a Buy Button.
3. Hover over the “Page Content” area of the page element where you desire the Buy Button to appear and click “Edit.”
4. Select the insert point where you desire to add the embed code. 
5. From the “Content Blocks“ menu, under the “More” section, select “Code.“
6. Be sure that “HTML” is selected from the drop-down menu in the top correct corner, and then paste the Buy Button embed code into the “Code” field.
7. Click “Apply.“

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 assist 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. First, pursue the steps above to copy the Buy Button embed code.
2. From your WordPress dashboard, leave to your posts and select the one you’d like to add a Buy Button to.
3. 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 the “Text“ tab 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 select “Custom HTML.“
4. Paste the Buy Button embed code into the space where you’d like it to appear.
5. Click “Save Draft,“ “Preview,“ or “Publish,“ depending on the action you’d like to receive. 

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

1. First, pursue the steps above to copy the Buy Button embed code.
2. From your WordPress dashboard, click “Appearance.“
3. Select “Customize“ to open the theme editor, then select “Widgets.“
4. Select the area where you’d like to add your Buy Button.
5. Click “Add a Widget,“ then “Text⁠.“
6. Paste the Buy Button embed code.
7. Click “Save & 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, pursue these steps: 

1. First, pursue the steps above to copy the Buy Button embed code.
2. 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.“
3. In the Wix website editor, click “+,“ then “More.“ Select “HTML Code.“ This will add an HTML code widget to your page. 
4. Click “Enter code.“ On the “HTML Settings“ pop-up, paste your Buy Button embed code into the “Add code“ here field.
5. Click “Apply.“
6. Adjust the size of the HTML code widget to your liking. recall to make sure the cart tab is visible if you’ve embedded a Buy Button with a cart. 
7. When you’re finished adjusting, click “Save.“

It’s worth noting that if you desire 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 view a divide cart for each product.

Adding Shopify Buy Button script tags

In some cases, website builders (such as Unbounce) will require that you paste <script> tags separately in your header, while pasting the rest of the code in the body of your page, wherever you’d like the Buy Button to appear. 

In order to do this, you’ll require to divide the <script> element from the <div> element in your Buy Button embed code. You’ll view the <div> element at the top of the code. It looks something like this: 

<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 receive:

1. Open the page header for the website where you desire 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 desire to add your Shopify Buy Button.
5. Copy and paste the <div> element into the page, wherever you desire your Buy Button to appear.
6. Save your changes.

Add ecommerce to any website with a Shopify Buy Button

Shopify Buy Buttons assist sellers meet customers where they are⁠—no matter the page or the platform. The convenience of selling directly to customers without having to send them to another page reduces friction and can assist to boost sales.

For store owners, a strategically placed Buy Button on a blog page can provide customers an straightforward way to purchase products without leaving the page they’re on. 

For bloggers, artists, writers, designers, podcasters, influencers, and anyone else looking to monetize their work, Shopify Buy Buttons propose an straightforward way to receive advantage of Shopify’s ecommerce platform without having to construct a whole recent website.

With customizable styles, colors, and functionalities, Shopify Buy Buttons let you turn any page or website into a packed-fledged online store.