Shopify Buy Button: How To Make Any Website Into an Online Store

You can use Shopify to sell online, even if you don't want to create a full online store.

The Buy Button lets you monetize any web page, whether it's a blog, portfolio, or social media account.

Below, find out how to embed the Buy Button into any type of website to give visitors the option to buy products.

What is Buy Button?

Buy Button lets you create and embed a checkout option on any type of website, so customers can buy your products right from the page they're visiting.

Shopify generates the code needed to embed and showcase your items, making the button simple to set up, mobile-friendly, and secure.

You can customize the color scheme, product details, and product images shown with the Buy Button to match your page style.

Learn more about the Shopify Buy Button.

Get started with Buy Button: 3 steps

1. Add the Buy Button sales channel to your Shopify store
2. Create 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

Start by logging into Shopify. If you see the Buy Button listed under your sales channels on the left-side menu, then you can skip ahead to step 2.

On desktop

1. Go to the Buy Button sales channel page in the Shopify App Store.

2. Install the app

3. Pin the app to your admin navigation (optional)

If you don't pin the Buy Button, you can find it again by clicking on "Sales channels" and then "Buy Button" under your installed channels.

On mobile

• Open the Shopify app on your mobile device and select "Store" from the bottom menu.
• Next to "Sales channels," select "Add channel" on iPhone or "+" on Android.
• Select "Buy Button," then tap "Add Buy Button."

2. Create a Buy Button

Once you've added the Buy Button sales channel, you're ready to create your Buy Button.

On the Buy Button tab, click "Create a Buy Button".

You can create Buy Buttons for a single product or a whole collection of products. On the next screen, you'll be asked to select which option you prefer.

Choose an option, then select which of your products you'd like to create Buy Buttons for.

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 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 automatically, so you can see what your Buy Button looks like as you're adjusting it. You can also see 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 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, and return them to your page once the transaction is complete).

Remember that adjusting these settings will not change Buy Buttons that have already been embedded.

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.

The code you've copied can be pasted into the HTML of any webpage. 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 there.

The process of adding the embed code varies depending on how you want the button to look and which website builder and theme you're using.

Adding Buy Button script tags

Some website builders 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 need to separate the script element from the div element in your Buy Button embed code.

You'll see the div element at the top of the code. It looks something like this:

<div id="product-component-1655929612938"></div>

The script element makes up the remainder of the embed code, starting with script type="text/javascript" and ending with /script.

Copy and paste the script element, in its entirety, into your website page header.

Then, open the page editor for the page where you want to add a Buy Button. Paste the div element into the page wherever you want the Buy Button to appear.

Add ecommerce to any website with Buy Button

Buy Buttons let sellers meet customers where they are⁠. Selling directly to customers without sending them to another page reduces friction and can help to boost sales.

For bloggers, artists, writers, designers, podcasters, influencers, and anyone else looking to monetize their work, Buy Buttons are an easy way to use Shopify without building a new website.