Skip to content
Smootify Logo
Design your products

Product Wrapper

Smootify leverages custom DOM elements. These elements are used to define dynamic part of your website. Let’s introduce the most important one.

Product Wrapper

The whole magic of Smootify is done by this DOM element. The product wrapper basically defines the context of your design and connects it to a Shopify product. Every elements need that is connected to a product must be inside this DOM element.

product wrapper

This element defines the context and loads the data of a specific product that is selected using a Custom Attribute. Which name is data-id and the value should be connected to the Shopify ID of your CMS product collection.

custom attribute

You have to add this element inside Collection Lists to create lists of products, and you have to use this element in the Product page template. Do never forget to add this element and connect the data-id attribute, otherwise all dynamic functions will not work!

Product Wrapper

Copy Webflow element

Note on DOM elements

Webflow doesn’t apply classes to custom DOM Elements, so do not style them directly, always add a div (or any other element you like) inside the DOM Element.