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.
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.
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.
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.
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.
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:
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.
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:
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.
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.
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.
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.
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:
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.
Say goodbye to Universal Analytics and hello to Google Analytics 4
Integrating Webflow and Airtable with Whalesync perfectly marries your website and internal databases
Everything you need to know about UX audits — from how to prepare, what to expect, and Webflow’s tools to use to keep your website in check
Webflow continues to improve + innovate when it comes to no-code site integrations
Wondering whether or not your site is in need of a redesign? Read through our list of top reasons to overhaul your website