Integrate Shopify with Webflow Using Pabbly Connect: A Step-by-Step Guide

Learn how to integrate Shopify with Webflow using Pabbly Connect. This detailed tutorial guides you through the automation process seamlessly. Discover how to seamlessly connect your essential tools through accessible instructions that make powerful automation available to professionals at every skill level.

Watch Step By Step Video Tutorial Below

1. Setting Up Pabbly Connect for Shopify and Webflow Integration

To start the integration process between Shopify and Webflow, you must first access Pabbly Connect. Go to Pabbly.com/connect and sign up for a free account. This platform will allow you to automate the process of adding Shopify products to your Webflow site.

Once logged in, you will find the dashboard where you can create a new workflow. To do this, click on the ‘Create Workflow’ button. Name your workflow something like ‘Shopify to Webflow Automation’ and click on the ‘Create’ button to proceed. This is where the automation magic begins.

2. Creating a Trigger in Pabbly Connect for Shopify

After setting up your workflow in Pabbly Connect, the next step is to create a trigger. Select Shopify as your trigger application and choose the event ‘New Product’. This event will activate the workflow every time a new product is created in your Shopify store.

• Choose Shopify as the trigger app.
• Select the trigger event as New Product.
• Copy the webhook URL provided by Pabbly Connect.

Next, head over to your Shopify dashboard. Navigate to the settings and find the notifications section. Here, you will create a new webhook. Select the event for product creation, paste the copied webhook URL, and save your changes. This will link Shopify to Pabbly Connect and allow it to send product data whenever a new product is added.

3. Capturing Product Data from Shopify

Once you have set up the webhook in Shopify, return to Pabbly Connect. You will see that it is now waiting for a response from Shopify. To test this, create a new product in your Shopify store. Fill in the necessary details like title, description, and price, and then save the product.

After saving, go back to Pabbly Connect. You should see the product details captured in the response section. This includes the product ID, title, price, and other relevant information. This confirms that the connection between Shopify and Pabbly Connect is functioning correctly.

4. Setting Up Webflow Integration in Pabbly Connect

Now that you have captured the product data, the next step is to set up the action that will send this data to Webflow. In Pabbly Connect, search for Webflow as your action app and select the event ‘Create Live Item’.

• Connect your Webflow account by entering the API token.
• Select the site where you want to create the item.
• Map the product details from Shopify to the corresponding fields in Webflow.

For instance, map the product title to the name field in Webflow, the price to the selling price, and so on. Once you have completed mapping the fields, click on ‘Save and Send Test Request’. This will create a new item in your Webflow collection based on the Shopify product you just created.

5. Testing and Verifying the Integration

After sending the test request, check your Webflow site to verify that the new item has been created. Refresh your Webflow dashboard and navigate to the collection where you added the product. You should see the new product listed with all the details you provided in Shopify.

This integration allows you to automate the addition of new products from Shopify to your Webflow site seamlessly. With Pabbly Connect, you only need to set it up once, and it will continue to work automatically in the future.

Conclusion

This tutorial has guided you through the process of integrating Shopify with Webflow using Pabbly Connect. By following these steps, you can automate the addition of new products to your Webflow site, saving time and effort while ensuring your site is always up to date with your Shopify inventory.