Connect your Webflow store to Printful

Updated

You can automatically send orders from your Webflow store to Printful for production using Make. While this guide focuses on Make, you can apply similar principles to connect your Webflow store to Printful using Zapier, Gumloop, or other automation platforms.

Before you get started

Make sure you have a Webflow site with an Ecommerce site plan. You’ll also need:

  • your Webflow site ID, which you can retrieve via the Sites API or from Site settings > General > Overview
  • products set up in your Products Collection
  • a Make account
  • a Printful account
  • your Printful API key
  • products set up in Printful

How to set up Webflow products

Important

Your Webflow product variant SKUs should exactly match Printful’s sync_variant_id values. The sync_variant_id serves as a unique numerical identifier for each Printful product variant (e.g., 4752058849) and can be retrieved through the Printful API or through the open source Printful-Webflow Product Sync tool.

To set up your products, first get the variant_sync_id for each Printful product variant using the Printful API or the open source Webflow-Printful Product Sync tool. Then, in Webflow:

  1. Go to CMS panel > Ecommerce > Products
  2. Set each product variant’s SKU to match its corresponding Printful sync_variant_id in the Variants section
  3. Double-check that all products have matching IDs

How to connect Webflow and Make via webhook

To connect Webflow and Make using a webhook, go to your Make team dashboard click Create a new scenario. Then:

  1. Choose Webhooks from the list of all apps
  2. Choose Custom webhook
  3. Click Create a webhook and give it a name (e.g., “Webflow order received”)
  4. Click Save
  5. Click Copy address to clipboard to copy the generated URL and keep this tab open!

Pro tip

You can rename your modules (e.g., “Get Webflow order,” “Send to Printful,” etc.) to more efficiently identify them as you work through the steps in this guide. To do this, right-click each module and choose Rename.

Next, open a new tab and visit Webflow’s developer documentation on creating a new webhook. Note that you’ll need to click Login to log in to Webflow and authorize the Webflow Developers site in your Workspace in order to send a real request.

Then, in the API playground:

  1. Add your site_id as the Path parameter
  2. Choose ecomm_new_order as the Trigger type
  3. Paste your webhook URL from Make in the URL field
  4. Click Send request

Finally, go back to your Make scenario, right-click the webhook module, and choose Run this module only. The webhook will start listening for new orders to your Webflow site.

To confirm the connection was successful, you can create a test order with Printful products on your Webflow site and verify the order data (i.e., the payload) appears in Make.

How to prepare, format, and combine your order data for Printful

Prepare all items in an order

Next, you’ll need to add a Flow control module to your Make scenario to process each item in an order:

  1. Go back to your Make scenario
  2. Click the “plus” icon to add another module
  3. Choose Flow control
  4. Choose Iterator
  5. Click into the Array field and choose payload.purchasedItems[] from your Webflow order data
  6. Click Save
The payload containing order data populates in Make when an order is received.

Format each item in an order

Printful requires that each order item sent via the Printful API includes its sync_variant_id and quantity. To format each order item according to Printful’s requirements, create a new data structure in Make:

  1. Go to your Make scenario
  2. Click the “plus” icon to add another module
  3. Search for JSON and choose Create JSON
  4. Click Create a data structure and give it a name (e.g., order_item)
  5. Click Add item under Specification
  6. Enter sync_variant_id in the Name field
  7. Choose Number from the Type dropdown
  8. Click Add item below the sync_variant_id specification you just created
  9. Enter quantity in the Name field
  10. Choose Number from the Type dropdown
  11. Click Save

Then, fill the data structure:

  1. Type parseNumber( in the sync_variant_id field
  2. Choose variantSKU from the data from the module you created to process each item in an order, then add ;.) to the end of the field — the field should look like: parseNumber(10. variantSKU;.)
  3. Click into the quantity field and choose count
  4. Click Save

Note

You must convert Webflow SKUs to numbers matching Printful’s sync_variant_ids to comply with Printful’s API requirements.

Then, create a module that puts all the order items together:

  1. Click the “plus” icon to add another module
  2. Choose Flow control
  3. Choose Array aggregator
  4. Choose the previous module (i.e., the JSON module you just created) as the Source module
  5. Choose Custom from the Target structure dropdown
  6. Click Save

How to create and send a complete order to Printful

Create a complete order

Before your Make scenario can send orders to Printful, you’ll need to create a data structure representing a complete order:

  1. Go to your Make scenario
  2. Click the “plus” icon to add another module
  3. Search for JSON and choose Create JSON
  4. Click Add to create a new data structure and give it a name (e.g., printful_order)
  5. Click Add item under Specification
  6. Enter recipient in the Name field
  7. Choose Collection from the Type dropdown

Then, nested inside the recipient specification, click Add item and add the following specifications:

Specification Type Required?
address1 Text Yes
address2 Text No
city Text No
state_code Text Yes
country_code Text No
zip Text No
name Text No
email Text No
Click Add item inside the recipient collection specifications to capture additional order information (e.g., address, name, email, etc.) for the order recipient.

Once you’ve added specifications related to the order recipient, click Add item outside of the recipient specification and add additional order specifications:

  1. Enter external_id in the Name field
  2. Choose Text from the Type dropdown
  3. Click Add item
  4. Enter order_items in the Name field
  5. Choose Array from the Type dropdown
  6. Choose Collection from the Array Item Specification Type dropdown
  7. Click Save

Map Webflow data to Printful fields

Once you’ve saved your new data structure, map your Webflow data to Printful fields:

  1. Click into the address1 field and scroll down to Webhooks
  2. Click the “expand” arrow next to payload and again next to allAddresses[]
  3. Choose line1
  4. Repeat the above steps to match the following Webflow order data to Printful fields:
Field Order data
address2 line2
city city
state_code state
country_code country
zip postalCode
name addressee

Then:

  1. Click into the email field and click the “expand” arrow next to customerInfo
  2. Choose email from customerInfo
  3. Click into the external_id field and choose orderId from payload
  4. Add -webflow to the end of the external_id field — the field should look like: 1. payload: orderId-webflow
  5. Toggle Map to on next to the order_items field
  6. Click into the order_items field
  7. Choose Array[] from from the Array Aggregator module you created previously
  8. Click Save

Send an order to Printful

Finally, create a module that sends orders to Printful:

  1. Go to your Make scenario
  2. Click the “plus” icon to add another module
  3. Search for HTTP and choose Make an API Key Auth request
  4. Click Create a keychain in the Credentials section and give your keychain a name (e.g., “Printful API key”)
  5. Paste your Printful API key in the Key field in the following format: ```Bearer YOUR_API_KEY_HERE```
  6. Choose In the header from the API Key placement dropdown
  7. Enter Authorization in the API Key parameter name field
  8. Click Create
  9. Enter https://api.printful.com/orders in the URL field
  10. Choose POST from the Method dropdown
  11. Choose Raw from the Body type dropdown
  12. Choose JSON (application/json) from the Content type dropdown
  13. Click into the Request content field and choose the JSON string you set up in the previous steps
  14. Choose Yes from the Parse response options — this lets you see Printful’s response after you send the data
  15. Click Save

How to test the integration

To ensure your integration is working as expected, you can create a test order in your Webflow store, watch the scenario execute in Make, and verify the order appears in your Printful dashboard. You can review the API responses in Make by clicking the numbers that appear above each module in your scenario.

FAQ and troubleshooting

My orders aren’t appearing in Printful.

If your orders aren’t appearing in Printful, try the following troubleshooting steps:

  1. Double-check that your product SKUs exactly match Printful’s sync_variant_id values
  2. Confirm your API key is valid and active
  3. Make sure your API key is structured as ```Bearer YOUR_API_KEY_HERE```
  4. Check that all required fields contain data

I’m getting invalid variant errors.

If you’re experiencing invalid variant errors:

  1. Double-check that your product SKUs contain only numbers
  2. Verify all products exist in your Printful catalog

I’m getting address validation errors.

If you’re experiencing address validation errors, make sure you’re collecting two-letter state codes (e.g., CA, NY, etc.) and standard country codes (e.g., US, CA, etc.).