Webflow E-Commerce: Add A Shopping Cart To Your Site In MinutesMarch 17, 2016
A few months ago, we noticed a growing interest in our product coming from the Webflow community. Many users emailed us directly, asking for help & guides to integrate our shopping cart solution to the all-in-one design platform. Unfortunately, we were quite busy at the time (developing our v2.0, among other things), and didn't look much into Webflow.
Since related requests kept coming in (and since we pride ourselves in offering easy e-commerce integration with any platform), I personally took some time to explore the platform a bit. Seeing how user-friendly it was, I decided to write a post showing how easy it is to plug Snipcart into a Webflow e-commerce site.
What is Webflow?
Webflow is a web designer's dream come true, allowing them to design & develop websites at the same time. Designers can craft dynamic, responsive websites inside a straightforward drag & drop UI with a comprehensive list of features. Webflow then automatically generates the corresponding HTML & CSS for them.
Now when our content guy (who brags about his Irish roots all the time) noticed this post would be published on Saint Patrick's Day, he practically forced me to use this theme for our demo. So, in order to honor the patron saint of Ireland ourselves, we'll be showing you how to sell Irish celebration gear with Snipcart & Webflow. Let's do this.
Integrating Snipcart to your Webflow e-commerce site
Embedding Snipcart's shopping cart platform into a Webflow project is extremely straightforward. Next to no programming knowledge is required. Plus, the fluidity and the UX of Webflow make for a very intuitive shop management. Now let me walk you through a few easy steps.
For this post, we're assuming you already have a Snipcart account. If not, you can sign up for free. We're also assuming that you already know your way around Webflow. If not, you can check out their awesome getting started section.
1. Create your account
Sign up for a free Webflow account. You just need an email and a password. Woot!
2. Create your first website
Right from the start of the onboarding experience, Webflow offers a decent range of templates you can use to create your e-commerce site. However, I recommend for a simple design here. I personally chose one called Newport.
3. Get a basic setup running
First, rename the specific fields in your page, like the title and the menu.
We won't be able to use a collection with dynamic listing (Webflow can't handle custom fields in the element's custom attributes). So just remove these pictures coming from the "Photo gallery" collection.
4. Create a products grid
Now we can move on to creating the structure that will contain all of our Snipcart products. We will in fact create a
div containing three different divisions. In each of these three divisions, we'll insert an image and a button.
Let's add the CSS class
snipcart-add-item on every button. This way we will be able to manipulate the style of multiple elements at once. At this point you should be able to see something similar to this:
5. Add the required Snipcart files to your website
In order to use Snipcart on your Webflow project, you will need at least the Personal pricing plan. To view your available custom options, click on the icon in the top left, then click on "Site settings". You will have access to the "Custom Code" tab that will allow you to add HTML code in the header or the footer of your site.
6. Define your products
Now all that's left for us is to add Snipcart products custom fields directly in the Webflow interface. To do this, there is a very simple operation panel on the right that lets you enter the name of the attribute and its value when you click on your buy buttons. Here's an example:
Wanna know what this stuff might look like once it's live?
Here's our basic Snipcart Saint-Patrick demo site.
Well, that was quick
And that's about it, folks! Follow these steps, and you'll have a kickass Webflow online store powered by Snipcart in a few minutes. Integrating Snipcart to Webflow is a very straightforward exercise. While we know some people have already done it, we sincerely hope this post will help more users do the same!
Oh, I almost forgot: Happy Saint Patrick's!
If you enjoyed this post and found it valuable in any way, go ahead and send a tweet our way. I'd really appreciate that! Got any questions regarding Webflow with Snipcart? Feel free to hit the comments.