Shopify Buy Button vs. Snipcart: The Good, The Bad, & The AwesomeJune 06, 2019
Back in 2015, our friends at Shopify released a cool new product called the Shopify Buy Button (similarly referred to as the Buy Now Button). Its aim was to allow new and existing users to enable e-commerce on any website.
As you may know, injecting products and a customizable shopping cart into any website is one of the core value propositions we offer at Snipcart. So it's no surprise that, since Shopify's button release four years ago, many merchants and developers have asked us:
How is Snipcart different from Shopify's Buy Button?
Since we hear that question so frequently—and to be fair, rightly so—we’ve decided update our review of both products to shed some added light on the matter.
Let's dive right in.
What is the Shopify Buy Button?
Shopify’s Buy Button drifts away from their core product orientation, which allows non-technical users to build their online store easily. While the latter involves a fully hosted online store, the former focuses on embeddable products (generated code copy & paste) and a redirected, hosted checkout. Like many Shopify products—POS, Facebook Shop, Instagram Buy Now—its mission is to diversify sales channels for merchants.
The process is fairly simple: you sign up for an account, you create a product in the dashboard, Shopify generates an embeddable snippet of code for it, and you insert the snippet on any site/blog/web app you want. You can also put this button in emails if you'd like.
Once you've included the products on your site, you can easily enable a simple shopping cart on it through the Shopify dashboard. Here's a decent look at the Shopify Buy Button + cart in action:
Note: When it's time for checkout, a new checkout window pops up for the customer. We'll discuss this later.
All of your e-commerce operations are then managed directly through Shopify's comprehensive dashboard.
What is Snipcart?
See the live demo for this modal cart customization.
All of that is well and good, but here’s the “elevator-pitch” version that even your grandma could understand: Snipcart allows you to sell any product from any website without taking anything away from your personalized brand. Plus, integrating Snipcart is about as low friction as possible. Just copy and paste a few lines of code, easily define your products, and you’re up and running—though, to be fair, you may need to help your grandma with that last part (depending on your grandma).
Check out what others have done with Snipcart right here.
How much do they cost?
Shopify Buy Button pricing
Shopify’s Buy Now Button is available on Shopify's smallest plan, Shopify Lite. As for pricing, Shopify is marketed for just $9 per month. That said, there are some other costs that are pretty standard in the world of e-commerce solutions which should be discussed. Here is a breakdown of what the Shopify Buy Button would cost for online transactions in addition to the $9/mo fee:
The flat fee of 9$/month (as discussed above)
A transaction fee of 2.9% + 30 cents/transaction (if you're using Shopify Payments, fees stop here)
An additional fee of 2%/transaction (if you're using any other payment gateway—decreases with higher paid plans.
For the purposes of this post, we're only comparing the Shopify Buy Now Button as part of the Lite plan, but you can always checkout Shopify’s pricing for hosted sites as they do have options in other price ranges.
2% + payment gateway fees (2.9% + 30 cents)/transaction
With Snipcart's standard pricing, you pay 2% of monthly transactions, plus payment gateway fees. If, say, you were using Stripe as your payment gateway, your total pricing would be: 4.9% + 30 cents / transaction.
It’s also important to note that, with Snipcart, the 2% transaction fee cannot go under $10 per month. Thus, $10/mo would be the minimum price assuming you made less than $500 in sales per month. For more information about our payment structure, check out our pricing page for details.
Use cases handled by both e-commerce solutions
The Buy Button and Snipcart share many similarities. As we already said, each of them is used to add products and a shopping cart to an existing site. With both of them, you:
Create and handle your own website (design/development/hosting)
Set-up and sell digital goods
Get a store up and running quickly
Get a hosted merchant dashboard to manage e-commerce operations
Sell products all over the world
Process secure online transactions
Can offer customer accounts
Offer a responsive shopping experience
Again, these are overlapping features that are pretty standard for e-commerce platforms. Now, for better or for worse, let's turn our attention to some of their differences.
Overview of important distinctions
Advantages of Shopify's vast underlying ecosystem
The Lite plan on Shopify gives you access to other cool sales channels. Merchants looking to sell products in real life can use the POS app, and a Facebook or Instagram store for social media.
As of right now, Snipcart does not support these scenarios. It's honestly something we’ve been tempted to experiment with, but in our 6+ years of growing our business, it just hasn’t been something our customers have shown much interest in. Plus, with the ever-changing trends in social media (like the growing distrust of Facebook or the death of Twitter Buy Button), we prefer to keep it simple and stick with what we know: e-commerce websites.
But, I digress...
There is definitely another more obvious advantage to going with a larger company like Shopify: thanks to their impressive workforce, you get 24/7 phone, chat & email support.
While we are proud of our customer service skills and fast response times, Shopify definitely kicks our a$$ with that 24/7 hour thing. We tried to convince our team to stop eating, sleeping, and showering in order to compete, but the general consensus was that basic standards of mood and hygiene were at an all time low, so we just went back to regular business hours :)
Native e-commerce features for Snipcart
One of the aspects of Snipcart that our team takes the most pride are the built-in features that come with the product.
For example, if you were to use the Shopify Buy Now Button, it wouldn’t include advanced discount scenarios out-of-the-box (alternate pricing lists, specific product and order-related triggers). You’d need to install a few paid apps on Shopify’s marketplace for that. Snipcart offers these varied discounts options directly in the merchant dashboard.
Unlike Snipcart, the Buy Button doesn't handle native subscriptions and recurring payments. You'd also need to purchase apps (20$/month) to help you do that. It’s these little add-ons that can start to hinder your e-commerce functionalities at the most basic level.
So, as I mentioned above, everything you need to have a killer checkout experience is included in the Snipcart standard plan.
With Snipcart, you have direct access to a list of abandoned carts on your store. Through your merchant dashboard, you can contact these customers and remind them about their uncompleted orders, offer them promotions, etc. You also have other features like custom email templates, real-time shipping estimates, inventory management, and TaxCloud/TaxJar integrations.
While you don’t need these features to have a great cart added to your website, they are the types of perks that can give your site a competitive edge. Paying more for these kinds of features is standard in the e-commerce world. Shopify's Buy Button (on the Lite plan), for instance, doesn't offer cart abandonment recovery. You'd need to select a bigger monthly plan to access this feature. The exact same thing goes for real time shipping estimates: Shopify offers them only on their Advanced Shopify plan at 299$/mo.
In short, while Shopify Buy Button has a basic package and an extended package, Snipcart comes with many more features from the get-go, and is less expensive.
An important difference in shopping UX
While conceptually similar, both solutions are technically different. Take the products, or buy buttons for instance. The Buy Button provides you an embeddable snippet of code over which you have little control. For example, if we made a product selling "Bodyguard Services" by our very own Snipcart hero, BatNan, you'd get a code snippet (on the left, below) to create the following product in your cart (on the right).
See the full code on Codepen
As for Snipcart, it allows you to define product attributes on any HTML element on your code (could be a button, a text link, an image, etc.). In this sense, you're in charge of displaying product and product pages however you'd like!
The Shopify Buy Button comes with a simple shopping cart, as we've seen in the .gif earlier. However, the real checkout process is separated from the cart itself. When a customer hits the "checkout" button, a new window pops up, prompting a different URL than the merchant's site. There's definitely an important clash in the user experience here and takes away from the strength of your brand.
Snipcart, on the other hand, handles the whole shopping experience (from adding items to the cart to completing a credit card transaction) directly on the merchant's site. And since developers can customize Snipcart's look and feel however they want, the checkout steps still feel like a part of one seamless browsing and buying experience.
For more information on perfecting your e-commerce UX, we recommend reading our guidelines for optimizing your checkout flow.
Note: Our modal shopping cart project is open source on GitHub. We're betting developers familiar with Gulp & Sass will enjoy the frontend customization workflow we put forward!
Here's an example of an advanced Snipcart customization:
Now there is a certain amount of customization for Shopify's embedded cart that comes with the Buy Button. But it's limited compared to what you can achieve with Snipcart.
However, it's only fair to mention that Shopify has released a Buy JS SDK, allowing a bit more on-site customization for developers. Again, though, the checkout part remains hosted on the Shopify URL as we showed earlier which, we believe, takes something away from your brand.
There's a notion of customization, control and developer freedom that's more present with Snipcart. It's a pattern that shows up in many of our product comparisons, like this one with Stripe Checkout for instance. This has now become especially true with the upcoming release of our v3.0. Though our v2.0 allowed you to customize the cart by overriding CSS classes, we’ve created a way in our newer version to customize cart markup, making customization much simpler and more powerful.
That said, we’ve also designed the default cart to be neutral to most brands as you can see in the .gif below:
To see the full example, feel free to visit our demo shop.
The Buy Button, like Shopify's other products, is indeed a quality product. Much like Snipcart, it offers lots of value when you're using it to fast track e-commerce implementation and customization on your own website. If you're adamant on selling through a POS + social media, it might be a very cool fit for you. And it is easier to use than Snipcart for non-technical folks. But we’re ok with that! We've always tried to remain as developer-centric as possible. As the saying goes, to each their own.
So it's safe to say that the biggest differences here are the out-of-the-box features included with Snipcart and the higher level of shopping cart customization we offer. This, and the fact that our solution keeps the whole checkout process on-site, in the same environment. Again, we want your brand to be connected to you (and only you).
If you want to push the Buy Button's e-commerce power further, you'll either need to upgrade your Shopify plan to a higher fee, or purchase various apps in their marketplace. If you want to do the same with Snipcart and set up deeper integration with external systems, you'll need to write a few lines of code and use webhooks!
At this point, what you prefer is up to you. :)
If you've enjoyed this post, please take a second to share it on Twitter. Got comments, questions? Hit the section below!