How To Integrate Shopify Into Webflow In 5 Simple Steps

Shopify and Webflow are both very powerful tools to operate a business’s online presence. When it comes to building websites, it doesn’t get much easier than when you use Webflow. As one of the leading platforms for ecommerce businesses, using Shopify to sell products is a no-brainer. With that being said, Shopify isn’t a perfect solution for every business that sells online. And for businesses who need more beyond what Shopify can offer, integrating their products from Shopify into a Webflow site is a fantastic solution to let brands put their best foot forward. So, let’s talk about why you may want to integrate Shopify into their Webflow site and all the steps you need to take to successfully integrate your accounts. 

Why Integrate Shopify Into Webflow?

When ecommerce isn’t front and center in your business model, integrating Shopify into Webflow allows you to create a better website experience for your users

While Webflow does support ecommerce functionality on its platform, Shopify and its tools may remain the preference for some when it comes to selling online. Shopify’s Customize Theme CMS experience is limiting in overall flexibility and creative freedom when you compare it to Webflow. For businesses that want the best of both worlds, integrating Shopify products into Webflow gives you the ability to create a completely customized website while utilizing the ecommerce features that make Shopify great. 

Break free from Shopify themes

Shopify themes are restrictive and tend to look similar, no matter which theme you choose. Achieving your own look on your Shopify site is difficult unless you have a big budget and a lot of time to spend on development to create a custom Shopify theme. Even if you outsource custom development, you have to make sure you are working with your development team to update your theme to avoid any security issues constantly. Plus, if the custom development isn’t done right, it can cause your site’s speed to completely slow down. 

Webflow, on the other hand, features drag-and-drop tools that make it ridiculously easy to build and maintain sites. As those tools are used and the site is built, Webflow automatically generates clean code, which in turn leads to a better, faster website experience. While custom development is supported, there isn’t as much of a need for it when you use Webflow. So, when you integrate Shopify into Webflow, you can take control over the appearance of your website while still leaning on Shopify for its backend functionality. 

Customize the user experience

Beyond the limitations of themes, Shopify also makes it challenging to create and customize the user experience of a website. If ecommerce isn’t the bread and butter of your business, using Shopify exclusively to create an online presence is rarely ever the best choice. When you integrate Shopify and Webflow, you will have much more flexibility when creating your website while still ensuring your products on Shopify can be found by your users. 

5 Steps To Integrate Shopify Into Webflow

Start selling your Shopify products on Webflow in 5 easy steps

Integrating Shopify to Webflow is fairly simple and straightforward. Webflow also has a great tutorial in Webflow University as well. 

Once you’ve completed the initial setup, managing and adding more products is even easier. Before you get started with the integration process, you will need to make sure you have both a Shopify account and a Webflow account created. After adding your products to Shopify, follow these steps to integrate your accounts.

1. Set up Webflow product collection

To get started integrating your Shopify products into Webflow, you first need to create a Collection in Webflow to hold all of your product information. Collections are a database to store content that can then be referenced dynamically throughout your site. 

Here’s what you’ll need to navigate to the CMS panel in Webflow’s Designer. At the top right side of the panel, you should see an icon, which will allow you to create a new collection. Click on that icon. 

Webflow has templates for a plethora of collection types, including blog posts, menu items, and events. If you were to use a template, the settings and fields within the collection are pre-filled but still customizable. Since Webflow doesn’t have a product template, you will have to build yours from scratch to include all the necessary fields. You should start with the following, but know you can add other fields if needed:

• Price as a number field
• Brief description as a rich text field
• Long description as a rich text field
• Thumbnail image as an image field
• Product ID as a plain text field
• Product component as a pain text field

Keep in mind that your Product ID and your Product component act as unique identifiers to pull the product information from Shopify to Webflow correctly. This will be important later. 

2. Add your Shopify products to Webflow

Now that you have your product collection set up in Webflow, you can now start adding your Shopify products. In Shopify, you will need to find and pull the Product Handle and Product Component for each of your items in Shopify. 

To do this, you need to generate an embed code from Shopify so that you can pull the information for the product name, Product ID, and Product Handle. All of these are unique for each product. Here are the steps you’ll need to follow:

1. Navigate to Shopify’s dashboard
2. In the left-hand menu, click the “Buy Button”
3. In the pop-up next to the left-hand menu that appears after clicking that button, select the “Create a Buy Button” and click the product you would like to integrate
4. Select the “Generate code” button at the top right side of the page 

Now that you have your embed code, find the Name, Product ID, and Product Handle in the code. Copy and paste the code specific to the field into the Collection you made in the first step. 

To find the Product Component code, look for the numbers and letters following “product-component” in the embed code. To find the Product ID, look for the numbers and letters following the brackets after “id;” on line 34. 

Repeat these steps for all other products on your Shopify storefront. 

3. Set up embed components

To ensure that your products are properly embedded, you need to set up a dynamic embed and a collections page or collection list to hold your embed. Otherwise, it won’t pull the information you need from Shopify. 

Add your embed component to a collection list or page. Drop the embed component where you would want your Buy CTA button to appear. 

4. Retrieve your Shopify embed code

With all of your embed components properly set up, you will not have to pull embed codes from Shopify for all of your products. This can be done by repeating the same steps you followed in step #2 of this process, but stop following the steps when it comes time to pull lines of code for specific fields. 

Now, here, you have two options for which type of embed you would like to use. The first embed option pulls fields like the image, the price, and the name of the product from Shopify. The other embed option will only create a Buy button. The latter of the two options lets you further customize your page beyond. However, if you’re looking for a super simple integration, the former would be a good option to follow. 

5. Update + Replace Unique IDs

This last step of the process is crucial to complete, otherwise, your efforts thus far will prove fruitless. On each “Buy” button, you now need to replace the code for Product Component and Product ID in the dynamic embed with the collection fields pulled earlier. 

Highlight the Product Component and the Product ID values. Keep in mind that the product component will appear twice, so you will need to update it twice. In the HTML Embed Code Editor, select the “+Add Field” button. Then, you can replace the values with the corresponding code you pulled earlier. Repeat this process for all of your products. 

After you have completed the initial setup, adding additional products is a breeze. Just simply create a new item in the Products Collection you’ve already created. Pull the unique identifiers from Shopify for each product. Input the unique identifiers into the respective fields, and voila! You’ve successfully added another product to the collection. 

Alternative Methods to Integrating Shopify to Webflow: Udesly

A Shopify to Webflow integration solution that works best for businesses who rely on Shopify

Udesly is a nice alternative if you want to break away from Shopify themes but want to primarily manage the site from Shopify. This app allows you to design in Webflow and convert your project to a multitude of other platforms. 

To get started using Udesly, here’s what you need to do:

1. Start with a Webflow template or create your own design. This allows you to completely customize the look and feel of your site. Design not your strong suit? Udesly has lots of templates to use. 
2. Once you are satisfied with your design, install the Udesly Chrome extension and launch it. 
3. When you’re ready, go to Webflow and export the HTML code from the design. 
4. Upload your HTML code to Udesly and convert the code into a template. 
5. After converting your template, upload it to the Shopify panel where you can manage everything from the Shopify app, eliminating the need to use Webflow to make changes. 

Now, as we said above, this is a nice solution for people who want to manage their site within Shopify but want to be able to customize more of their site. This type of solution is best for a business that does largely focus on ecommerce rather than ecommerce as a small part of the larger picture. Still, this method of integrating Shopify into Webflow allows you to use Webflow to design a great ecommerce theme without custom developing the entire theme. 

‍

Integrating Shopify into Webflow is a great way to maintain creative control over your site while using Shopify’s tools to manage the ecommerce portion of your business. By following these 5 steps, you can start selling your products on Webflow in no time. Need help getting your products onto Webflow? The Responsival team has years of experience integrating Shopify and Webflow and can help your team get everything properly set up. Schedule a call with our team today to see how we can help you with your Webflow website.