A Shopify store may not be your first or only presence online. Many people build a following on external sites or blogs before thinking of selling products online. Even after starting a Shopify store, some people may want to continue their presence on external sites or blogs. In such cases, you don’t always have to send people over to your Shopify store to purchase products. You can start selling your products on external sites by embedding the Shopify Buy Button on those sites.
In this post, we will go over how to set up the Buy Button for your Shopify products, and the advantages and limitations of using the button.
Shopify Buy Button: Setup
The Buy Button creates code that you can embed directly into most external site pages or blog posts, as long as they allow you to use an HTML or plain text editor. The Buy Button is available through Shopify’s Lite plan ($9/month), and through all higher plans.
To get started, go to Settings on your Shopify dashboard and click on Sales channels. Here, find the Buy Button and click on Add channel.
Add the Buy Button sales channel
Once the channel is added, it appears on the left sidebar of your Shopify dashboard. Click on Buy Button in the left sidebar and click Create a Buy Button to start creating code for your products.
Create a Buy Button for products or collections
Once you select a product or collection, you can customize aspects of the button and preview the appearance. You can customize:
- whether to include variants where people can select from a dropdown, or to include a single variant of the product.
- option to include product details like image and price, or just include a buy button.
- colors for button, button text, and background.
- what the button links to – you can link to Cart, Checkout or Product Modal.
- the button text.
Customize Buy Button for a product
You can link the Buy Button to Checkout if customers would typically only purchase one product at a time. If you are embedding multiple products or anticipate customers purchasing more than one product at a time, you can link to the Cart.
Once you’ve made your selections, click on the Generate embed code button.
Copy-paste the HTML code into your website
Copy the HTML code and paste it into your external site page or blog post. In this example, we linked the Buy Button to the Cart so that visitors can purchase multiple items at the same time.
Buy Button on external site with Cart panel
The Cart option adds a panel overlay on the external site where customers can see and edit their cart selections. Once they are ready to Checkout, they are redirected to your Shopify store checkout page to complete the purchase.
Learn more about adding embed codes for specific platforms, and organizing multiple Buy Buttons on the same page through CSS.
Shopify Buy Button: Advantages
The Buy Button opens up new ways to sell your Shopify products. If you have an external site or blog that gets a lot of traffic, you don’t have to redirect people to your Shopify store to make a purchase. This can create a disconnected user experience. You can use the Buy Button to allow customers to directly purchase products on external sites without disrupting their experience.
This also takes away the need to migrate all your content over to your Shopify store so that you don’t lose your search ranking, presence, or traffic.
In addition, you can measure the success of your Buy Buttons as Shopify provides you analytics specific to the Buy Button sales channel.
Track Buy Button sales on Shopify
By default, you can see your total sales, the average order value, and top selling products for your Buy Buttons.
Shopify Buy Button: Limitations
One limitation of the Buy Button is that it doesn’t integrate with Shopify apps. If you have products modified by other apps (like our Product Customizer app), these modifications won’t carry over to the Buy Button. Buy Button can only show data that’s been added directly into your Shopify dashboard.
The Buy Button typically works only with the default Shopify product details and customizations. In cases where other apps are modifying your products, make sure to test the Buy Button, or it may be easier to redirect visitors to your Shopify store.
Shopify Buy Button: Summary
The Shopify Buy Button allows you to easily embed your Shopify products on external sites. This can be really useful if you already have an established website or blog that gets a lot of traffic. If you want to add an eCommerce component to your external website or blog, you don’t need to shift everything over to a Shopify store site. You can simply create products on a Shopify store, and then include them on your external site by copy-pasting HTML code.
You can add Shopify Buy Buttons to simple HTML websites, or platforms like WordPress, Joomla, Drupal, Tumblr, Wix, Weebly, Squarespace, Blogger, and more. However, one limitation of the Buy Button is that it doesn’t always carry over modifications to your products by other Shopify apps.
Have you used the Shopify Buy Button for your products? What has your experience been like? Share with us in the comments.
Jai Sangha
Latest posts by Jai Sangha (see all)
- Add Trust Badges to Your Shopify Store [2019 Edition] - June 20, 2019
- 3 Tips to Improve Your Shopify Store SEO - March 23, 2017
- March App of the Month: Show Instagram Feed on Shopify - March 15, 2017
Hello,
I was wondering if this would allow a shop to have a customized external web app and then on success of the checkout using the buy button send that customized product’s details to the owner of the store?
The customized product we have has 1000+ variations and so we could not create this many products within shopify, but we could create one shopify item labeled “customized product” and as long as the details get sent in line items with the customer’s name/address it would work fine. Would this be something possible for a developer to do with this app?
Hey Mike! This is a great question. I’m afraid that the Buy Button doesn’t support line item properties, which are Shopify’s way of passing additional data for a product into the checkout / order. Without line item property support, there’s no way for a developer to pass customized product information from the Buy Button back to your store and into the order.
We’ve run into this issue with our Product Customizer app ourselves, as we can’t pass customization data into the order, so I’m afraid that using the Buy Button for highly customized products won’t be possible. Sorry I don’t have better news for you here!
Okay good to know! Thanks for the info!
This posting begs the question, can you insert the Shopify Buy button inside a Shopify blog posting?
Hey Simon,
That’s a good point. Yes, you can embed the same HTML code within a Shopify blog post. Here’s a quick overview of how to do it.
Hope it helps!
Do you know if a 1 -click upsell app would work after checkout using the buy button?
Hey Rob! The Buy Button itself doesn’t allow for a one-click purchase, so while you could potentially embed one on your “Order Received” / thank you page, I don’t think there’s a way to do a one-click sale here. The only app I’m aware of that can do this is from Zipify.
Is there any way to customize the CSS of the Shopify Buy Button linked to an external website? I’ve been told by many Shopify support staff and my own website coder tell me that it’s not possible unfortunately.
My checkout pages only work with a big add to cart button design, and would like to see if anyone knows if it’s possible to somehow “layer” my own add to cart button design on top of the Shopify buy button on an external website.
Hi Eric,
Thanks for highlighting the issue. I’ve seen a number of threads on the Shopify Help Center regarding this as well. Unfortunately, there’s no way to customize the CSS of the Buy Button to make it larger from what I understand. The customization options still seem to be limited to the ones outlined in the Buy Button documentation.
Sorry, don’t have better news. Hopefully, enough people raise the issue with Shopify to add customization options.
Jai
Hey there,
I just wanted to let you know that we recently launched the latest version of the Buy Button and that there are a lot more customizability options now.
We’re also introducing the Shopify Buy Button JS library. Which is a highly customizable UI library for adding ecommerce functionality to any website. It allows you to easily create interactive UI components such as product listings and shopping carts with minimal configuration, while exposing powerful customization options.
Please visit http://shopify.github.io/buy-button-js/ for more information.
We’ve also built a brand new Buy Button Builder that allows you get further into customizing Buy Buttons without having to get into the code.
If you need anymore information please visit: https://help.shopify.com/manual/sell-online/buy-button
Thanks for your interest in the Buy Button!
Hey Daanish, thanks so much for the update here! Glad to see the new options, we’ll definitely check it out :)
Not a problem at all! Please feel free to contact us with any feedback!
does anyone know how to link my buy button to a different website like Amazon. For example, in my store it says “Click the button below to buy” and the button says “buy now” how can I make it go to my amazon page when its been cliked?
Hi All,
We are using the shopify buy button on our website, we integrated it into our product pages. It’s a great solution as long as you don’t put too many on one page. More than one will drastically slow down your page load times.
Take a look: https://nuhni.com/
I have spent a couple of months building my site in Wix, only to learn they don’t really have a true South African payment gateway. If I use the Shopify Buy Button approach, will it allow me full access to PayFast (3rd party supported by Shopify) to facilitate sales in ZAR?
I figured out a work around. In the embed code change “buttonDestination”: “onlineStore”, and then change the “text”: {
“button”: “VIEW ON AMAZON”
},
this will have it open the product on your online store then they can view in on amazon
Thanks for the tip, Brad!