Custom Element
The bridge between Shopify and Webflow
If you're integrating Shopify into Webflow using Smootify, understanding the Smootify Product Custom Element is absolutely essential. It's not just a minor detail; it's the core mechanism that allows Smootify to function correctly and display your Shopify product data.
What is the Smootify Product Custom Element?
The Smootify Product Custom Element is a specific Custom Element that Smootify requires to properly identify and manage product data within your Webflow pages. It acts as a container and a signal to Smootify, indicating where product-related information should be injected and processed.
Why is it so important?
Think of the Smootify Product Custom Element as the communication bridge between your Shopify store and your Webflow page. Without it, Smootify has no way of knowing:
- Where to insert product information.
- Where to inject dynamic functionalities.
- Which Shopify product is being displayed.
Essentially, it's the anchor point that Smootify uses to inject dynamic content, handle product variants, manage "add to cart" functionality, and more.
In simpler terms:
- Without the correct Product Custom Element, your product pages will likely be broken or display incorrect data and be completely static
Mastering the Product Custom Element is crucial because it:
- Enables dynamic Shopify data display: Product titles, images, descriptions, and prices are all populated through this element.
- Powers product interactions: Variant selection, add-to-cart functionality, and other interactive elements rely on it.
- Guarantees accurate data mapping: It ensures Smootify correctly matches Shopify data to your Webflow design.
Therefore:
Before you delve into any other Smootify features, prioritize understanding and correctly implementing the Product Custom Element. It's the foundation upon which your entire Shopify and Webflow integration is built.
How to use it?
Typically, you'll add the Smootify Product Custom Element as a Webflow Custom Element with the specific tag smootify-product and a specific custom attribute data-id that Smootify recognizes in order to properly connect the Webflow Element with the Shopify product.
The attribute you will use can vary based on the products you need to show. In general you will use the Product inside Webflow Collection Lists and in the Product Page Template by connecting the attribute data-id to the Webflow CMS field Shopify ID
In next documents you will find detailed infos on how to create product listings and how to design your product page!
Product Custom Element
Copy Element