Connect Your Webflow Ecommerce Store to Printful

Here at visualdev.fm we want to make sure that we have content for everyone. You will certainly find tutorials, blog posts, resources, and videos that require no coding knowledge. However, you will also find plenty of articles and resources for the advanced user as well. We break all of our content into different levels. You can read about our levels and see the difficulty of this post below.

No Code

You don't need to know anything about code. We'll provide you resources and you can use web apps and tools we recommend and just follow along.

Low Code

You don't need to know how to code, but there might be a few lines of it in the tutorial. You will copy and paste and replace some values.

Some Code

You need to know a little but about how code works. You have an understanding of the concepts and are ready to customize settings using code.

Hold on to your butts

OMG. THIS IS COMPLICATED!! We're going to dive deep and build complicated items and workflows with nocode tools & you need a good grasp on code.

Time to get that passive income rolling!

You may be wondering what Printful is. The Printful allows you to sell products and apparel without having to carry overhead. You can, for example, connect it to your Ecommerce store that is selling shirts. Then, when an order comes in, it's sent to Printful.

You may be selling your shirt for $25, but once Printful receives the order, they print the shirt and ship it for you. They only charge you, say, $12. You made $13 on a sale, and it didn't require any work from you at all aside from the initial setup. This is passive income at it's finest.

I have seen a lot of conversations in the Webflow forums on how to connect Webflow Ecommerce to Printful. I had this working a while back with Zapier and custom code, but the set up was tough and required a lot of extra work when adding new products.

Last week, I decided to take another look at it and see if there was a better way to make this work and have found a solid answer and I can't wait to share it with you.

First things first, what will you need to make this work?

Let's get started! In this example, I'm going to assume that you already have a functioning Webflow store. That Ecommerce site doesn't require any extra work. You need the products you're going to sell, and that's it!

First, you're going to need to take the products you're selling and add them to a Google Sheet. Here's a glimpse at what my sheet looks like:

In one column, I have the name of the shirt with the variables listed. I also have a column setup that holds a variant ID for printful. And in the last column, I have a link to a print file for the T-Shirt that our customer ordered.

Why the Google sheet? We need a couple of things when we create a Printful order. The first thing is we need a variant. So if we're using a Large Blue Bella Canvas Tee, the ID for that in Printful would be 4173. We need that and a link to the print file to complete the order. With the Webflow Ecommerce API, we can't pass this information through with a custom field.

When we work in Integromat, we're going to use the name of the product and variant that comes from Webflow and look up the item in this spreadsheet. Now the Printful variant and the file are available for use to use!

To find the variant ID's for your printful product, you can use their handy guide here:

https://www.printful.com/products

Once you have your Google Sheet setup, it's time to move on to Integromat. Before you move do, make sure there's been at least one purchase in your Webflow store. Login to Integromat and click on scenarios in the left-hand menu:

Scenarios are the place where we work in Integromat. Creating a scenario is like creating a zap in Zapier.

Once you are there, click on "Create a new scenario" in the top right-hand corner. A new screen will appear that allows you to search for apps. Search for Webflow and select it. Once selected, you can search for the other apps we'll need - Google Sheets and HTTP.

Once all three apps are connected, click on continue in the top right-hand corner:

Now you'll need to click on this icon waiting for you. There's even a message: "Start by clicking here and select the first module for your scenario." When you click, it will show you the three apps we selected. This is the trigger and what starts the workflow. You'll see a myriad of options. You will eventually want to choose Watch Events here and use a Webhook that catches new Ecommerce orders. If you select this, however, you'll need to leave Integromat to make a purchase, so you have data to pass to the next steps. But, to get this working, and so you can see the concept, let's use "List Orders."

Connecting can be weird to understand, but follow the GIF above and you'll be find. You'll see a Webflow authorization screen where you can choose your Ecommerce store. Once authorized, you'll be able to pick your store as a connection. Choose your Ecommerce store under Site ID. Then you can select an order status. Here you'll want to choose unfulfilled. And you can limit this to 1 order (the most recent). Click, "OK."

Next you'll need to hover over the right side of the Webflow trigger and click on the plus button to add another step. The next app will come from the tools section. We need to select the "Iterator."

This is where the magic happens! Clicking on this module will present you with a menu with the word array and an input field. Select the Purchased items field from Webflow and then click OK.

Now you can click on run once in the bottom left-hand corner of the screen to test and see that we're on the right track. It will warn you, but you can run this anyway.

If you had ever used the Webflow API before or tried this with Zapier, you would now previously this was challenging. This data was all run together, and it was hard to work with unless you knew how to code. Now, Integromat puts this data into an array, and we can work with it! It's so amazing!

Now you're going to click on the plus button on the right side of the Iterator and add a new app. This time, we'll use Google Sheets. From the list, choose that you want to select search rows. Once you do, you'll need to follow the same process you did with Webflow. This time you'll be connecting your Google account. When the account is connected, select your Google Sheet where you have the names, variants, and print files stored.

Choose your sheet, and then we'll filter. Choose your product column in the top box and then choose "Contains (case insensitive) in the middle field. In the bottom field, we'll select the variant name from the iterator step.

Click "OK" on that module and close it out. Now you'll click on the right side of Google Sheets and add a new module. This time we'll use the HTTP app. We want to choose "Make a Request" here. For the method, you'll select POST.

Right now, we'll need to pause to grab our API key from Printful. When in your Printful Dashboard, click on the Settings option in the left-hand menu. Then choose API from the submenu. Click on enable API access and grab your API key. Printful requires you to have the Base 64 version of this key to use the API. You'll need to encode your key. If you don't know how to do that, you can use this site: https://www.base64encode.org

Just add in your key to the top field and then click on Encode. Now grab the key from the result field below, and you have your token you'll need to create a Printful order.

Let's go back to Integromat and the HTTP settings. You'll need to add a Header. For the name, type in Authorization. For the Value, type in Basic, a space, and then paste in your encoded API key. Scroll down in that module setting and choose Raw as the body type. For the content type, choose JSON (application/json).

Now for the hardest part, you'll need to copy this code and paste it into the Request Content box. Once it's there, begin highlighting the values and replacing them with fields from the previous steps. When you're finished, it should look like this:

  • You'll get the customer name and Address from Webflow.
  • You'll grab the Variant ID and the Print file from the Google Sheet.
  • And you'll get the count from the Iterator.

Perfect! Now one last step. Click on the line in between Google sheets and the HTTP module and add a filter. Choose match and then set it up like this:

What this allows us to do is only return the products we found. Now, we're ready to test the process. Don't worry; you won't be charged by Printful yet for running this.

You can see below that my process runs and then I have orders in my Printful Dashboard!

These orders are set to draft by default, so you'll need to go in and approve them at the end of every day. Or you can use the Printful API in the HTTP step to set the order to pending, so you never have to do anything but check how much money you're making! :)

Obviously, now that you know how this works, you'll need to go back and rebuild this using the Watch Event as the first step! Let me know if you have any questions about this process in the comments below! Good luck with your Printful integration!

About the Author
Ben Parker
Has no idea what he's doing

Have some feedback on our blog post? Join the conversation below and become a part of our community. We love to talk about building with no-code and we'd love to chat.

Or you can hit me up on Twitter
@rileyrichter
and we can chat there.

Also, don't forget to listen to our latest visualdev.fm episodes and subscribe to our podcast. We release new episodes and resources every week.