Webflow and Shopify integration / Dynamic Embed with Webflow CMS (part 2)

Shopify dynamic embed

We've already shown you the basic version of the Shopify integration into the Webflow platform (available at this link), and now it's time for the more advanced version, "dynamic embed" with the Shopify product ID and Webflow's native content management system (CMS).

Webflow and Shopify dynamic embed integration

Why should you implement dynamic embed?

Integrating Shopify Buy Buttons with Webflow CMS is beneficial because it combines Shopify's eCommerce capabilities with Webflow's content management system. This allows for dynamic product updates, ensuring your site stays current without manual updates. It provides a cohesive shopping experience, maintaining consistency across both platforms. Additionally, it leverages Webflow's design features, enhancing customer engagement and conversion rates.

Integration steps by step

This integration contains three steps:

1. Creating a Webflow Collection structure (CMS) for your Shopify products
2. Adding your Shopify products to the Webflow Collection (CMS)
3. Dynamic Shopify product embed setup

How to create a Webflow Collection structure for your Shopify products?

Open the CMS Panel and create a new collection - this will be our Collection for our Shopify products.

Now we should give our Collection a name, the name should be correlated to Shopify name, especially if we work on a big project, for example we named it "Shopify Products". We can also choose a custom Collection URL(Uniform Resource Locator) used as a part of a domain.

How do we build up a CMS collection? With the CMS setup, we can provide all of the relevant information about our Shopify product. We will add additional fields to indicate fundamental information about our Shopify products. It will have:

• Plain text element - named "Product Component"
• Plain text element - named "Product ID"
• Plain text element - named "Price" (Basic information)
• Image - It will represent an image of a Shopify product

Now just save the collection.

How to add your Shopify products to the Webflow CMS structure?

To integrate your Shopify products into the Webflow CMS, you'll need the product components and IDs from Shopify. These unique identifiers ensure Webflow correctly links to each product within your Collection items. You can obtain the product components and IDs from the Shopify embed code.

What is the Shopify product component?

A product component in the context of Shopify and Webflow typically refers to the various elements or details that make up a product. This can include:

• Product Name: The title or name of the product.
• Product Description: A detailed description of the product.
• Product Price: The cost of the product.
• Product Images: Visual representations or photographs of the product.
• Product Variants: Different versions of the product, such as size or color options.
• Product Inventory: Information about the stock levels of the product.
• Product SKU: Stock Keeping Unit, a unique identifier used to track the product in inventory.

In our example, the product component will include the product name, product price, and product image.

What is Shopify product ID?

The product ID is a unique identifier assigned to each product in Shopify. It is used to differentiate each product within the system and is essential for referencing the product in integrations, such as with Webflow CMS. This ID ensures that the correct product details are pulled and displayed in Webflow.

First we need the Buy button embed created

Here we'll summarize but full instructions on this link.

1. Go to Shopify App Store.
2. Add app
3. Select the sales channel and create Shopify Buy Button.
4. Choose your product and design your Buy Button embed based on your choices and needs.
5. Go next and copy code.

The next step requires a code editor. It could be Visual Studio Code (VSC), Sublime Text, or another code editor.

Sublime Text will be used in this example. Let’s continue with the guide.

Paste the code you previously copied into editor of your choice. The first 35 lines of code contain both Product Component and Product ID. If you can't find it, use "CTRL + F" in the editor and search for "product-component" or "id".

Now go back to Webflow CMS editor and add a new "Shopify Product". Paste the copied Product component string and Product ID string into the fields we made specifically for this purpose.

We move on to the last part, the implementation of the dynamic embed:

Go to Webflow editor > Add element > Advanced > Code Embed - Create an embed element on the canvas to display the Buy button on your Webflow site.

Open Code Embed element and paste the Shopify embed code - highlight the string of numbers or letters after the "product-component-" Highlight it and click "Add field" - Choose "Product Component" field you created in the CMS editor before.

Repeat the process with "Product ID".

Click on "Save and exit".

Publish and your Shopify product will be successfully embedded into your Webflow site.

Note: Code Embed will appear only on a published website.

What we achieved with this Dynamic embed?

Using dynamic embeds, you can easily add new products by locating the "Product Component" and "Product ID" from Shopify and entering them into the Webflow Collection Management System (CMS). This method allows you to manage hundreds of products over time without spending much time on implementation.

Webflow Collections simplify visual product management on your site. The Webflow CMS interface is straightforward, making it easy to update and organize content. The system's automation allows quick adjustments to your site structure.

Additionally, dynamic embeds ensure that product information is consistently up-to-date across your website. Changes made in Shopify automatically reflect in Webflow, reducing manual updates and minimizing errors.

This integration between Shopify and Webflow CMS provides an efficient solution for managing a large product catalog. It allows for streamlined workflows and reduced operational overhead. This approach also enhances the scalability of your e-commerce platform, supporting business growth.

Conclusion

The integration of Shopify with Webflow CMS through dynamic embeds represents a powerful and efficient approach to managing an extensive product catalog. By leveraging Shopify's huge e-commerce capabilities and Webflow's flexible content management system, you can ensure that your product listings are always current and visually appealing.

Implementing dynamic embeds involves a few key steps: creating a structured Webflow Collection for your Shopify products, adding the necessary product details and IDs from Shopify, and using Webflow's dynamic embed functionality to display these products on your website. This method streamlines the process of adding and updating products, saving significant time and effort compared to manual updates.

The use of dynamic embeds allows for a seamless and consistent shopping experience across your site. As product information is updated in Shopify, these changes are automatically reflected in Webflow, eliminating the risk of outdated or inconsistent data. This ensures that customers always see the most accurate product information, enhancing their shopping experience and potentially increasing conversion rates.

Moreover, the automation provided by Webflow's CMS allows for easy adjustments to your site structure, ensuring that your website can evolve alongside your business needs. This flexibility is crucial for scaling your e-commerce operations, as it supports the addition of new products and categories without requiring extensive redesigns or manual updates.

Overall, integrating Shopify with Webflow CMS through dynamic embeds not only enhances the efficiency of managing a large product catalog but also supports the scalability and growth of your e-commerce platform. This integration provides a streamlined workflow, reduces operational overhead, and enhances the overall user experience on your website. By adopting this approach, you can focus more on strategic growth initiatives while ensuring that your product listings are always up-to-date and engaging for your customers.

‍

‍

‍

‍