Webflow has won the hearts of many designers and developers over the years. We continue to see a growing number of web use cases being solved with Webflow. We were certainly thrilled when Webflow added e-commerce features, starting with a beta launch in late-2018. The support for e-commerce is constantly evolving and with a few advanced tweaks and tricks, an online store using Webflow Ecommerce is a robust alternative to Shopify or WooCommerce.
In this "Supercharging Webflow Ecommerce" series, we'll go over some of the common requests in Webflow Ecommerce that aren't yet built into Webflow natively.
Initially, we solved a very common complaint which was not being able to display available inventory quantity on the product page. Just one month later, Webflow actually added this feature! You can now display live inventory count easily within the Webflow Designer since it was added as a custom field - no third party workaround needed. Awesome!
These tutorials will cover a few features you may recognize from the Webflow wishlist or support forum, that Webflow hasn't yet implemented directly. We're able to solve most of these using the Webflow API and a powerful third-party tool called Integromat (known as "the glue of the internet").
Automating Ecommerce Reports
You can leverage your Webflow sales data to achieve better analytics and reporting. For example, you may want to send a daily or weekly sales report to your store manager or other stakeholders. It could be from order data for your fulfillment centre to sales trends for your product team.
About the Webflow API
Webflow provides a rich API, allowing you to access and modify e-commerce elements, CMS data, as well as regular elements of the website. Despite a few quirks and limitations on Webflow's side (like the limit of 60 requests per minute), the Webflow API provides powerful access to the underlying data in your store.
For the purpose of this tutorial, it's important to understand that the API allows:
- reading / writing SKU inventory and seeing linked Products
- reading / writing properties of Products and seeing linked SKUs
- Set webhooks that will allow us to receive live data about: Orders (which Product SKUs have been sold) and manual Inventory changes (whenever an Editor changes the quantity of the product inventory)
You can read more about the API here: https://developers.webflow.com/. Don't worry, we'll walk you through all the steps for building dynamic custom reports.
Real-time data feed
Here we will show you how to utilize the webhooks mentioned above to capture incoming sales data and convert it into the report format of your choice.
For the purposes of this article, it is important to know that Webflow provides three Ecommerce triggers that will send data to a webhook of your choice. These are:
- Ecomm_new_order - sends the details of each order as they happen
- Ecomm_order_changed - sends changes to the order (e.g. order fulfilled)
- Ecomm_inventory_changed - send any manual changes to the inventory
We will be using the new order trigger to see the purchase orders as they happen. Now, the next step is accessing the trigger.
Connecting to the order feed
To simplify the process of creating a webhook and attaching it to Webflow, we will use a SaaS product called Integromat.
Integromat is a convenient tool to link various web apps. Their free tier is fully operational and lets you test the service within the given quota.
Thanks to an existing integration of Webflow in Integromat, we will use the “Watch Events” module, which will automatically add the necessary webhook to integromat:
With this webhook set up, Integromat will see every order placed in our store, in the format of information data bundles arriving:
The next step will be to decide on how to gather this information and how to present it.
We will explain 2 options:
- Exporting data to Google Sheet and creating a daily notification email with an attachment in .xls format.
- Exporting data to Airtable and creating custom dynamic dashboards for your data.
Daily email reports linking Google Sheets with Webflow
This section is about Google Sheets. If you prefer to use Airtable, follow along with the first few steps, and then continue reading for Airtable instructions.
In this case we will create two scenarios in Integromat:
- Saving data to an Google Sheet daily report file
- Sending out the daily file via email in .xls file format
To save the daily report, first we will need to create a template in Google Sheets of how our report should look. Here's an example:
In this simple example above, we have selected what columns we would like to display in the report as ”Order Details”. Above them, using excel formulas, we have summarized a couple of key figures about our sales. We will set up an Integromat scenario to add data to this template starting from the row 18 onwards and matching this column structure.
Tip: you may have noticed that row A1 has “full row” text written in white font. So do also cells A2-A14 and A16. Integromat's Google Sheet “Add row” module adds a new row in the first empty row and a row with an empty first column is considered as an empty row. This little hack makes sure that the data arrives in the right place.
Important note on GSuite vs Gmail
This scenario utilizes Google Sheets and Google Drive. It's important to mention that while you can connect Integromat to Google Sheets using a free @gmail.com account, to be able to connect to Google Drive you'll need a G-Suite account. Due to a Google security setting, Integromat's Google Drive modules natively support connection to GSuite. It's technically possible to bypass this (and connect using a normal free @gmail.com address) but the process is quite complicated. You can read more about it here: https://support.integromat.com/hc/en-us/articles/360013972700. (Skip this if you're using Airtable.)
Before we start adding data to the template we need to make sure that we automatically create a new report file for every day and that incoming orders for the day are being added to the corresponding daily file. See the screenshot above for what the complete scenario will look like.
First, when a new order arrives, it needs to automatically check if a Daily Report file for today already exists. We will use the Google Drive module here:
The convention we are using here is that every daily report will have a name in the following format: “Daily Sales Report DD/MM/YYYY”. You can also see that we are using a timezone parameter to assure that the cut off date ends exactly at midnight in the time zone that the Webflow Ecommerce shop is located in. (If this is the same timezone as your Integromat timezone, you can ignore this parameter.)
What happens afterwards is dependent on the above result. If the file is not found we will follow the upper leg of the scenario and create a new daily file from the template. If the file already exists, we will follow the bottom leg and use the document ID of the found file to execute the “Add a Row” module.
Let's explore the former case first. The first step will be to locate our template. Just execute an “exact term” search for your template name:
Using “Copy a File” we will copy the template into a new file which includes today’s date following the agreed format:
This step has created a file which can be updated with sales data, so what remains is just to map template columns with fields from the Webflow order data:
The Iterator
Important: because a single order can contain multiple items, we are using an Iterator module to break out the items individually. In our template, each row will represent an item from the order. This means that “Product name” value will come from the Iterator, but the Order ID will come from the original order. Order numbers will repeat in our Sheet for each item coming from the same Order.
The final step is to create a scenario that will email our daily sales report:
We will have this scenario set to execute daily at 2am (or whatever time you choose), so it can arrive in our mailbox first thing in the morning. The first “Search for Files” module uses a similar query as before, but this time we need to push back the search by one day to get the result for yesterday:
To attach the returned file to Gmail we will use the “Download File” module. This module can convert the downloaded to PDF, OpenDocument format or Excel, since Google Sheets is not a stand alone file format. Another option is attaching a link to the file in the body of the email.
Viewing data in Airtable
You mean you don't like spreadsheets?
If you don't like Google Sheets, another great option is funnelling your data to Airtable. This solution could be very useful, for example, if you are using other third-party services for fulfillment or order management. Airtable can be used for further automation and connects to thousands of other fun apps. Spreadsheets, on the other hand, are quite boring.
Linking data to Airtable is very straightforward as we'll be using only one single table that will be updated in real time as the orders are placed.
Similar to the Google Sheets example explained earlier, we are using the Iterator to convert line items into individual records with a repeated order number.
Here is our preferred Airtable data layout for this particular store:
Using Airtable filters, we can create a variety of Views that can show us different sets of data, like the last 2 weeks of sales or only sales that happened today. We can also use Airtable Blocks to generate some basic visual charting / dashboard functionality:
.jpg)
And that's it! Now you have all your sales data in one easy place! Both of the solutions presented make Webflow sales data more accessible and easier to analyze.
Confused? Need some help?
No worries - we're just one email away. Reach out to us for any of your Webflow customization needs.
