Product Custom Element
Product integration's heart. Where the magic happens.
Copy Element
Getting Started
- 1Install Shopify App & connect WebflowIf you didn't already connected your store,
install the Smootify App on your Shopify.
You will be automatically prompted to
select your Webflow project afterwards - 2Copy ComponentSearch our Component Library to
find the Components you need and
copy it with 1 click - 3Paste into projectOnce you copied a component,
paste it into your Webflow project
All components that have a tag in the top left must be inserted into the context indicated in the tag.
Product Card
The product card, designed for use across various pages of your store, includes essential details such as the product cover, name, price, and an "Add to Cart" button.
Copy Element
Product Price
The price of your product.
Copy Element
Product
Product Title
The name of your product.
Copy Element
Product
Product Description
The description of your product.
Copy Element
Product
Product File Upload
Allow product customization with personal file upload.
Copy Element
Product
Media Gallery
Gallery created with a combination of a Webflow Slider and Media thumbnails.
Copy Element
Product
Media Lightboxes
List of lightboxes elements dynamically associated with your Shopify product media files.
Copy Element
Product
Media Slider
Webflow Slider to showcase all media files associated with your Shopify product.
Copy Element
Product
Product Page
This is an example of a Product Page that includes all the essential elements of a product, such as an image, title, description, price, add-to-cart button, and more.
Copy Element
Video
Dynamic Video Background.
Copy Element
Product
External Video
Dynamic Video Embed.
Copy Element
Product
Images Slider
Webflow Slider to showcase all product images associated with your Shopify product.
Copy Element
Product
Images Lightboxes
List of lightboxes elements dynamically associated with your Shopify product images.
Copy Element
Product
Images Gallery
Gallery created with a combination of a Webflow Slider and Images thumbnails.
Copy Element
Product
Shop Pay
Shop Pay checkout gateway direct buy-now button.
Copy Element
Product
3D Models
Dynamic 3D model viewers.
Copy Element
Product
Stock Quantity
The number of units you have available for a particular product or variant.
Copy Element
Product
Discount Percentage
If your variant has a compare-at price you can show up the discount percentage.
Copy Element
Product
Breadcrumbs
They provide a clear trail of links, showing the user the path from the homepage to their current page.
Copy Element
Add to cart
Create the perfect purchase flow, Variant selectors, swatches and quantity input included.
Copy Element
Product
Buy Button
Button that allows you to add the product to the cart.
Copy Element
Add to Cart
Buy Now Button
Button that allows you to directly checkout the selected variant.
Copy Element
Add to Cart
Quantity Input
Allow your customers to select how many items to purchase.
Copy Element
Add to Cart
Variant Select
A variant selector displayed as a select.
Copy Element
Add to Cart
Variant Dropdown
A variant selector displayed as a dropdown menu.
Copy Element
Add to Cart
Variant Swatches
A variant selector displayed as swatches button.
Copy Element
Add to Cart
Subscription Swatches
Allows switching the purchase option from single to subscription.
Copy Element
Add to Cart
Wishlist Toggle
This button allows users to add a selected product to their wishlist.
Copy Element
Wishlist Page
The user's selected list of preferred products.
Copy Element
Last Viewed
The list of products viewed by the user.
Copy Element
Product
Metafields Listing
Related products manually specified via metafields.
Copy Element
Complementary Products Listing
Recommended complementary products for display on the individual product page.
Copy Element
Related Product Listing
Recommended Related products for display on the individual product page.
Copy Element
Variant Custom Element
The list of variants showed as products.
Copy Element
Best Sellers Listing
List of the best-selling products in the store.
Copy Element
Latest Created Listing
List of the latest created products in the store.
Copy Element
Specific Collection Listing
List of a specific collection of your store.
Copy Element
Custom Query Listing
List of products manually selected through a custom query in Shopify.
Copy Element
Gift Card Inputs
Inputs specialized for Gift Cards.
Copy Element
Add to Cart
Magic Box
Give your customers the freedom to create their own personalized product sets.
Copy Element
Name your price
Allow your clients to choose the amount to pay.
Copy Element
Add to Cart
Add-on Checkbox
Allows to toggle the add-on by using a Webflow checkbox element, use this if you don't need to have variable add-ons.
Copy Element
Add to Cart
Add-on Dropdown
Allows to choose a variable add-on by using a Webflow dropdown element.
Copy Element
Add to Cart
Add-on Select
Allows to choose a variable add-on by using a Webflow select element.
Copy Element
Add to Cart
Add-on Swatches
Allows to choose a variable add-on by using button swatches.
Copy Element
Add to Cart
Product Configurator Input
Text input that dynamically alters product price.
Copy Element
Add to Cart
Product Configurator Checkbox
Checkbox input that dynamically alters product price.
Copy Element
Add to Cart
Product Configurator Dimension
Dimension input that dynamically alters product price.
Copy Element
Add to Cart
Product Configurator Select
Select that dynamically alters product price.
Copy Element
Add to Cart
Product Configurator Dropdown
Dropdown Select that dynamically alters product price.
Copy Element
Add to Cart
Product Configurator Radio
Radio Select that dynamically alters product price.
Copy Element
Add to Cart
Product Configurator File Input
File Uploader that dynamically alters product price.
Copy Element
Add to Cart
Dynamic Property Text
Show dynamic properties as text input.
Copy Element
Add to Cart
Dynamic Property Number
Show dynamic properties as Number input.
Copy Element
Add to Cart
Dynamic Property Select
Show dynamic properties as select input.
Copy Element
Add to Cart
Dynamic Property Dropdown
Show dynamic properties as dropdown input.
Copy Element
Add to Cart
Dynamic Property Email
Show dynamic properties as email input.
Copy Element
Add to Cart
Dynamic Property Radio
Show dynamic properties as radio input.
Copy Element
Add to Cart
Dynamic Property Checkbox
Show dynamic properties as checkbox input.
Copy Element
Add to Cart
Dynamic Property Url
Show dynamic properties as URL input.
Copy Element
Add to Cart
Dynamic Property Swatches
Show dynamic properties as swatches input.
Copy Element
Add to Cart
Cart Page
The cart page lets customers review, adjust, and buy their selected items.
Copy Element
Mini Cart
The Mini Cart is a compact shopping cart interface that provides customers with a quick and seamless way to view and manage the items in their cart.
Copy Element
Mini Cart (Modal)
The Mini Cart is a compact shopping cart interface that provides customers with a quick and seamless way to view and manage the items in their cart.
Copy Element
Mini Cart (Interactions)
The Mini Cart is a compact shopping cart interface that provides customers with a quick and seamless way to view and manage the items in their cart.
Copy Element
Cart Upsell
A reactive product alert system that will recommend you products based on the latest product added to the cart.
Copy Element
Cart
Free Shipping Progress Bar
Add a dynamic progress bar inside your cart.
Copy Element
Cart
Cart File Uploader
Allow file upload for the cart attributes.
Copy Element
Cart
Urgent Cart Countdown
Add a countdown inside your store’s cart to encourage users to complete their purchase more quickly.
Copy Element
Cart
Draft Orders
With this Add-on, you can enable your customers to submit a quote request for selected products.
Copy Element
Cart Notes
Add a text area to allow users to submit notes related to their orders.
Copy Element
Cart
Gift Card Input
Add a Gift Card input field to the cart, enabling users to enter their gift card code and apply it to their purchase.
Copy Element
Cart
Coupon Code Input
Add a Coupon Code input field to the cart, enabling users to enter their coupon code and apply it to their purchase.
Copy Element
Cart
Order Listing
This is the list of orders placed up by the current logged in customer, the element will be automatically duplicated once for each order placed by your customer.
Copy Element
Order Page
This is a pre-designed page for a single order.
Copy Element
Subscription Listing
This is the list of subscriptions attached to the current logged in customer.
Copy Element
Subscription Page
This is a pre-made page of the single subscription.
Copy Element
Passwordless Login
With passwordless login, customers can access their customer portal without needing to remember their password.
Copy Element
Activate Subscription
This form allow logged in user to activate their subscritpion.
Copy Element
Subscription Page
Cancel Subscription
This form allow logged in user to cancel their subscritpion.
Copy Element
Subscription Page
Pause Subscription
This form allow logged in user to pause their subscritpion.
Copy Element
Subscription Page
Newsletter Subscription
Connect Webflow native forms to Shopify customer lists and engage your users.
Copy Element
Customer Metafield Editor
Metafield editor form.
Copy Element
Logout Form
Allow users to logout.
Copy Element
Subscribe Form
This form enables users to subscribe to the Shopify customer list.
Copy Element
Unsubscribe Form
This form enables users to usubscribe to the Shopify customer list.
Copy Element
Addresses
This element will be duplicated once for each address of your customer and allows to edit and delete addresses.
Copy Element
New Address
This element allows users to create a new address in their account.
Copy Element
Update User
This element allows users to update First Name and Last Name.
Copy Element
First Name
Logged in customer first name.
Copy Element
Last Name
Logged in customer last name.
Copy Element
Logged in customer email.
Copy Element
Phone
Logged in customer phone.
Copy Element
Default Address
User Default Address.
Copy Element
Login Form
Login Form for Legacy Customer Accounts
Copy Element
Legacy
Recover Form
Recover Form for Legacy Customer Accounts.
Copy Element
Legacy
Register Form
Register Form for Legacy Customer Accounts.
Copy Element
Legacy
Activate Form
Form to activate the user account.
Copy Element
Legacy
Reset Form
Form to reset the user account.
Copy Element
Legacy
Predictive Search
It helps your customers refine their search without being redirected to a search results page, and quickly explore your store by seeing top results for suggested search terms, products, collections, and more.
Copy Element
Search & Discovery
Example of Search & Discovery filters.
Copy Element
Search & Discovery Checkbox
This checkbox input is designed for integration into the Search & Discovery add-on.
Copy Element
Search & Discovery
Search & Discovery Dropdown
This dropdown input is designed for integration into the Search & Discovery add-on.
Copy Element
Search & Discovery
Search & Discovery Select
This select input is designed for integration into the Search & Discovery add-on.
Copy Element
Search & Discovery
Search & Discovery Swatches
This swatches input is designed for integration into the Search & Discovery add-on.
Copy Element
Search & Discovery
Search & Discovery Radio
This radio input is designed for integration into the Search & Discovery add-on.
Copy Element
Search & Discovery
Search & Discovery Search
This search box input is designed for integration into the Search & Discovery add-on.
Copy Element
Search & Discovery
Search & Discovery Filter Price
This dynamic price slider is designed for integration into the Search & Discovery add-on.
Copy Element
Search & Discovery
Search & Discovery Sort Select
This is the select input for sorting products.
Copy Element
Search & Discovery
Search & Discovery Sort Dropdown
This is the dropdown input for sorting products.
Copy Element
Search & Discovery
Search & Discovery Sort Radio
This is the radio input for sorting products.
Copy Element
Search & Discovery
Search & Discovery Active Filter
Add this element to display the active filters selected by the user.
Copy Element
Search & Discovery
Search & Discovery Pagination Buttons
Add this component to show the pagination buttons
Copy Element
Search & Discovery
Search & Discovery Load More
Add a "Load More" button to display additional products.
Copy Element
Search & Discovery
Search & Discovery Load More in view
Add the ability to load more products simply by scrolling down the page, without clicking any buttons.
Copy Element
Search & Discovery
Search Page
Unlike predictive search, the search page displays the complete list of results matching the search query.
Copy Element
Markets Switcher
This component enables seamless switching between different markets in your Shopify store.
Copy Element
Preferred Store
This component allows you to preselect a physical store from the available locations.
Copy Element
Store Availability
Designed to assist merchants with multiple physical store locations in displaying where a specific product is available.
Copy Element
Store Locator
Show all your physical stores, dealers, distributors, and more on a single page on your Shopify website.
Copy Element
Cookie Consent
The Preferences button allows users to set Shopify cookie preferences. You can style the button however you like, with complete creative.
Copy Element
Metaobject Creator
Metaobject creator form
Copy Element
Metaobject
Metaobject loaded from Shopify
Copy Element
Metaobject Listing
List of Metaobjects fetched from Shopify.
Copy Element
Metaobject File Uploader
Allows users to upload and manage files within a metaobject system.
Copy Element
Metaobjects Creator
Judge me Star Ratings
Judge me Star Rating widget.
Copy Element
Judge me Reviews
Judge me Reviews widget.
Copy Element
Klaviyo Back in Stock notification
Klaviyo Back in Stock notification widget.
Copy Element
Product
Metafield File Input
Allow file upload for the metafields editor.
Copy Element
Mini Cart Details
The Mini Cart is a compact shopping cart interface that provides customers with a quick and seamless way to view and manage the items in their cart.
Copy Element
Product Images Grid
Grid of images dynamically associated with your Shopify product images.
Copy Element
Product
Variant Listing
List of the product variants.
Copy Element
Discounted Amount
If your variant has a compare-at price you can show up the discounted amount.
Copy Element
Product