Product Wrapper

Before we dive into how to correctly configure Smootify app components within your Webflow project, this video will analyze the first and most important element without which the connection between Webflow and Shopify would not be possible: the Product Wrapper.

The Product Wrapper is the first element you'll find in the components section of the official Smootify app in your Webflow project.Essentially, it's a special div that you'll use to display your Shopify products.

The Product Wrapper is crucial for ensuring that your product displays correctly and functions seamlessly with Shopify's features, such as dynamic pricing, inventory updates, and add-to-cart functionality. This element is fundamental and mandatory. Every dynamic part of your product must be inside this Custom element, otherwise it will be just static.

To use the Product Wrapper Element correctly within a CMS collection, you need to remember two steps:

The Product Wrapper must always be placed inside the CMS Item of the collection in Webflow.The Product Wrapper must always be linked to the Shopify ID element present in the "Products" CMS collection.Once these fundamental steps have been completed, which must be repeated whenever you want to display Shopify products, we can start building the structure of our products in Webflow.