Review: Webflow E-Commerce & Snipcart (w/ Video Tutorial)December 03, 2020
Choosing an e-commerce solution for your online store can be a real hassle these days.
There are lots of different options, each responding to specific needs. In the last few years, we’ve seen the rise of a new kind of tools: the no-code solutions.
Webflow is one of the pioneers here.
It’s a designer-centric website builder. People use it to create beautiful websites without writing a single line of code.
A while back, we published a Snipcart integration tutorial with Webflow following increasing demand from the community. However, both platforms are miles away from what they were at that time.
Last year, for starters, Webflow released an e-commerce feature for its platform.
In some ways, Webflow now overlaps with Snipcart functionality.
This piece will cover:
- An overview of both Webflow e-commerce & Snipcart
- Their included features and pricing
- What makes them unique
- A Snipcart + Webflow video tutorial
Hopefully, it will help you decide which one is the best for your next e-commerce project.
You can find more e-commerce solutions comparisons here.
Shoutout to our friend Pixel Geek, who made the video tutorial. It’s the best resource out there showing how to easily integrate our shopping cart into your Webflow project.
Let’s get into it!
What is Webflow e-commerce?
Recently, they released a new feature: Webflow e-commerce, the no-code/design-first e-commerce site builder. It allows you to build an e-commerce website using the Webflow platform entirely. Their offer is more on par with Shopify in the way that it offers an all-in-one package. Content management, design, admin functions, and e-commerce features; everything is managed within Webflow.
The main difference between the other monolithic e-commerce solutions is that they offer true customization. You can genuinely craft a unique website as opposed to the rigid templates offered by traditional e-commerce platforms.
Everything from the product pages to the shopping cart can be designed to match your brand. You can also customize the checkout experience to be in tune with your whole website.
The process is relatively simple:
- Create an account on Webflow
- Choose a template OR start from scratch
- Create your products inside the platform UI
What is Snipcart?
Snipcart is a flexible shopping cart developers can easily integrate into any website in minutes.
You add Snipcart's checkout to a site like you'd do with Google Analytics: by copy-pasting a few lines of code snippets.
Products are added pretty much in the same way!
All of your e-commerce logic can effectively be handled in the frontend, making it easy to integrate in web apps, static sites, or even old school CMS.
With basic CSS skills, you can change the look and feel of your whole checkout flow without much limitations. Snipcart makes for a particularly flexible development experience, hence the “dev-centric” part of this description.
Now for non tech-savvy folks trying to figure out what they’ve just read, here’s how I explain what we do to my mom (‘sup Carole): Snipcart allows you to sell pretty much anything on your website while keeping your personalized brand.
If you decide to go with a combination of Webflow and Snipcart however, you’ll only need very basic HTML knowledge and solid Ctrl + C / Ctrl + V skills. The tutorial below will highlight that.
“Developer-oriented” doesn’t mean that merchants are left behind. Snipcart offers a friendly merchant back office to manage all of your e-commerce operations: orders, discounts, abandoned carts, shipping, and more.
Snipcart vs. Webflow E-Commerce Pricing
First of all, it’s important to note that Snipcart and Webflow are free for testing. You only start paying once you put the site online and begin accepting orders. Webflow e-commerce doesn’t allow you to test transactions before going live, however.
Let’s compare the cost of both solutions for two different stores.
Let’s say “Store A” and “Store B” both sell candy online.
Store A sells its candies using Snipcart. We’ll call it: The Candy Factory Store B sells its candies using Webflow e-commerce. We’ll call it: The Lollishop.
As you can see in the chart above, if we only focus on price, Snipcart is a good option if you don’t have an enormous monthly sales volume.
On the other hand, if you sell for higher volumes of goods each month, using one of Webflow e-commerce fixed fee plans might be cheaper than Snipcart’s standard pricing.
It is important to note that Snipcart offers a custom plan if you have a high sales volume, are crowdfunding or are a non-profit/school.
What features can they both handle?
Webflow e-commerce and Snipcart share many features. As stated earlier, they both offer a full custom shopping cart and checkout experience. With either of them, you can:
- Customize the checkout process to fit with your whole site and brand
- Offer discounts
- Have on-site checkout
- Sell physical and digital goods
- Handle tax management
- Automatize shipping calculation
- Manage your inventory
- Support multiple languages
- Add product options to your cart
- Process secure online transactions
- Have a hosted merchant dashboard to manage e-commerce operations
- Get a custom store up and running easily
- Integrate webhooks and APIs
These shared features are pretty standard in the e-commerce space.
Now to truly explore both options, let’s dig into their differences!
What are their distinctions?
Webflow e-commerce advantages
Webflow e-commerce has a few features that are not offered out of the box by Snipcart:
👉 It gives you access to “cool” sales channels: Instagram and Facebook.
That’s something Snipcart doesn’t support at this moment. It's not something that has been asked a lot by our users, so we prefer working on things that we already do great for now.
👉 Apple Pay and Google Pay are also integrated into the checkout available payment options. (You could add those to Snipcart via our custom payment gateway feature.)
👉 They also offer out-of-the-box integration with shipping software for automatization. Meaning that you can synchronize your orders with shipping software to create the shipping labels and automate the tracking.
A few of you might think that I forgot to put a big one on the list; the no-code/design first website building. As you’ll see later on, you can also achieve this by combining Webflow and Snipcart.
One thing we are proud of at Snipcart is the set of built-in features that we offer.
👉 For example, we offer a unique customer dashboard where your customers can create an account to access their order history. It can be used on your site to get all of your customer info for future marketing needs.
👉 We also have an abandoned carts feature in which you can set personalized recovery email campaigns and get a complete list of all of the carts abandoned by your site’s visitors.
👉 Need recurring payment plans and subscriptions? We got you covered.
This feature is only available in v2 at the moment (with Stripe), but we’re working hard on releasing a beta for v3 real soon.
👉 We also support multi-currency. After all, one of the most significant benefits of e-commerce is the ability to sell your stuff worldwide; it would be a bit counterintuitive not being able to adapt to different markets.
👉 Snipcart also supports a broader range of payment gateways:
- Stripe (also offered by Webflow)
- PayPal (also offered by Webflow)
- Braintree Payments
- Or integrate a custom one!
Last but not least, Snipcart embraces the Jamstack paradigm. Let’s see what this implies.
Snipcart, by definition, is truly Jamstack-friendly.
The “why” behind these benefits is explained comprehensively in this article.
Feel free to skip this part if that’s not your jam (pun intended). As I stated earlier, Snipcart is closely tied to this modern web development paradigm. Why does it matter? Here are the main benefits of the Jamstack:
- Better performance
- Cheaper development costs
- Increased security
Our shopping cart’s ow-footprint layer that you can add to any website makes it a natural fit in this API-driven ecosystem.
Since our cart and checkout live directly in your frontend, you can easily migrate your existing website to another CMS without having to rebuild your whole frontend and the e-commerce functionalities that come with it.
You can integrate it into any setup you already have. It allows you to use the tools you need without being prisoner to a restrictive monolithic CMS. It also means that you can cherry-pick the features you want to add to your project.
Your frontend and backend are entirely independent. Welcome to the headless world my friends!
It's impossible to use Webflow's e-native commerce features in a Jamstack manner.
If you want to go the Jamstack way using Webflow and Snipcart together, you could use a new tool developed by Udesly. With their adapter and the HTML export feature in Webflow, you’ll be able to import the site you built to a headless CMS while integrating Snipcart for your e-commerce needs.
Snipcart integration tutorial with Webflow
If you decide to go with Webflow, good for you. If you also decide to use Snipcart for the e-commerce part, great! This section might be useful.
Our friend Pixel Geek did this great tutorial on how to integrate Snipcart in your Webflow website. We were impressed to see how easy it is to integrate our shopping cart into Webflow with little to no code.
- How to install Snipcart in your Webflow project
- How to create a buy button & define products in the Webflow platform
- How to manage products dynamically using Webflow collections
- How to add product variants
- How to insert an “Open cart” link & cart summary at the top of a page
- How to enable Snipcart’s customer dashboard
If you enjoy this, feel free to like, share & subscribe to his channel! :)
So, Webflow e-commerce or Snipcart?
So which of those e-commerce solutions is the best?
Well, the short answer is: it depends on your needs. The perfect fit depends on who you are as a user and the features you need in a shopping cart. There are no silver bullets. Unless you’re an evil werewolf. If so, we have lots of them, so beware.
This being said, what have we learned here?
Webflow e-commerce is a design first/no-code website builder including e-commerce features. Everything is managed on their platform. It’s an all-in-one solution for people looking to create a unique and customized website to sell online.
Snipcart is a shopping cart that you integrate into your existing website by copy pasting few lines of code. It adds e-commerce functionalities to any website. You can fully customize it to fit your brand.
Webflow e-commerce offers these features that Snipcart doesn’t:
- Shipping automatization
- Social selling
Snipcart offers these exclusive features:
- Multi-currency support
- Customer account and dashboard
- More custom payment gateways
- Recurring payment plans and subscriptions
- Abandoned carts recovery
If you’re not a developer (and can’t work with one), a more user-friendly solution such as Webflow might be your best bet. You’ll get customization without entering code territory, but you might have to leave flexibility behind. Webflow really focuses on design and can be time-consuming. If you are looking for something quick and easy, I suggest looking somewhere else, like Shopify themes.
If you’re a developer looking for customization power and flexibility, you’ll probably want to rule out Webflow e-commerce.
Fortunately, the more developer-centric headless e-commerce solutions might be more accessible than ever to non-developers. As we’ve seen in the video tutorial, you can indeed integrate Snipcart into your Webflow hosted website to enable e-commerce functions.
At this point, it is all up to you!
What do you think about Webflow e-commerce? Did we get it right? Happy to discuss in the comments!
If you've enjoyed this post, please take a second to share it on Twitter.