Integrate Shopify items into your Webflow website

Add products from Shopify to Webflow to create a customized store design.

By using a dynamic Shopify Purchase button, you are able to incorporate items from your Shopify account into your Webflow website. This allows you to establish a personalized online store without depending on a pre-designed Shopify template.

Prior to beginning: If you have not done so already, register for a Shopify account and have at least one product ready for sale.

In this tutorial, you will discover:

  1. The process of forming a Webflow Collection for your Shopify items.
  2. Incorporating your Shopify products into the Webflow CMS.
  3. Creating a dynamic embed.

Process of establishing a Webflow Collection for your Shopify products

Initially, you must construct a CMS Collection to house your Shopify products (e.g., “Shopify merchandise,” “Shopify listings,” etc.) along with their product parts and identifications (i.e., the unique markers for your Shopify products). Please note that you cannot label your Collection as “Products” since that name is earmarked for Webflow Ecommerce products.

To build a Collection with the essential Collection fields:

  1. Access the CMS panel
  2. Tap the “Initiate new Collection” icon
  3. Assign a title to your Collection (e.g., “Shopify goods,” “Shopify listings,” etc.)
  4. Select Append new field
  5. Opt for Plain text

Ewan Mak
Latest posts by Ewan Mak (see all)