# Smootify

> Smootify is a Shopify app that turns a site designed in Webflow into a Shopify store. You design every page in Webflow; Shopify keeps the products, stock, checkout, payments and orders; Smootify connects the two with elements and attributes placed on native Webflow elements. Smootify 2.0 is in public beta.

- Plans: Free, to build and publish on a webflow.io address; Lite, $19 a month, to go live on your own domain; Server, $49 a month, which adds the 8 add-ons that run on Smootify’s server and the automatic CMS sync. Billed yearly: $15 and $39 a month.
- Billing: Smootify is billed on the store’s Shopify invoice, like any Shopify app: one app on the bill instead of ten. Shopify and Webflow bill their own plans as usual.
- Requirements: Shopify Basic, Grow, Advanced or Plus (not Starter, which cannot use Shopify’s Headless channel) and a Webflow site plan with the CMS. No Webflow Ecommerce plan is needed.
- Add-ons: 17, included in the plan at no extra cost. 9 work on every plan, Free included (magic box, magic add-ons, cart upsell, dynamic properties, predictive search, search and discovery, store locator, last viewed, wishlist); 8 need the Server plan (booking, product configurator, name your price, draft orders, metaobject creator, customer metafield editor, newsletter subscription, product file upload).
- Free Shopify features stay free: Search and Discovery filters, predictive search and complementary products come with every plan and are never sold as paid add-ons.
- Three apps: the Smootify Shopify app (connects the store, carries the plan), the Smootify Webflow app (171 components, every attribute and condition, inside the Webflow Designer) and Smootify Studio, the desktop app for Mac and Windows, in beta (Shopify to Webflow CMS sync, CMS setup, Claude with Smootify’s skills for custom scripts).
- For AI agents: the Figma wireframe kit, the markup contract, 5 skills (github.com/smootify/skills) and the Smootify MCP, in beta, let an agent such as Claude, Cursor or Codex write the Webflow build; a person reviews it, connects Shopify and publishes.
- Shopify Plus is not needed: calculated prices, prices the customer chooses and B2B quotes go through Shopify draft orders on Basic, Grow and Advanced, and bundles merged at checkout work on every plan. Changing a price inside the regular checkout is still a Plus feature.
- Limits: the checkout belongs to Shopify and is not designed in Webflow; a build-your-own box (Magic box) cannot be a subscription, because Shopify’s Cart Transform API does not merge lines that have a selling plan.
- 2.0 is in public beta: sites on Smootify 1.x keep working, and moving is documented step by step (https://www.smootify.io/docs/start/migrate).
- Smootify has more than 7,000 installs on Webflow and was a Webflow Awards 2025 finalist as Tech Partner of the Year. It is made by Eclipse, in Italy.

Every docs, guide, tip and glossary page is also served as markdown at its URL + .md; the docs are also in one file at https://www.smootify.io/llms-full.txt, which starts with these facts, the plans, the add-ons and the FAQ. Blog posts dated before 2026-10-01 describe Smootify 1.x.

## Start

- [Figma to store](https://www.smootify.io/figma-to-store): how an AI agent builds a Smootify store from the Figma kit, in three steps; you review and publish
- [Why Smootify](https://www.smootify.io/why-smootify): Webflow for the design, Shopify for the store, and the two limits Smootify has
- [Pricing](https://www.smootify.io/pricing): Free to build, Lite $19/month, Server $49/month ($15 and $39 billed yearly), billed on the store’s Shopify invoice
- [Which plan do I need](https://www.smootify.io/pricing/plan-picker): a few questions that pick Free, Lite or Server
- [FAQ](https://www.smootify.io/faq): what Smootify is, how to sell with Shopify on Webflow, cost, billing, Shopify Plus and custom prices, subscriptions and boxes, quotes, bookings, CMS sync, markets
- [Templates](https://www.smootify.io/templates): 3 demo stores built on 2.0, the starter project and the v1 templates
- [Starter project](https://www.smootify.io/templates/starter): a Webflow project with every Smootify page and component already wired
- [Figma files](https://www.smootify.io/figma): the wireframe kit and the Figma file of each demo store
- [Figma wireframe kit](https://www.smootify.io/figma/ui-kit): every page and component a store needs, named to match the markup contract, for an agent or a designer
- [Integrations](https://www.smootify.io/integrations): Shopify apps checked with Smootify: reviews, email, subscriptions, chat, invoices, automation
- [Savings calculator](https://www.smootify.io/tools/savings-calculator): the apps a theme would need, priced, against Smootify on the same Shopify invoice
- [Millimetro template](https://www.smootify.io/templates/millimetro): Made to order. Furniture made to measure, with tops in oak, walnut and laminate. Shows configurator, dynamic properties, swatches and a gift card at a price the customer chooses.
- [Spannbach template](https://www.smootify.io/templates/spannbach): B2B and wholesale. Industrial components for trade buyers, with a public catalog beside it. Shows quotes as draft orders, stock across three warehouses, specs from metafields.
- [Sunday Crate template](https://www.smootify.io/templates/sunday-crate): Boxes and subscriptions. Boxes: build your own once, or take a curated one on subscription. Shows a build-your-own box bought once, curated boxes on subscription, reviews without an app.

## Apps

- [Smootify Shopify app](https://www.smootify.io/shopify-app): connects the Shopify store to the Webflow site, carries the plan and bills it on the Shopify invoice; install from https://apps.shopify.com/smootify
- [Smootify Webflow app](https://www.smootify.io/webflow-app): the component library, attributes and conditions of 2.0 inside the Webflow Designer; adds native Webflow components
- [Smootify Studio](https://www.smootify.io/desktop-app): the desktop app for Mac and Windows (beta): syncs Shopify products into the Webflow CMS, finishes the CMS setup, runs Claude with Smootify’s skills for custom scripts

## Docs

- [Documentation](https://www.smootify.io/docs): home of the 2.0 docs; every page below is also served as markdown at its path + .md
- [All docs in one file](https://www.smootify.io/llms-full.txt): key facts, plans, add-ons and FAQ, then every docs page as markdown

## Docs: Get started

- [Quick start](https://www.smootify.io/docs/start/quick-start.md): The whole path from a Shopify store to a published Webflow store with Smootify 2.0, one step at a time, with a link to the page that covers each step.
- [Install Smootify 2.0](https://www.smootify.io/docs/start/install.md): The one line that loads Smootify 2.0 on every page of your Webflow site, the release channels, the stylesheet, in-app browsers on iPhone and the options.
- [Starter and templates](https://www.smootify.io/docs/start/templates.md): The Smootify starter project and the demo stores built on 2.0, starting from a blank site, and what to do with a site made from a 1.x template.
- [Smootify Studio](https://www.smootify.io/docs/start/studio.md): Smootify Studio, the desktop app for Mac and Windows - the tabs of each site (Setup, Build, Sync, Iterate, Check), the Claude of each site and what it knows, and how review notes reach Claude.
- [Set up the Shopify store](https://www.smootify.io/docs/start/shopify-store.md): The Shopify side of a Smootify store. Covers the store, the Smootify app, the Headless channel and its token, the sales channel your products must be on, markets and customer accounts.
- [Connect the Webflow project](https://www.smootify.io/docs/start/webflow-project.md): Prepare the Webflow site, connect it to a project in the Smootify dashboard, and add the domains the Smootify licence covers.
- [CMS collections and sync](https://www.smootify.io/docs/start/cms.md): The Products, Collections and Vendors collections, what the sync copies from Shopify and why variants and stock stay out, when to sync, metafields copied into CMS fields, the import and the automatic sync, and the URLs of the template pages.
- [Before you publish](https://www.smootify.io/docs/start/publish.md): The checks to make before a Smootify store goes live on its custom domain, in Shopify, in the Smootify dashboard and in Webflow, and how to test the store on your .webflow.io address first.
- [Domains and checkout](https://www.smootify.io/docs/start/domains.md): Which domain goes to Webflow and which to Shopify, why the checkout needs its own sub-domain, the Headless storefront, and the Shopify theme that sends visitors of the Shopify store to your Webflow site.
- [Hand a project to a client](https://www.smootify.io/docs/start/hand-off.md): How to give a finished store to your client, in Shopify, in Webflow and in the Smootify dashboard, in the right order and without losing the connection between them.
- [SEO and structured data](https://www.smootify.io/docs/start/seo.md): How search engines see a Smootify store. Covers the text and SEO settings that come from the CMS, the product structured data Smootify adds to product pages, alt texts, and Google Shopping.
- [Performance](https://www.smootify.io/docs/start/performance.md): What Smootify loads on a page and when, what it does by itself to make pages feel fast, and what you control as a designer, from image sizes to loading placeholders.
- [Accessibility](https://www.smootify.io/docs/start/accessibility.md): What Smootify tells screen readers about the parts it renders, such as the chosen option, a value that cannot be bought or a form error, and what stays with your design, from real buttons and labels to contrast and focus styles.
- [Move a site from 1.x](https://www.smootify.io/docs/start/migrate.md): The steps to move a Webflow site from Smootify 1.x to 2.0 - customer accounts, the new script on your .webflow.io address, the options and markup to update, your own scripts, going live and going back.
- [What changes for your site](https://www.smootify.io/docs/start/changes.md): What Smootify 2.0 removed and what replaces it, the new URL defaults, what is deprecated but still works, and what behaves differently on the page, for designers moving a 1.x site.
- [What 2.0 fixes](https://www.smootify.io/docs/start/whats-fixed.md): The Smootify 1.x bugs that 2.0 corrects - cart totals and discounts, unit prices, dates, weights, countdowns, subscriptions, large products, interactions, add-ons, analytics and in-app browsers on iPhone.
- [The debugger](https://www.smootify.io/docs/start/debugger.md): Smootify's debugger on your .webflow.io address - how to turn it on, what its panel shows, what the status of each element means and what its checks point out.
- [Troubleshooting](https://www.smootify.io/docs/start/troubleshooting.md): The usual reasons why something does not show or does not work on a Smootify site, grouped by area, each with the page that fixes it.

## Docs: Build your store

- [Build the product page](https://www.smootify.io/docs/build/product-page.md): The Shopify product on the template page of your Products collection. Covers title, price, gallery, options, add to cart and stock, and says what Smootify needs and what is up to your design.
- [Product gallery and media](https://www.smootify.io/docs/build/product-gallery.md): The product's images, videos and 3D models in depth. Covers how the gallery parts work together, galleries that follow the variant, videos outside the gallery, single images by position and image sizes.
- [Swatch colours and images](https://www.smootify.io/docs/build/swatches.md): Where the colour and image of a swatch come from, Shopify's native swatches and the option metaobject, how to set each one up in Shopify, and how to show swatches in pickers and on product cards.
- [Metafields on the page](https://www.smootify.io/docs/build/metafields.md): Show the Shopify metafields of a product and its variants. Covers what each type shows, lists, values written into attributes, colours, JSON, references, ratings, and elements shown or hidden by a metafield.
- [Gift cards](https://www.smootify.io/docs/build/gift-cards.md): Sell Shopify gift cards on the product page, with the optional fields that send the card to someone else by email, on a chosen day, with a message.
- [List the variants](https://www.smootify.io/docs/build/variants-list.md): Repeat a block once per variant of a product with smootify-variant. Covers variant cards in a Collection list, what a card shows, one card per colour, and the variant's swatches.
- [Build the collection page](https://www.smootify.io/docs/build/collection-page.md): The template page of your Collections collection. Covers the page URL, the collection details, and the two ways to list its products, a Collection list of product cards or search & discovery.
- [Product cards](https://www.smootify.io/docs/build/product-cards.md): A product card is a smootify-product that shows one product in a list. Covers what a card needs, what it can show (price ranges, option values, badges), adding to cart from a card, cards in a slider and placeholder cards.
- [Filters, sorting and pagination](https://www.smootify.io/docs/build/filters.md): Search & discovery lists products live from Shopify, with the filters of Shopify's Search & Discovery app, sorting and pagination designed in Webflow. Covers the block, every filter type, sorting, the count and active filters, pagination with page numbers and links that keep the filters.
- [Product lists without the CMS](https://www.smootify.io/docs/build/product-lists.md): Best sellers, newest products, related and complementary products, a custom query, one collection or the products in a metafield, filled straight from Shopify with one attribute on smootify-product.
- [Vendor pages](https://www.smootify.io/docs/build/vendor-page.md): One Webflow page per Shopify vendor (brand), from the Vendors collection the sync fills. Covers the template page and its URL, listing the vendor's products, and linking to the page from a product.
- [Build the cart](https://www.smootify.io/docs/build/cart.md): The cart as a page or as a mini cart that opens over the page. Covers the line template, totals, quantity and remove, the empty state, errors, checkout, and the five ways a cart can open.
- [Discounts, notes and progress bars](https://www.smootify.io/docs/build/cart-extras.md): The parts you add to a cart - discount code and gift card fields, the list of discounts, a note and other fields saved on the order, a free shipping progress bar and a countdown.
- [Cart upsells](https://www.smootify.io/docs/build/cart-upsells.md): Product suggestions based on what the visitor just added to the cart, shown in the mini cart, on the cart page or anywhere on the page.
- [Customer accounts](https://www.smootify.io/docs/build/account.md): Let customers log in on your Webflow site with Shopify's customer accounts. Covers the Shopify set-up, the key Smootify needs, login and logout, the customer's details, the customer conditions and the pages only logged-in customers can open.
- [Addresses](https://www.smootify.io/docs/build/addresses.md): Show the logged-in customer's saved addresses and let them add, edit and delete them. Covers the address list, the field names of the address forms, and the country and province selects.
- [Orders and buy again](https://www.smootify.io/docs/build/orders.md): Show the logged-in customer's orders. Covers the order list and its pages, the order page with its products and shipments, status labels, printing, and the Buy again button that puts an order back in the cart.
- [Subscriptions in the account](https://www.smootify.io/docs/build/account-subscriptions.md): Let customers see and manage their subscriptions on your site. Covers the subscription list, the subscription page with its products, status labels, and the forms that pause, resume and cancel a subscription.
- [Customer data and newsletter](https://www.smootify.io/docs/build/customer-data.md): Let logged-in customers see and change their own data, and collect newsletter sign-ups from any visitor. Covers the name form, customer metafields shown and edited, the email subscription, store credit and the newsletter form.
- [Predictive search](https://www.smootify.io/docs/build/predictive-search.md): A search field that shows products and search suggestions as the visitor types, in a Webflow Dropdown, a popover or right on the page. Covers smootify-search, its regions, the result template and the link to the search page.
- [Search results page](https://www.smootify.io/docs/build/search-page.md): A page that lists every product matching a search, from the words in its address or typed in its field, with a count, pagination and an empty state. Covers smootify-search-page and how visitors reach it.
- [Navbar: cart, search and account](https://www.smootify.io/docs/build/navbar.md): Where the store parts go in a navbar - the cart and its count, the search, the login and account links, and the country switcher - and what each one must be inside.
- [Popovers](https://www.smootify.io/docs/build/popovers.md): Which Smootify parts can open in a popover, how to build one with Webflow's Popover element or two custom attributes, and the rules for option pickers in a popover.
- [Toasts](https://www.smootify.io/docs/build/toasts.md): Short messages you design in Webflow that appear for a few seconds when something happens - a product added to the cart, a wishlist change, a form sent, a link copied, an error from the cart.

## Docs: Features & add-ons

- [Magic Box](https://www.smootify.io/docs/features/magic-box.md): A box the customer fills with products you choose, under rules you set, that reaches the cart and checkout as one line with its own title, image and discount.
- [Product add-ons](https://www.smootify.io/docs/features/add-ons.md): Offer other products next to the main one, in its add-to-cart form, with checkboxes, selects, dropdowns, popovers or swatches, and send them to the cart as one line with the product.
- [Fixed bundles (Shopify Bundles)](https://www.smootify.io/docs/features/fixed-bundles.md): Sell the fixed bundles and multipacks made with the Shopify Bundles app, and list what each bundle holds on the product page and in the cart.
- [Dynamic properties](https://www.smootify.io/docs/features/dynamic-properties.md): Fields the customer fills before adding to the cart, such as an engraving or a choice, decided product by product in Shopify and designed once in Webflow.
- [Product configurator](https://www.smootify.io/docs/features/product-configurator.md): Prices calculated from the customer's choices with a formula, such as a price per letter, per square metre or per material, shown on the page and charged at checkout.
- [Name your price](https://www.smootify.io/docs/features/name-your-price.md): Let the customer type the amount they pay, between a minimum and a maximum, without new variants, and what happens to that price from the cart to the order.
- [File uploads](https://www.smootify.io/docs/features/file-uploads.md): Let the customer upload files with a product, such as a logo or a print file, into your store's Shopify Files, with an upload area you design in Webflow.
- [Subscriptions](https://www.smootify.io/docs/features/subscriptions.md): Sell products by subscription with the selling plans of a Shopify subscription app, show plan prices, and know what works with boxes and add-ons.
- [Slot booking](https://www.smootify.io/docs/features/booking.md): Let customers book a time slot from a calendar you design in Webflow — an appointment without payment, a paid appointment, or a pickup or delivery window in the cart — with the schedule and the bookings managed in the Shopify admin.
- [Quotes and B2B](https://www.smootify.io/docs/features/quotes.md): Turn the cart into a quote request that reaches Shopify as a draft order, and show business customers their company, their quantity rules and their prices.
- [Wishlist](https://www.smootify.io/docs/features/wishlist.md): A button that saves products for later, a wishlist page, a counter and a link to share the list, kept in the visitor's browser and, for logged-in customers, in their account.
- [Recently viewed](https://www.smootify.io/docs/features/last-viewed.md): Show the products a visitor opened last, on any page, from their browser or, for logged-in customers, from their account.
- [Markets, currencies and languages](https://www.smootify.io/docs/features/markets.md): Sell in several countries with Shopify Markets. Covers the country and currency switcher, the pickup location switcher, what changes with the country, and languages with Webflow Localization or Weglot.
- [Market suggestion](https://www.smootify.io/docs/features/market-suggestion.md): A popover that tells a new visitor which country, currency and language the store has for them, once per browser, a few seconds after the page loads.
- [Pickup and store locator](https://www.smootify.io/docs/features/store-availability.md): Show on the product page where the selected variant can be picked up, list the other stores, and put your stores on a Mapbox map with a search field.
- [EU right of withdrawal](https://www.smootify.io/docs/features/eu-withdrawal.md): Add the withdrawal button that EU Directive 2023/2673 requires from 19 June 2026. Covers what the rule asks, a withdrawal page on your Webflow site with the metaobject creator and Shopify Flow, and a withdrawal app on a page hosted by Shopify.
- [Show metaobjects](https://www.smootify.io/docs/features/metaobjects.md): Load metaobjects from Shopify straight into Webflow, without the CMS. Covers a paged list of one type, the metaobjects of a product metafield, a single entry, and how their fields show.
- [Collect data with forms](https://www.smootify.io/docs/features/metaobject-creator.md): A Webflow form that saves each submission as a metaobject entry in Shopify, with file uploads, drafts to moderate, and automations in Shopify Flow.
- [Product reviews](https://www.smootify.io/docs/features/reviews.md): Show product reviews and star ratings from Judge.me, Loox or Klaviyo Reviews, build your own stars from Shopify's rating metafields, or keep your own reviews in Shopify with a form, without a review app.
- [Back in stock alerts](https://www.smootify.io/docs/features/back-in-stock.md): Let customers leave their email on a sold-out variant and get an email when it is back, with Klaviyo, or with the metaobject creator and Shopify Flow for alerts kept in your store.
- [Analytics and pixels](https://www.smootify.io/docs/features/analytics.md): Let Smootify load the Meta Pixel, Google Analytics 4, Google Ads and the TikTok Pixel with the visitor's consent, with the standard e-commerce events, and feed Shopify's own reports.
- [Cookie consent](https://www.smootify.io/docs/features/cookie-consent.md): Build the cookie banner and the preferences panel in Webflow with smootify-consent, over Shopify's Customer Privacy API, and let visitors reopen it from a preferences button.
- [Shopify apps on a Webflow site](https://www.smootify.io/docs/features/theme-apps.md): Which Shopify apps work on a Webflow store, and how to add the code of an app written for Shopify themes so that it runs after Smootify.
- [Shopify Inbox chat](https://www.smootify.io/docs/features/shopify-inbox.md): Add Shopify Inbox, Shopify's free chat, to a Webflow site with the code from the Smootify dashboard, two settings in Shopify, and the proxy that opens the chat panel.

## Docs: Developers

- [Run your scripts with Smootify](https://www.smootify.io/docs/developers/scripts.md): How your own code waits for Smootify, with window.Smootify.push, script type smootify-load or the smootify:loaded event, and the order in which they run at load.
- [JavaScript API](https://www.smootify.io/docs/developers/javascript-api.md): The methods of window.Smootify by task, for the cart, products, the customer, the market and consent, with short examples and how each kind of method answers.
- [Events](https://www.smootify.io/docs/developers/events.md): The events Smootify sends when something happens on the page, how to listen with Smootify.on and once, which event to use for which task, and the ones sent on an element instead of the document.
- [Filters](https://www.smootify.io/docs/developers/filters.md): Change what Smootify does before it does it, with Smootify.addFilter and its four filters for the lines added to the cart, the checkout address, draft orders and the metafields a page asks for.
- [Render a metafield yourself](https://www.smootify.io/docs/developers/custom-metafields.md): Write a metafield value with your own code, with the smootify.devMetafield event that fires after Smootify's render, and render a list metafield from smootify.renderedMetafields.
- [Shopify AJAX API](https://www.smootify.io/docs/developers/ajax-api.md): The Shopify theme endpoints Smootify answers on a Webflow site (/cart.js, /cart/add.js, /products/{handle}.js and more), what each one supports, how to start app code after Smootify, and how to turn the emulation off.
- [Options](https://www.smootify.io/docs/developers/options.md): Configure Smootify with window.SmootifyUserOptions, grouped by task, plus the label globals, the page overrides, the cart animations and the attributes Smootify reads on the html element.
- [CSS: states, skeletons and variables](https://www.smootify.io/docs/developers/css.md): What Smootify's stylesheet does, the state classes and page flags you can style, the skeleton placeholders and their variables, popover backdrops, upload classes and the CSS variables Smootify writes.

## Docs: Reference

- [Reference](https://www.smootify.io/docs/reference.md): Every element, attribute, condition, method, event and filter of Smootify 2.0.
- [Elements](https://www.smootify.io/docs/reference/elements.md): Every Smootify element and template of 2.0, by area.
- [Product and variants](https://www.smootify.io/docs/reference/elements/product-and-variants.md): The product scope and what shows its price, stock and pickup availability.
- [model-viewer](https://www.smootify.io/docs/reference/elements/model-viewer.md): 3D viewer Smootify creates for each 3D model of a product.
- [quantity-input](https://www.smootify.io/docs/reference/elements/quantity-input.md): Number input with plus and minus buttons for a quantity.
- [smootify-add-to-cart](https://www.smootify.io/docs/reference/elements/smootify-add-to-cart.md): Product form that turns the selection into cart lines.
- [smootify-banner](https://www.smootify.io/docs/reference/elements/smootify-banner.md): Licence or development badge that Smootify appends to the body.
- [smootify-error-banner](https://www.smootify.io/docs/reference/elements/smootify-error-banner.md): Advice box Smootify appends over an element on testing domains.
- [smootify-price](https://www.smootify.io/docs/reference/elements/smootify-price.md): Writes the price, compare-at price and total of its scope into its children. Inside subscription-swatches it shows its own option's price whatever plan is chosen: in a plan's radio that plan, in the one-time tab or radio the price without a plan, and (2.0) in a group's tab link its first plan.
- [smootify-product](https://www.smootify.io/docs/reference/elements/smootify-product.md): Loads a Shopify product into a scope and binds its descendants.
- [smootify-shop-pay](https://www.smootify.io/docs/reference/elements/smootify-shop-pay.md): Shows Shopify's Shop Pay button for the current variant or the cart lines. The button fills the element whatever the display of its class (2.0): the element's width sizes the button.
- [smootify-variant](https://www.smootify.io/docs/reference/elements/smootify-variant.md): Repeats its block once per variant of a product.
- [store-availability](https://www.smootify.io/docs/reference/elements/store-availability.md): Shows pickup availability of the current variant, with an optional list of locations.
- [store-location](https://www.smootify.io/docs/reference/elements/store-location.md): Template of one pickup location row, cloned per location.
- [Pickers and add-ons](https://www.smootify.io/docs/reference/elements/pickers-and-add-ons.md): The option pickers of a product and the add-ons added with it.
- [addon-checkbox](https://www.smootify.io/docs/reference/elements/addon-checkbox.md): Checkbox that adds the nested product as an add-on. The fields of every add-on widget can carry any Name (Webflow needs one). From mount they are named ##ignore-addon, which stays out of the cart line. Once the nested product loads, the checkbox becomes #addon|variantId|type|title|price, the quantity #quantity|variantId and the select #addon|SELECT|… (2.0).
- [addon-dropdown](https://www.smootify.io/docs/reference/elements/addon-dropdown.md): Webflow dropdown listing the nested product's variants as add-ons.
- [addon-popover](https://www.smootify.io/docs/reference/elements/addon-popover.md): Popover listing the nested product's variants as add-ons.
- [addon-select](https://www.smootify.io/docs/reference/elements/addon-select.md): Select whose options are the nested product's variants as add-ons.
- [addon-swatches](https://www.smootify.io/docs/reference/elements/addon-swatches.md): One button per value or variant of the nested product as add-ons.
- [dynamic-property](https://www.smootify.io/docs/reference/elements/dynamic-property.md): Form control configured by the product's property metaobject with the same label.
- [subscription-swatches](https://www.smootify.io/docs/reference/elements/subscription-swatches.md): Webflow tabs and radios that choose a selling plan.
- [variant-dropdown](https://www.smootify.io/docs/reference/elements/variant-dropdown.md): Webflow dropdown whose links are the values of a product option.
- [variant-popover](https://www.smootify.io/docs/reference/elements/variant-popover.md): Popover whose links or buttons are the values of a product option.
- [variant-selector](https://www.smootify.io/docs/reference/elements/variant-selector.md): Native select whose options are the values of a product option.
- [variant-swatches](https://www.smootify.io/docs/reference/elements/variant-swatches.md): One button per value of a product option.
- [Cart](https://www.smootify.io/docs/reference/elements/cart.md): The cart, the mini cart and the free-shipping and countdown bars.
- [bundle-item](https://www.smootify.io/docs/reference/elements/bundle-item.md): Template of one item of a bundle line, cloned per item.
- [button\[data-is="direct-add-to-cart"\]](https://www.smootify.io/docs/reference/elements/button-data-is-direct-add-to-cart.md): Button that adds the product's current variant to the cart without a form.
- [cart-item](https://www.smootify.io/docs/reference/elements/cart-item.md): Template of one cart line: the first is cloned per line, the others are removed.
- [free-shipping-bar](https://www.smootify.io/docs/reference/elements/free-shipping-bar.md): Shows the progress towards free shipping from the cart.
- [modal-backdrop](https://www.smootify.io/docs/reference/elements/modal-backdrop.md): Backdrop and animated panel of a <details> modal.
- [smootify-cart](https://www.smootify.io/docs/reference/elements/smootify-cart.md): Renders the cart and opens or closes it as a mini cart.
- [urgent-cart-countdown](https://www.smootify.io/docs/reference/elements/urgent-cart-countdown.md): Counts down a cart reservation and empties the cart when it ends.
- [Search & discovery](https://www.smootify.io/docs/reference/elements/search-discovery.md): Faceted product lists: filters, sorting, results.
- [filter-checkbox](https://www.smootify.io/docs/reference/elements/filter-checkbox.md): Multi-choice facet: one checkbox label per facet value.
- [filter-dropdown](https://www.smootify.io/docs/reference/elements/filter-dropdown.md): Single-choice facet in a Webflow Dropdown; the toggle text shows the current value.
- [filter-list](https://www.smootify.io/docs/reference/elements/filter-list.md): Single-choice facet: one radio label per facet value.
- [filter-popover](https://www.smootify.io/docs/reference/elements/filter-popover.md): Single-choice facet in a popover; the trigger shows the current value, a pick closes it.
- [filter-price](https://www.smootify.io/docs/reference/elements/filter-price.md): Price range facet with two number inputs, two range handles and a progress bar. The handles move by whole units: with a bound in cents (Shopify's {"price":{"min":0,"max":179.99}}) they run from 0 to 180, a handle at its end means the facet's own bound (the search keeps the 179.99 products when only the other handle moves) and the number inputs and labels show 179.99; a typed number never narrows the range (1.x: the max handle stopped at 179). The host's hide-empty and hide-if-single leave it shown: Shopify gives the price range as one value with count 0 (2.0; 1.x hid it with either).
- [filter-search](https://www.smootify.io/docs/reference/elements/filter-search.md): Free-text query of the block; typing or submitting sets the search query, also in a collection (data-collection).
- [filter-select](https://www.smootify.io/docs/reference/elements/filter-select.md): Single-choice facet in a native select; the first option is the placeholder.
- [filter-swatches](https://www.smootify.io/docs/reference/elements/filter-swatches.md): Facet as swatch buttons painted from the value's native swatch; a click toggles the value.
- [smootify-search-discovery](https://www.smootify.io/docs/reference/elements/smootify-search-discovery.md): Faceted product list: runs the search, renders the cards, active chips, count and pagination, and hosts the filter and sort widgets.
- [sort-dropdown](https://www.smootify.io/docs/reference/elements/sort-dropdown.md): Sort options in a Webflow Dropdown; toggle text and data-selected show the current sort (2.0: the designer's text until the visitor sorts; 1.x emptied data-selected).
- [sort-popover](https://www.smootify.io/docs/reference/elements/sort-popover.md): Sort options in a popover; the trigger shows the current sort (the designer's text until the visitor sorts), a pick closes it.
- [sort-radio](https://www.smootify.io/docs/reference/elements/sort-radio.md): Sort options as one radio label each.
- [sort-select](https://www.smootify.io/docs/reference/elements/sort-select.md): Sort options in a native select; the first option is the placeholder.
- [Search page and predictive search](https://www.smootify.io/docs/reference/elements/search-page-and-predictive-search.md): The search page and the search-as-you-type dropdown.
- [search-empty](https://www.smootify.io/docs/reference/elements/search-empty.md): Shown only when a query returned no products.
- [search-no-query](https://www.smootify.io/docs/reference/elements/search-no-query.md): Region shown only without a query; its suggested-query links set the query on click.
- [search-result](https://www.smootify.io/docs/reference/elements/search-result.md): Result template, cloned per product and filled through its search bindings.
- [search-suggestions](https://www.smootify.io/docs/reference/elements/search-suggestions.md): Holds the suggested-query template, cloned per Shopify query suggestion; hidden when there are none.
- [search-with-query](https://www.smootify.io/docs/reference/elements/search-with-query.md): Region shown only while there is a query; its first product card can be the result template.
- [smootify-search](https://www.smootify.io/docs/reference/elements/smootify-search.md): Predictive search: products and query suggestions as the customer types, in a Webflow Dropdown or a popover. The search field is input[name="query"]; without one, the only text field (2.0), whatever its Webflow Name, is named query. A results popover (2.0) opens as the customer types, and also on a focus or click of the field, empty or not, so search-no-query shows its suggestions.
- [smootify-search-page](https://www.smootify.io/docs/reference/elements/smootify-search-page.md): Full search results page driven by the query in the url or its text inputs (2.0: type="search" too), filled with the query, with count and pagination.
- [Extensions](https://www.smootify.io/docs/reference/elements/extensions.md): Magic Box, wishlist, last viewed, cart upsells, store locator, metaobjects, reviews and printing.
- [\[box-category\]](https://www.smootify.io/docs/reference/elements/box-category.md): Attribute form of smootify-box-category.
- [\[policy\]](https://www.smootify.io/docs/reference/elements/policy.md): Writes a shop policy body, in the page language, into the element.
- [\[wishlist="count"\]](https://www.smootify.io/docs/reference/elements/wishlist-count.md): Shows how many items the wishlist holds (products and variants); on a wishlist page opened from a shared link, how many the shared list holds.
- [box-item](https://www.smootify.io/docs/reference/elements/box-item.md): One line of the box, cloned from the first box-item for each picked item.
- [empty-state](https://www.smootify.io/docs/reference/elements/empty-state.md): Shown while the box, or the metaobject list, is empty (CSS).
- [items-list](https://www.smootify.io/docs/reference/elements/items-list.md): Shown while the box holds items (CSS on the box cart's is-empty).
- [judge-me-reviews](https://www.smootify.io/docs/reference/elements/judge-me-reviews.md): Judge.me reviews widget for the product.
- [judge-me-stars](https://www.smootify.io/docs/reference/elements/judge-me-stars.md): Judge.me stars badge for the product.
- [klaviyo-back-in-stock](https://www.smootify.io/docs/reference/elements/klaviyo-back-in-stock.md): Klaviyo back-in-stock form, in a dialog or popover, for the current variant.
- [map](https://www.smootify.io/docs/reference/elements/map.md): Container the Mapbox map is drawn into.
- [map-marker](https://www.smootify.io/docs/reference/elements/map-marker.md): Marker template, one per location with coordinates.
- [print-button](https://www.smootify.io/docs/reference/elements/print-button.md): Prints the printable-element its target names.
- [printable-element](https://www.smootify.io/docs/reference/elements/printable-element.md): A region that a print-button prints alone.
- [smootify-box-category](https://www.smootify.io/docs/reference/elements/smootify-box-category.md): A box category: its add-to-cart forms fill that category, the box moves to the next one. 2.0: is-complete while the box holds a piece of it, also on the .w-slide or the .w-tab-link that shows it (when every category there has one).
- [smootify-magic-box](https://www.smootify.io/docs/reference/elements/smootify-magic-box.md): Build-a-box: the add-to-cart forms inside it add to the box instead of the cart. 2.0: its pieces stay through a reload or another page until the box goes to the cart (a week at most); the card (smootify-product) of a picked product takes is-in-box and data-in-box (how many of it); the total takes the box's discount only once the box can be bought.
- [smootify-magic-box-cart](https://www.smootify.io/docs/reference/elements/smootify-magic-box-cart.md): Box panel: picked items, counters, totals and the form that adds the whole box to the cart.
- [smootify-metaobject](https://www.smootify.io/docs/reference/elements/smootify-metaobject.md): One metaobject, written into its [metaobject] descendants. With data-handle-param the handle comes from that parameter of the page url (data-handle-param="l" on /list?l=giulia-birthday: a link to one entry, such as one a metaobject-creator form created), before data-id and data-handle, which stay the fallback; the handle only goes to the query, never into the page. Without the parameter (and no fallback) or with an unknown handle the element is removed like any not found: a message next to it can show with :has() (.list:not(:has(smootify-metaobject)) .not-found).
- [smootify-metaobjects](https://www.smootify.io/docs/reference/elements/smootify-metaobjects.md): Paged list of the metaobjects of a type, or of a product metafield. 2.0: data-type="metafield.<ns>.<key>" with data-parent-id="customer" lists the entries of the logged-in customer's metafield, such as metafield.smootify.gift_list, the entries a metaobject-creator[customer-field] made for them (newest first; logged out, or none yet: is-empty; an entry deleted in the admin is skipped).
- [smootify-product\[data-id="cart-complementary"\]](https://www.smootify.io/docs/reference/elements/smootify-product-data-id-cart-complementary.md): Card template repeated with the complementary products of the latest cart line.
- [smootify-product\[data-id="cart-related"\]](https://www.smootify.io/docs/reference/elements/smootify-product-data-id-cart-related.md): Card template repeated with the related products of the latest cart line.
- [smootify-product\[data-id="cart-upsell"\]](https://www.smootify.io/docs/reference/elements/smootify-product-data-id-cart-upsell.md): Alias of the cart-upsells card template (complementary and related).
- [smootify-product\[data-id="cart-upsells"\]](https://www.smootify.io/docs/reference/elements/smootify-product-data-id-cart-upsells.md): Card template repeated with the complementary and related products of the latest cart line.
- [smootify-product\[data-id="last-viewed"\]](https://www.smootify.io/docs/reference/elements/smootify-product-data-id-last-viewed.md): Card template repeated once per recently viewed product (the first one in the page).
- [smootify-product\[data-id="wishlist"\]](https://www.smootify.io/docs/reference/elements/smootify-product-data-id-wishlist.md): Card template repeated once per saved product (the first one in the page); without a smootify-variant[data-product-id="wishlist"] also once per saved variant, as its product's card on that variant. A page opened from a wishlist-share link (?w=) shows that list instead of the visitor's, with body.is-shared-wishlist.
- [smootify-variant\[data-product-id="wishlist"\]](https://www.smootify.io/docs/reference/elements/smootify-variant-data-product-id-wishlist.md): Variant card template (its .w-dyn-item, else itself) repeated once per saved variant (the first one in the page), with the smootify-variant markup; without a smootify-product[data-id="wishlist"] also once per saved product, as the card of its first available variant.
- [store-locator](https://www.smootify.io/docs/reference/elements/store-locator.md): Shopify pickup locations on a Mapbox map, with a list filtered by a query field.
- [store-popup](https://www.smootify.io/docs/reference/elements/store-popup.md): Popup template bound to a location, opened on a marker click.
- [wishlist-share](https://www.smootify.io/docs/reference/elements/wishlist-share.md): Shares a link to the wishlist page (data-page, else this page) that shows the visitor's saved products and variants to whoever opens it, no account needed (?w=: numbers for products, v + number for variants, at most 100, only ids read): the device's share sheet where there is one, else the link is copied (data-copy: always copied). On the shared page the toggles keep working on the visitor's own list.
- [wishlist-toggle](https://www.smootify.io/docs/reference/elements/wishlist-toggle.md): Adds or removes the product, or its current variant (data-use-variants), from the wishlist; inside a card of the wishlist page it works on the entry the card shows, product or variant.
- [Sliders](https://www.smootify.io/docs/reference/elements/sliders.md): Product cards in Webflow sliders and Swiper.
- [dynamic-swiper](https://www.smootify.io/docs/reference/elements/dynamic-swiper.md): CMS items become Swiper slides, then Swiper starts with the params of an inner JSON script.
- [product-slider](https://www.smootify.io/docs/reference/elements/product-slider.md): At boot, each CMS item with a product card becomes a slide of a Webflow slider or Swiper.
- [smootify-product\[data-id="loader"\]](https://www.smootify.io/docs/reference/elements/smootify-product-data-id-loader.md): Design placeholder card (CMS lists for SEO and no layout shift): a product source in the same slider fills the n-th one, which then loads that product; search & discovery and the search page replace the list's cards with their first results.
- [swiper-container](https://www.smootify.io/docs/reference/elements/swiper-container.md): Swiper Element container that receives the slides.
- [swiper-slide](https://www.smootify.io/docs/reference/elements/swiper-slide.md): Slide template, cloned once per CMS item or per extra product of a card.
- [Account](https://www.smootify.io/docs/reference/elements/account.md): Login, addresses, orders, subscriptions and the customer data forms.
- [create-address](https://www.smootify.io/docs/reference/elements/create-address.md): Form that creates an address, with country and zone selects filled from the shop.
- [customer-address](https://www.smootify.io/docs/reference/elements/customer-address.md): Address row template, cloned once per address; 2.0: the customer's default address's row gets is-default (:60).
- [customer-addresses](https://www.smootify.io/docs/reference/elements/customer-addresses.md): Lists the customer's addresses, one row per address, with edit and delete forms armed.
- [customer-metafields-editor](https://www.smootify.io/docs/reference/elements/customer-metafields-editor.md): Form that prefills and saves the customer's custom metafields; 2.0: once saved, the customer is read again and the form comes back 5 s after its success message.
- [customer-order](https://www.smootify.io/docs/reference/elements/customer-order.md): Order row template, cloned once per order and painted like an order page.
- [customer-orders](https://www.smootify.io/docs/reference/elements/customer-orders.md): Paged list of the customer's orders, one row per order.
- [customer-subscribe-email](https://www.smootify.io/docs/reference/elements/customer-subscribe-email.md): Form that subscribes the customer to email marketing.
- [customer-subscription](https://www.smootify.io/docs/reference/elements/customer-subscription.md): Subscription row template, cloned once per contract.
- [customer-subscriptions](https://www.smootify.io/docs/reference/elements/customer-subscriptions.md): Paged list of the customer's subscription contracts, one row per contract.
- [customer-unsubscribe-email](https://www.smootify.io/docs/reference/elements/customer-unsubscribe-email.md): Form that unsubscribes the customer from email marketing.
- [customer-user-update](https://www.smootify.io/docs/reference/elements/customer-user-update.md): Form that prefills and saves the customer's first and last name; 2.0: once saved, the customer is read again (every [customer] binding of the page follows) and the form comes back 5 s after its success message.
- [delete-address](https://www.smootify.io/docs/reference/elements/delete-address.md): Form that deletes the address of its row and removes the row.
- [edit-address](https://www.smootify.io/docs/reference/elements/edit-address.md): Form that edits the address of its row, prefilled by the address list.
- [line-item](https://www.smootify.io/docs/reference/elements/line-item.md): Order line row template, cloned once per line of the order.
- [logout-form](https://www.smootify.io/docs/reference/elements/logout-form.md): Clears the customer session and follows Shopify's logout url when there is one.
- [order-fulfillment](https://www.smootify.io/docs/reference/elements/order-fulfillment.md): Fulfillment row template, cloned once per fulfillment of the order.
- [order-page](https://www.smootify.io/docs/reference/elements/order-page.md): Renders the single order named in the page url.
- [passwordless-login](https://www.smootify.io/docs/reference/elements/passwordless-login.md): Starts the Customer Accounts login when its form is submitted.
- [smootify-account-component](https://www.smootify.io/docs/reference/elements/smootify-account-component.md): Embeds Shopify's account web component (login menu) while the visitor is logged out.
- [store-credit](https://www.smootify.io/docs/reference/elements/store-credit.md): Shows the customer's store credit balance and transactions.
- [store-credit-transaction](https://www.smootify.io/docs/reference/elements/store-credit-transaction.md): Store credit transaction row template, cloned once per transaction.
- [subscription-activate](https://www.smootify.io/docs/reference/elements/subscription-activate.md): Form that resumes the paused contract of its wrapper and reloads the page.
- [subscription-cancel](https://www.smootify.io/docs/reference/elements/subscription-cancel.md): Form that cancels the contract of its wrapper and reloads the page.
- [subscription-line-item](https://www.smootify.io/docs/reference/elements/subscription-line-item.md): Contract line row template, cloned once per line of the contract.
- [subscription-page](https://www.smootify.io/docs/reference/elements/subscription-page.md): Renders the single subscription contract named in the page url.
- [subscription-pause](https://www.smootify.io/docs/reference/elements/subscription-pause.md): Form that pauses the active contract of its wrapper and reloads the page.
- [webflow-form](https://www.smootify.io/docs/reference/elements/webflow-form.md): Generic Webflow form wrapper with success state and redirect, no request behind it.
- [Markets and consent](https://www.smootify.io/docs/reference/elements/markets-and-consent.md): Countries, currencies, locations, the market suggestion and the cookie banner.
- [\[consent-condition="sale-of-data"\]](https://www.smootify.io/docs/reference/elements/consent-condition-sale-of-data.md): Shown only in sale-of-data regions (CSS only).
- [\[consent-panel="banner"\]](https://www.smootify.io/docs/reference/elements/consent-panel-banner.md): Shown while the banner is required, hidden while the preferences panel is open (CSS only).
- [\[consent-panel="preferences"\]](https://www.smootify.io/docs/reference/elements/consent-panel-preferences.md): Shown only while the preferences panel is open (CSS only).
- [\[popover\]\[data-is="market-dialog"\]](https://www.smootify.io/docs/reference/elements/popover-data-is-market-dialog.md): Suggests the visitor's market once per browser, opening after a delay and after the cookie banner closes.
- [\[popover\]\[data-is="market-dialog"\] button\[data-action="continue"\]](https://www.smootify.io/docs/reference/elements/popover-data-is-market-dialog-button-data-action-continue.md): Switches to the suggested market when it is not the current one, closes the suggestion and remembers it was seen; with a country-switcher inside the dialog it only closes (the visitor chooses there). Closing the dialog any other way stays on the market. (1.x: only closed)
- [button\[data-is="preferences-button"\]](https://www.smootify.io/docs/reference/elements/button-data-is-preferences-button.md): Opens the preferences panel of the page's cookie banner; shown only where the consent applies (2.0).
- [country-switcher](https://www.smootify.io/docs/reference/elements/country-switcher.md): Lists the market's countries in a Webflow dropdown or a popover and changes country on a pick; when Shopify has a language with the country's ISO code (IT → Italian) it changes language too. With Webflow Localization (a Webflow locale switcher, or the page's hreflang alternate links) the language goes through Webflow: the page moves to that language's locale (it-IT before it when the site has both), and without a locale for that language only the country changes.
- [currency-code](https://www.smootify.io/docs/reference/elements/currency-code.md): Text set to the current currency ISO code, anywhere in the document. With one country the switcher goes; a currency-code outside it still gets the currency (2.0).
- [location-switcher](https://www.smootify.io/docs/reference/elements/location-switcher.md): Lists the shop's pickup locations in a Webflow dropdown or a popover and changes location on a pick.
- [smootify-consent](https://www.smootify.io/docs/reference/elements/smootify-consent.md): Cookie banner and preferences panel built in Webflow over Shopify's Customer Privacy API: shown while Shopify asks for consent and the visitor has not answered, the preferences while open. With button[data-is="preferences-button"] inside (one component, e.g. in the Footer, the banner in a [popover] or [consent-panel]) it stays for the button wherever the consent applies, the banner closed until asked; elsewhere it is hidden whole (2.0).
- [smootify-consent \[data-action\]](https://www.smootify.io/docs/reference/elements/smootify-consent-data-action.md): Consent buttons (accept all, decline all, save choices, open preferences, close).
- [smootify-consent \[popover\]](https://www.smootify.io/docs/reference/elements/smootify-consent-popover.md): Opened and closed with the banner; closed from outside it hides the banner for the page.
- [smootify-consent input\[type="checkbox"\]\[name\]](https://www.smootify.io/docs/reference/elements/smootify-consent-input-type-checkbox-name.md): Consent category checkboxes, mirrored from and saved to the current consent.
- [Generic and debugging](https://www.smootify.io/docs/reference/elements/generic-and-debugging.md): What Smootify injects by itself on testing domains.
- [smootify-debugger](https://www.smootify.io/docs/reference/elements/smootify-debugger.md): Debug overlay injected by Smootify on testing domains, toggled with a keyboard shortcut; never placed by the designer.
- [smootify-toasts](https://www.smootify.io/docs/reference/elements/smootify-toasts.md): Short messages (toasts) when something happens on the page: an add to cart, a change the cart refused, a wishlist toggle, a Smootify form sent, a link copied; one clone of its [toast="…"] template per toast (no template, no toast; §2.14). Once per page, usually in a global component; shown in the top layer (a manual popover) above drawers and dialogs, placed by its class (bottom right until then) (2.0).
- [Server extensions (plan server)](https://www.smootify.io/docs/reference/elements/server-extensions.md): File uploads, newsletter, metaobject forms, name your price and the configurator: server plan.
- [\[upload="dropzone"\]](https://www.smootify.io/docs/reference/elements/upload-dropzone.md): Drop and click area; defaults to the element itself.
- [\[upload="error"\]](https://www.smootify.io/docs/reference/elements/upload-error.md): The item's error message, hidden without one.
- [\[upload="errors"\]](https://www.smootify.io/docs/reference/elements/upload-errors.md): Messages of the rejected files, hidden without any.
- [\[upload="item"\]](https://www.smootify.io/docs/reference/elements/upload-item.md): Item template cloned per file; a minimal one is generated when missing.
- [\[upload="list"\]](https://www.smootify.io/docs/reference/elements/upload-list.md): Holds one item per file; created when missing.
- [\[upload="name"\]](https://www.smootify.io/docs/reference/elements/upload-name.md): File name.
- [\[upload="preview"\]](https://www.smootify.io/docs/reference/elements/upload-preview.md): Image preview of the file (img source or background image).
- [\[upload="progress"\]](https://www.smootify.io/docs/reference/elements/upload-progress.md): Upload progress (a progress element, or percentage text).
- [\[upload="remove"\]](https://www.smootify.io/docs/reference/elements/upload-remove.md): Removes the file.
- [\[upload="size"\]](https://www.smootify.io/docs/reference/elements/upload-size.md): File size, hidden when unknown.
- [booking-calendar](https://www.smootify.io/docs/reference/elements/booking-calendar.md): Shows the slots of a bookable product (its Booking schedule, set in the Shopify admin) for days days, the places left of each, the day in the site's language and the time in the place's time zone; picking a free slot books it as its container says. In a booking-form: the form books it. In a product's add to cart: adding the product holds the slot for the quantity and writes it on the product's lines (a paid appointment); no slot or a full one stops the addition with the message, and an addition that does not get in (Shopify refuses it) gives the slot back. In the cart: the picked slot is written on the cart (a pickup or delivery window) and held only when the visitor checks out, so picking holds no place; a slot taken by someone else meanwhile stops the checkout, with the message in [booking="error"], and with data-required the checkout stops until a slot is picked. The places are counted by Smootify: two visitors cannot book the last one. The availability is kept a minute, so pages opened again ask nothing.
- [booking-form](https://www.smootify.io/docs/reference/elements/booking-form.md): Books the slot picked in its booking-calendar without a cart (an appointment): the booking, with the form's name, email, phone and note fields and the logged-in customer, is saved in the store's Bookings (Shopify admin → Content → Metaobjects) and shown on the product's Smootify booking block. Webflow's success and error states show the answer; a slot that filled up meanwhile is the form error and the calendar shows its places again.
- [configurator-checkbox](https://www.smootify.io/docs/reference/elements/configurator-checkbox.md): Checkbox whose formula step is on while checked.
- [configurator-dimension](https://www.smootify.io/docs/reference/elements/configurator-dimension.md): Number inputs named after formula variables; the step is on when all hold valid numbers.
- [configurator-dropdown](https://www.smootify.io/docs/reference/elements/configurator-dropdown.md): Webflow dropdown over a hidden select whose chosen option carries the formula step.
- [configurator-field](https://www.smootify.io/docs/reference/elements/configurator-field.md): Groups configurator fields; has no effect of its own. Every configurator field counts the value it already has when it mounts (typed before the configurator loaded, restored by the browser on Back, a default value / checked / selected), as the add to cart sends it.
- [configurator-file-input](https://www.smootify.io/docs/reference/elements/configurator-file-input.md): File uploader that is also a formula step, with the number of files as variable.
- [configurator-input](https://www.smootify.io/docs/reference/elements/configurator-input.md): Text input whose formula step is on while its value is valid, with its length as variable. 2.0: also letters, its characters without spaces ("Studio Rossi": length 12, letters 11).
- [configurator-popover](https://www.smootify.io/docs/reference/elements/configurator-popover.md): The configurator dropdown with its options in a popover.
- [configurator-radio](https://www.smootify.io/docs/reference/elements/configurator-radio.md): Radios whose checked option carries the formula step.
- [configurator-select](https://www.smootify.io/docs/reference/elements/configurator-select.md): Select whose chosen option carries the formula step.
- [configurator-share](https://www.smootify.io/docs/reference/elements/configurator-share.md): Shares a link to this page with the visitor's configuration: one url parameter per configurator field, named as its control (name: ?Engraving=abc&Finish=gloss&width=120), plus ?variant= when the product has more than one. A page opened from such a link starts every configurator field from its parameter, applied as a visitor would (the same input / change, so a value the field refuses stays off: below min, an option the select does not have; text cut at maxlength), and the price follows; names the page does not have are ignored, and a file stays out of the link (uploaded again). The device's share sheet where there is one, else the link is copied (data-copy: always copied).
- [error-message](https://www.smootify.io/docs/reference/elements/error-message.md): Error text shown only while the field is invalid (CSS only): a value out of its limits, or (2.0) a required configurator-radio group with no choice, which marks its host is-invalid instead of the browser bubble until a radio is picked. The browser's own message never shows on these fields, so a design gives each one an error-message with its limits.
- [file-input](https://www.smootify.io/docs/reference/elements/file-input.md): Uploads files to Shopify and submits their gids as one form field. The saved files of its value show their file name, and their image when data-preview is set or (2.0) the designed item template has an [upload="preview"].
- [file-uploader](https://www.smootify.io/docs/reference/elements/file-uploader.md): Uploads files to Shopify and adds their names, gids and admin links to the cart line.
- [input\[type="file"\]](https://www.smootify.io/docs/reference/elements/input-type-file.md): The file picker; created hidden when missing.
- [metaobject-creator](https://www.smootify.io/docs/reference/elements/metaobject-creator.md): Creates a metaobject from a Webflow form: every filled field whose name does not start with _; a name the form repeats (a checkbox group with each checkbox's value, a multiple select) sends all its values; a lone checkbox sends true / false. The backend converts each value to its field type: rating from a number (the field's scale), list.* from repeated values, a comma separated text or a JSON array, boolean, number_decimal with a comma, url without https://, references from a numeric id, rich_text_field from lines (one paragraph each), money in the shop currency, date_time from datetime-local, dimension / volume / weight from "2.5 cm" (a select data-unit-for="<name>" gives the unit of that field, its own name is not sent); a value already in Shopify's format passes as it is. A definition without the publishable capability gets no status (data-draft is ignored there). The backend refuses Shopify's standard types (shopify--…), the app-reserved ones ($app:…) and Smootify's own (magic_box, combinations, dynamic_property, option), with the form error "This form cannot create entries of this metaobject type". customer-field="<key>": the entry belongs to the logged-in customer, written by the backend into that field (a customer reference) from the Customer Account token, never from the form; logged out the element is hidden and its form inert (is-customer while logged in), and a request without a valid token is refused ("Log in to send this form"). 2.0: with customer-field the backend also puts the entry, first, into the customer's metafield smootify.<type> (a list of references to that type, created the first time, at most 128: the oldest leave the list), which smootify-metaobjects[data-type="metafield.smootify.<type>"][data-parent-id="customer"] lists on the account pages. Once the entry is created: data-handle and is-created on the host, every a[data-handle-param="<param>"] inside (in the form's success state) links its page with ?<param>=<handle>, the page whose smootify-metaobject[data-handle-param] shows the entry (a gift list), and button[data-action="share"] shares that link: the device's share sheet where there is one, else it is copied (data-copy always copies, data-title titles the share), is-shared / is-copied on the button for two seconds. 2.0: input[type=number][data-quantity-for="<list key>"] beside each checkbox of that list (in the same product card) sends, under its own name, one JSON field {"<product id>": n} with the count of every checked product (at least 1; an unchecked one is left out), such as how many units a gift list asks for.
- [metaobject-editor](https://www.smootify.io/docs/reference/elements/metaobject-editor.md): 2.0: the logged-in customer edits or deletes an entry they own, one a metaobject-creator[customer-field] made (a gift list, a warranty registration). The entry is the one smootify-metaobject would show: data-handle-param (the page url's parameter), else data-id, else data-handle, with data-type. Its form is filled with the entry (a text its value, a lone checkbox true, the checkboxes of a list the values in it, a radio or a select its value, a data-quantity-for input its product's count, a file-input its saved files) and sends its fields as metaobject-creator does, as an update. Only the customer whose id is in customer-field gets is-owner and a working form; anyone else, or logged out, gets neither (hidden by skeleton.css, form inert), and the backend checks the token's customer against the entry again ("This entry belongs to another customer"); the customer field itself never changes. button[data-action="delete"] deletes the entry, after data-confirm="<question>" when set, and takes it out of the customer's smootify.<type> list; then is-deleted on the host (form inert) and data-redirect="<url>" goes there; a refusal shows in the form's .w-form-fail.
- [name-your-price](https://www.smootify.io/docs/reference/elements/name-your-price.md): Lets the customer type the unit price the product is added at. 2.0: not on a gift card product (Shopify issues the card for its variant's value whatever was paid): there it removes itself, and no price source (the configurator's either) changes a gift card's price.
- [newsletter-subscribe](https://www.smootify.io/docs/reference/elements/newsletter-subscribe.md): Subscribes the email of a Webflow form to the newsletter.
- [quantity-input script\[type="application/json"\]](https://www.smootify.io/docs/reference/elements/quantity-input-script-type-application-json.md): Quantity-break table applied to the configured price: each break's price applies from its min quantity (included) up to the next break.
- [Removed in 2.0](https://www.smootify.io/docs/reference/elements/removed.md): The 1.x tags Smootify 2.0 no longer defines, and what replaces them.
- [Attributes](https://www.smootify.io/docs/reference/attributes.md): The attributes Smootify fills in an element, and their values.
- [Product](https://www.smootify.io/docs/reference/attributes/product.md): The values of `product` inside `smootify-product` or `smootify-variant` or `box-item`.
- [Gallery parts](https://www.smootify.io/docs/reference/attributes/gallery.md): The values of `gallery` inside `smootify-product [product="gallery"]`.
- [Selected variant](https://www.smootify.io/docs/reference/attributes/variant.md): The values of `variant` inside `smootify-product` or `smootify-variant` or `box-item`.
- [Bundle component](https://www.smootify.io/docs/reference/attributes/component.md): The values of `component` inside `[variant="components"]`.
- [Variant swatch](https://www.smootify.io/docs/reference/attributes/variant-swatch.md): The values of `swatch` inside `smootify-variant [variant="swatch1"]` or `smootify-variant [variant="swatch2"]` or `smootify-variant [variant="swatch3"]`.
- [Option buttons](https://www.smootify.io/docs/reference/attributes/option.md): The values of `option` inside `variant-swatches` or `variant-dropdown` or `variant-popover` or `addon-swatches` or `smootify-product [product="option-values"]`.
- [Each value](https://www.smootify.io/docs/reference/attributes/option-value-self.md): On the repeated element itself
- [Selected value](https://www.smootify.io/docs/reference/attributes/selected-option.md): The values of `selected-option` inside `variant-swatches` or `variant-dropdown` or `variant-popover` or `variant-selector`.
- [Add to cart](https://www.smootify.io/docs/reference/attributes/add-to-cart.md): The values of `bundle` inside `smootify-add-to-cart`.
- [Quantity](https://www.smootify.io/docs/reference/attributes/quantity.md): The values of `data-action` inside `quantity-input`.
- [Price](https://www.smootify.io/docs/reference/attributes/price.md): The values of `data-prop` inside `smootify-price`.
- [Selling plans](https://www.smootify.io/docs/reference/attributes/selling-plan.md): The values of `subscription-group` inside `subscription-swatches`.
- [Cart](https://www.smootify.io/docs/reference/attributes/cart.md): The values of `cart` inside `smootify-cart`.
- [Discount](https://www.smootify.io/docs/reference/attributes/discount.md): The values of `discount` inside `smootify-cart [cart="discount"]` or `cart-item [cart-item="discount"]`.
- [Gift card](https://www.smootify.io/docs/reference/attributes/gift-card.md): The values of `gift-card` inside `smootify-cart [cart="gift-card"]`.
- [Cart form and buttons](https://www.smootify.io/docs/reference/attributes/cart-form.md): The values of `data-name` inside `smootify-cart`.
- [Cart line](https://www.smootify.io/docs/reference/attributes/cart-item.md): The values of `cart-item` inside `cart-item`.
- [Line option](https://www.smootify.io/docs/reference/attributes/line-option.md): The values of `option` inside `cart-item [cart-item="options"]` or `line-item [line-item="option"]`.
- [Bundle line](https://www.smootify.io/docs/reference/attributes/bundle-item.md): The values of `bundle-item` inside `bundle-item`.
- [Box item](https://www.smootify.io/docs/reference/attributes/box-item.md): The values of `box-item` inside `box-item`.
- [Image size](https://www.smootify.io/docs/reference/attributes/image-size.md): On an image Smootify fills: the Shopify CDN resizes it. In a gallery, on the Slider for its slides, on the thumbnail or lightbox part itself
- [Loading](https://www.smootify.io/docs/reference/attributes/loading.md): A placeholder until the data arrives
- [When the value is missing](https://www.smootify.io/docs/reference/attributes/fallback.md): The values of `data-fallback`.
- [Form field](https://www.smootify.io/docs/reference/attributes/form-field.md): The values of `data-required`.
- [Form values in the page](https://www.smootify.io/docs/reference/attributes/form-values.md): The values of `form-value` inside `smootify-product`.
- [Product metafield](https://www.smootify.io/docs/reference/attributes/product-metafield.md): The values of `metafield` inside `smootify-product` or `cart-item`.
- [Reference parts](https://www.smootify.io/docs/reference/attributes/reference.md): For a product, variant, collection or page reference; hidden when it has none
- [Variant metafield](https://www.smootify.io/docs/reference/attributes/variant-metafield.md): The values of `variant-metafield` inside `smootify-product` or `smootify-variant`.
- [Option metafield](https://www.smootify.io/docs/reference/attributes/option-metafield.md): The values of `option-metafield` inside `variant-swatches` or `variant-dropdown` or `variant-popover` or `addon-swatches` or `smootify-product [product="option-values"]`.
- [Metaobject field](https://www.smootify.io/docs/reference/attributes/metaobject.md): The values of `metaobject` inside `smootify-metaobject` or `[metafield]` or `[variant-metafield]` or `[customer-metafield]` or `[company-metafield]`.
- [Metaobject list](https://www.smootify.io/docs/reference/attributes/metaobjects-list.md): The values of `data-action` inside `smootify-metaobjects`.
- [Metaobject form buttons](https://www.smootify.io/docs/reference/attributes/metaobject-actions.md): The values of `data-action` inside `metaobject-creator` or `metaobject-editor`.
- [Quantities of a metaobject's products](https://www.smootify.io/docs/reference/attributes/metaobject-quantity.md): On a product card of a metaobject (data-id="metaobject.products") whose data-requested and data-fulfilled name the entry's JSON fields of quantities, like a gift list's quantities and gifted. The card takes is-partially-fulfilled, then is-fulfilled with its add to cart off
- [Customer](https://www.smootify.io/docs/reference/attributes/customer.md): The values of `customer`.
- [Customer metafield](https://www.smootify.io/docs/reference/attributes/customer-metafield.md): The values of `customer-metafield`.
- [Order](https://www.smootify.io/docs/reference/attributes/order.md): The values of `order` inside `customer-order` or `order-page`.
- [Account list pages](https://www.smootify.io/docs/reference/attributes/account-lists.md): The values of `data-action` inside `customer-orders` or `customer-subscriptions`.
- [Order line](https://www.smootify.io/docs/reference/attributes/line-item.md): The values of `line-item` inside `line-item`.
- [Subscription line](https://www.smootify.io/docs/reference/attributes/subscription-line-item.md): The values of `line-item` inside `subscription-line-item`.
- [Fulfillment](https://www.smootify.io/docs/reference/attributes/fulfillment.md): The values of `fulfillment` inside `order-fulfillment`.
- [Subscription](https://www.smootify.io/docs/reference/attributes/subscription.md): The values of `subscription` inside `customer-subscription` or `subscription-page`.
- [Address](https://www.smootify.io/docs/reference/attributes/address.md): The values of `address` inside `customer-addresses customer-address`.
- [Store credit](https://www.smootify.io/docs/reference/attributes/store-credit.md): The values of `store-credit` inside `store-credit`.
- [Search and filters](https://www.smootify.io/docs/reference/attributes/search-discovery.md): The values of `filter` inside `smootify-search-discovery`.
- [Price filter](https://www.smootify.io/docs/reference/attributes/filter-price.md): The values of `filter-price` inside `filter-price`.
- [Filter swatch](https://www.smootify.io/docs/reference/attributes/filter-swatch.md): The values of `swatch` inside `filter-swatches`.
- [Search page](https://www.smootify.io/docs/reference/attributes/search-page.md): The values of `search` inside `smootify-search-page`.
- [Predictive search](https://www.smootify.io/docs/reference/attributes/predictive-search.md): The values of `search` inside `smootify-search`.
- [Wishlist](https://www.smootify.io/docs/reference/attributes/wishlist.md): The values of `wishlist`.
- [Shop policy](https://www.smootify.io/docs/reference/attributes/policy.md): The values of `policy`.
- [Store](https://www.smootify.io/docs/reference/attributes/store-locator.md): The values of `location` inside `store-locator store-location` or `store-locator store-popup`.
- [Booking](https://www.smootify.io/docs/reference/attributes/booking.md): The values of `booking` inside `booking-calendar`.
- [Booking days](https://www.smootify.io/docs/reference/attributes/booking-nav.md): The values of `data-action` inside `booking-calendar`.
- [Booking form fields](https://www.smootify.io/docs/reference/attributes/booking-form.md): The fields the booking saves on its entry, with the picked slot; any case works (Webflow's Name, Email). Any other field is not sent
- [Pickup location](https://www.smootify.io/docs/reference/attributes/pickup-location.md): The values of `location` inside `store-availability store-location` or `store-availability`.
- [Country switcher](https://www.smootify.io/docs/reference/attributes/country-switcher.md): The values of `data-prop` inside `country-switcher`.
- [Market suggestion](https://www.smootify.io/docs/reference/attributes/market-dialog.md): The values of `market-dialog` inside `[data-is="market-dialog"]`.
- [Location switcher](https://www.smootify.io/docs/reference/attributes/location-switcher.md): The values of `location` inside `location-switcher`.
- [Free shipping bar](https://www.smootify.io/docs/reference/attributes/free-shipping.md): The values of `data-prop` inside `free-shipping-bar`.
- [Cart countdown](https://www.smootify.io/docs/reference/attributes/countdown.md): The values of `data-prop` inside `urgent-cart-countdown`.
- [Magic box](https://www.smootify.io/docs/reference/attributes/magic-box.md): The values of `data-prop` inside `smootify-magic-box-cart`.
- [Cookie consent](https://www.smootify.io/docs/reference/attributes/consent.md): The values of `data-action` inside `smootify-consent`.
- [File upload](https://www.smootify.io/docs/reference/attributes/upload.md): The values of `upload` inside `file-uploader` or `file-input` or `configurator-file-input`.
- [Toasts](https://www.smootify.io/docs/reference/attributes/toast.md): The values of `toast` inside `smootify-toasts`.
- [Toast content](https://www.smootify.io/docs/reference/attributes/toast-item.md): The values of `toast-item` inside `smootify-toasts [toast]`.
- [Toast buttons](https://www.smootify.io/docs/reference/attributes/toast-actions.md): The values of `data-action` inside `smootify-toasts [toast]`.
- [Off-canvas panel](https://www.smootify.io/docs/reference/attributes/modal-backdrop.md): The values of `data-action`.
- [Conditions](https://www.smootify.io/docs/reference/conditions.md): The attributes that make Smootify show or hide an element.
- [Product](https://www.smootify.io/docs/reference/conditions/product.md): Shown only while the product is in that state
- [Product tags](https://www.smootify.io/docs/reference/conditions/product-tags.md): The values of `tagged` inside `smootify-product`.
- [Add to cart](https://www.smootify.io/docs/reference/conditions/add-to-cart.md): The values of `condition` inside `smootify-add-to-cart`.
- [Pickup](https://www.smootify.io/docs/reference/conditions/pickup.md): The values of `condition` inside `store-availability`.
- [Store locator](https://www.smootify.io/docs/reference/conditions/store-locator.md): The values of `condition` inside `store-locator`.
- [Page](https://www.smootify.io/docs/reference/conditions/page.md): The values of `condition`.
- [Customer](https://www.smootify.io/docs/reference/conditions/customer.md): The values of `customer-condition`.
- [Customer tags](https://www.smootify.io/docs/reference/conditions/customer-tags.md): The values of `customer-tagged`.
- [Cart](https://www.smootify.io/docs/reference/conditions/cart.md): The values of `cart-condition` inside `smootify-cart`.
- [Magic box](https://www.smootify.io/docs/reference/conditions/magic-box.md): The values of `box-condition` inside `smootify-magic-box-cart`.
- [Magic box category](https://www.smootify.io/docs/reference/conditions/magic-box-category.md): Inside a box category, the slide or the tab link that shows it
- [Order](https://www.smootify.io/docs/reference/conditions/order.md): The values of `order-condition` inside `order-page`.
- [Address form](https://www.smootify.io/docs/reference/conditions/address-form.md): The values of `address-condition` inside `create-address` or `edit-address`.
- [Address in the list](https://www.smootify.io/docs/reference/conditions/address-row.md): The values of `address-condition` inside `customer-address`.
- [Cookie banner](https://www.smootify.io/docs/reference/conditions/consent.md): The values of `consent-condition` inside `smootify-consent`.
- [Store credit](https://www.smootify.io/docs/reference/conditions/store-credit.md): The values of `if-credit` inside `store-credit`.
- [Product metafield](https://www.smootify.io/docs/reference/conditions/product-metafield.md): The values of `if-metafield` inside `smootify-product` or `cart-item`.
- [Variant metafield](https://www.smootify.io/docs/reference/conditions/variant-metafield.md): The values of `if-variant-metafield` inside `smootify-product` or `smootify-variant`.
- [Customer metafield](https://www.smootify.io/docs/reference/conditions/customer-metafield.md): The values of `if-customer-metafield`.
- [Metaobject field](https://www.smootify.io/docs/reference/conditions/metaobject.md): The values of `if-metaobject` inside `smootify-metaobject` or `[metafield]` or `[variant-metafield]` or `[customer-metafield]` or `[company-metafield]`.
- [Free shipping](https://www.smootify.io/docs/reference/conditions/free-shipping.md): The values of `free-shipping-condition` inside `free-shipping-bar`.
- [Subscription choices](https://www.smootify.io/docs/reference/conditions/subscription-group.md): The values of `group-condition` inside `subscription-swatches`.
- [JavaScript API](https://www.smootify.io/docs/reference/api.md): The methods, events and filters of window.Smootify.
- [Smootify.push()](https://www.smootify.io/docs/reference/api/methods/push.md): runs each function once Smootify knows the visitor and the market, before it loads products and cart, so listeners get every event and filters apply from the first request; right away later on. One that throws does not stop the others.
- [Smootify.on()](https://www.smootify.io/docs/reference/api/methods/on.md): listens to an event; `replay` also calls the handler with the last payload of one that already happened. Returns the unsubscribe.
- [Smootify.once()](https://www.smootify.io/docs/reference/api/methods/once.md): The once method of window.Smootify.
- [Smootify.addFilter()](https://www.smootify.io/docs/reference/api/methods/addfilter.md): adds a filter after the ones added before it; returns its removal
- [Smootify.getCart()](https://www.smootify.io/docs/reference/api/methods/getcart.md): The getCart method of window.Smootify.
- [Smootify.getCartID()](https://www.smootify.io/docs/reference/api/methods/getcartid.md): The getCartID method of window.Smootify.
- [Smootify.addToCart()](https://www.smootify.io/docs/reference/api/methods/addtocart.md): adds lines (through the `add_to_cart_lines` filters): resolves with the cart, or with Shopify's errors
- [Smootify.addBoxToCart()](https://www.smootify.io/docs/reference/api/methods/addboxtocart.md): adds lines as one Magic Box, with its title, image and discount percentage (`___dp`)
- [Smootify.updateCartLines()](https://www.smootify.io/docs/reference/api/methods/updatecartlines.md): rejects with Shopify's errors
- [Smootify.removeCartLines()](https://www.smootify.io/docs/reference/api/methods/removecartlines.md): `dispatchEvents: false` changes the cart without events or re-render (1.x)
- [Smootify.clearCart()](https://www.smootify.io/docs/reference/api/methods/clearcart.md): The clearCart method of window.Smootify.
- [Smootify.reloadCart()](https://www.smootify.io/docs/reference/api/methods/reloadcart.md): asks Shopify for the cart again
- [Smootify.applyCouponCode()](https://www.smootify.io/docs/reference/api/methods/applycouponcode.md): resolves with the cart, or with Shopify's errors
- [Smootify.removeCouponCode()](https://www.smootify.io/docs/reference/api/methods/removecouponcode.md): rejects with Shopify's errors
- [Smootify.applyGiftCard()](https://www.smootify.io/docs/reference/api/methods/applygiftcard.md): resolves with the cart, or with Shopify's errors
- [Smootify.removeGiftCard()](https://www.smootify.io/docs/reference/api/methods/removegiftcard.md): the id is the applied gift card's (`cart.appliedGiftCards[].id`); rejects with Shopify's errors
- [Smootify.updateCartNote()](https://www.smootify.io/docs/reference/api/methods/updatecartnote.md): The updateCartNote method of window.Smootify.
- [Smootify.updateCartAttributes()](https://www.smootify.io/docs/reference/api/methods/updatecartattributes.md): The updateCartAttributes method of window.Smootify.
- [Smootify.checkout()](https://www.smootify.io/docs/reference/api/methods/checkout.md): goes to checkout, as the cart's checkout button, after the `checkout_url` filters; rejects with the errors
- [Smootify.openCart()](https://www.smootify.io/docs/reference/api/methods/opencart.md): opens the page's mini cart (not a cart page)
- [Smootify.closeCart()](https://www.smootify.io/docs/reference/api/methods/closecart.md): The closeCart method of window.Smootify.
- [Smootify.getCartAsDraftOrderData()](https://www.smootify.io/docs/reference/api/methods/getcartasdraftorderdata.md): the cart as a draft order input (Draft Orders)
- [Smootify.getProductsById()](https://www.smootify.io/docs/reference/api/methods/getproductsbyid.md): the products by id that Shopify knows in the current market
- [Smootify.getProductByHandle()](https://www.smootify.io/docs/reference/api/methods/getproductbyhandle.md): The getProductByHandle method of window.Smootify.
- [Smootify.selectVariant()](https://www.smootify.io/docs/reference/api/methods/selectvariant.md): selects a variant (its number or gid) of a `smootify-product` of the page: the element, or one inside it; false when the product has no such variant
- [Smootify.toast()](https://www.smootify.io/docs/reference/api/methods/toast.md): shows the page's `[toast="<name>"]` (in `smootify-toasts`) with `items` written into its `[toast-item]` children, as `Smootify.toast("added-to-cart", { title: "Gift wrap" })`; false when the page has no such template
- [Smootify.isLoggedIn()](https://www.smootify.io/docs/reference/api/methods/isloggedin.md): The isLoggedIn method of window.Smootify.
- [Smootify.getCustomer()](https://www.smootify.io/docs/reference/api/methods/getcustomer.md): the customer (null for a guest) once the session is known
- [Smootify.passwordlessLogin()](https://www.smootify.io/docs/reference/api/methods/passwordlesslogin.md): starts the login of Shopify's customer accounts
- [Smootify.logout()](https://www.smootify.io/docs/reference/api/methods/logout.md): ends the session, and Shopify's too
- [Smootify.getNewCustomerAccessToken()](https://www.smootify.io/docs/reference/api/methods/getnewcustomeraccesstoken.md): the Customer Account API token of the session ("" for a guest)
- [Smootify.queryCustomer()](https://www.smootify.io/docs/reference/api/methods/querycustomer.md): a Customer Account API query on the customer: `fields` is the selection inside `customer { … }`
- [Smootify.setCustomerMetafields()](https://www.smootify.io/docs/reference/api/methods/setcustomermetafields.md): The setCustomerMetafields method of window.Smootify.
- [Smootify.getLocalization()](https://www.smootify.io/docs/reference/api/methods/getlocalization.md): country, currency, language and where the store sells, once known
- [Smootify.changeCountryByIsoCode()](https://www.smootify.io/docs/reference/api/methods/changecountrybyisocode.md): true when the country changed (the page follows it)
- [Smootify.changeMarketLanguage()](https://www.smootify.io/docs/reference/api/methods/changemarketlanguage.md): The changeMarketLanguage method of window.Smootify.
- [Smootify.formatMoney()](https://www.smootify.io/docs/reference/api/methods/formatmoney.md): an amount in the store's money format; `forceNoHtml` and `forceNoTaxes` are accepted and ignored (1.x)
- [Smootify.getConsent()](https://www.smootify.io/docs/reference/api/methods/getconsent.md): the visitor's consent; loads Shopify's Customer Privacy script when the page has not yet
- [Smootify.setConsent()](https://www.smootify.io/docs/reference/api/methods/setconsent.md): The setConsent method of window.Smootify.
- [Smootify.enableAnalytics()](https://www.smootify.io/docs/reference/api/methods/enableanalytics.md): 1.x: Shopify's analytics with (`true`) or without the visitor's consent
- [Smootify.query()](https://www.smootify.io/docs/reference/api/methods/query.md): a Storefront API query in the current market: resolves with `data`, rejects with the GraphQL errors
- [smootify:loaded](https://www.smootify.io/docs/reference/api/events/loaded.md): Smootify is loaded: the API answers, the session, the market and the cart are known (once per page)
- [smootify:product_loaded](https://www.smootify.io/docs/reference/api/events/product-loaded.md): a product was loaded; null for an id that is not published on the Headless channel or in the market
- [smootify:product_expired_load](https://www.smootify.io/docs/reference/api/events/product-expired-load.md): a product shown from the cache changed on Shopify: this is the fresh one
- [smootify:loadedAdditionalVariants](https://www.smootify.io/docs/reference/api/events/loadedadditionalvariants.md): the product page's product with every variant, when it has more than 250
- [smootify:added_to_cart](https://www.smootify.io/docs/reference/api/events/added-to-cart.md): lines were added, after the cart came back: once per add to cart, a product with its add-ons included (the main line first); when the add-ons fail, the main line that went in alone
- [smootify:removed_from_cart](https://www.smootify.io/docs/reference/api/events/removed-from-cart.md): the ids of the removed lines
- [smootify:cart_updated](https://www.smootify.io/docs/reference/api/events/cart-updated.md): every change of the cart, the first load included
- [smootify:errors](https://www.smootify.io/docs/reference/api/events/errors.md): Shopify's errors of a cart operation, or the error a filter threw
- [smootify:initiate_checkout](https://www.smootify.io/docs/reference/api/events/initiate-checkout.md): the visitor goes to checkout
- [smootify:user_auth_change](https://www.smootify.io/docs/reference/api/events/user-auth-change.md): the session is known or changed: the customer, null for a guest
- [smootify:filter_initial_change](https://www.smootify.io/docs/reference/api/events/filter-initial-change.md): a filter Search & Discovery applied from `selected-value` or the url, before the first search
- [smootify:filter_changed](https://www.smootify.io/docs/reference/api/events/filter-changed.md): the visitor changed a filter (`name: "query"` for the search text)
- [smootify:sort_changed](https://www.smootify.io/docs/reference/api/events/sort-changed.md): The smootify:sort_changed event.
- [smootify:changed_option](https://www.smootify.io/docs/reference/api/events/changed-option.md): the visitor changed an option of a product (not at the first render)
- [smootify:changed_country](https://www.smootify.io/docs/reference/api/events/changed-country.md): The smootify:changed_country event.
- [smootify:created_address](https://www.smootify.io/docs/reference/api/events/created-address.md): a `create-address` form saved an address
- [smootify:wishlist:changed_variant](https://www.smootify.io/docs/reference/api/events/wishlist-changed-variant.md): `wishlist-toggle[data-use-variants]`: the toggle follows another variant
- [smootify:wishlist:changed_variant_state](https://www.smootify.io/docs/reference/api/events/wishlist-changed-variant-state.md): The smootify:wishlist:changed_variant_state event.
- [smootify:wishlist:changed_product](https://www.smootify.io/docs/reference/api/events/wishlist-changed-product.md): The smootify:wishlist:changed_product event.
- [smootify:wishlist:changed_product_state](https://www.smootify.io/docs/reference/api/events/wishlist-changed-product-state.md): the visitor added (`active`) or removed a product
- [smootify:color_patterns](https://www.smootify.io/docs/reference/api/events/color-patterns.md): 1.x only: 2.0 has no global color patterns and never dispatches it
- [smootify:cart_opened](https://www.smootify.io/docs/reference/api/events/cart-opened.md): a mini cart (dialog, details, dropdown, popover, custom) opened
- [smootify:cart_closed](https://www.smootify.io/docs/reference/api/events/cart-closed.md): The smootify:cart_closed event.
- [smootify:consent_changed](https://www.smootify.io/docs/reference/api/events/consent-changed.md): the visitor's consent once it is known on the page, then at every change
- [smootify:variant_changed](https://www.smootify.io/docs/reference/api/events/variant-changed.md): a product's variant changed after its first render (`element` is the product on the page)
- [add_to_cart_lines](https://www.smootify.io/docs/reference/api/filters/add-to-cart-lines.md): The lines about to be added to the cart: the add to cart forms (the main line and its add-ons at once), boxes, direct add, buy again, `addToCart`, `addBoxToCart` and `/cart/add.js`. The message of an error a filter throws shows in the form and goes out with `smootify:errors`.
- [checkout_url](https://www.smootify.io/docs/reference/api/filters/checkout-url.md): Where the visitor goes to check out: the checkout url (or the invoice of a draft order), from the cart's checkout button, a buy now or `Smootify.checkout()`. Answer another url (parameters added, another checkout) or `false` to keep the visitor here (terms not accepted, a minimum order); the message of an error a filter throws shows in the cart. `smootify:initiate_checkout` goes out only when the visitor leaves.
- [draft_order_data](https://www.smootify.io/docs/reference/api/filters/draft-order-data.md): The draft order about to be created (Draft Orders, server plan): a quote, or a checkout or buy now with a custom price. An error a filter throws shows in the cart or the form.
- [metafield_definitions](https://www.smootify.io/docs/reference/api/filters/metafield-definitions.md): The metafields the products and the cart ask Shopify for, for each kind of `[metafield]` element on the page (add the ones a script reads, remove the ones nobody shows). Synchronous: it cannot stop, and an error it throws is logged and the filter skipped.
- [Options](https://www.smootify.io/docs/reference/options.md): SmootifyUserOptions, the label globals and the page hooks, with their 2.0 defaults.
- [State classes](https://www.smootify.io/docs/reference/state-classes.md): The classes Smootify toggles on products, variants and the cart, to style each state in Webflow.
- [Metafield types](https://www.smootify.io/docs/reference/metafield-types.md): The Shopify metafield types a [metafield] element renders in Smootify 2.0.
- [Cart attributes](https://www.smootify.io/docs/reference/cart-attributes.md): What the fields of your forms save on the cart line and on the order.
- [AJAX API](https://www.smootify.io/docs/reference/ajax-api.md): The Shopify theme AJAX endpoints Smootify 2.0 answers on a Webflow page.

## Developers and agents

- [Markup contract](https://www.smootify.io/developers/markup-contract): every element and attribute a Smootify 2.0 build uses
- [Smootify MCP](https://www.smootify.io/developers/mcp): the MCP server (beta) an agent calls to look up elements and attributes, check markup before it reaches Webflow and audit published pages; read only
- [Skills](https://www.smootify.io/skills): 5 skills for AI agents, published at https://github.com/smootify/skills
- [Figma annotation skill](https://www.smootify.io/skills/figma-annotate)
- [Figma to Webflow skill](https://www.smootify.io/skills/figma-to-webflow)
- [Site audit skill](https://www.smootify.io/skills/site-audit)
- [Iterate skill](https://www.smootify.io/skills/iterate)
- [Custom script skill](https://www.smootify.io/skills/custom-script)

## Features

- [All features](https://www.smootify.io/features): what every plan includes, Free too
- [Products and collections](https://www.smootify.io/features/product-and-collections): Product pages and collections, straight from Shopify.
- [Search and filters](https://www.smootify.io/features/search-filters): Search and filters on the whole catalog.
- [Cart](https://www.smootify.io/features/cart): A cart that adds to the order.
- [Customer accounts](https://www.smootify.io/features/customer-accounts): Customer accounts in your own design.
- [Internationalization](https://www.smootify.io/features/internationalization): Every market, in the right language and currency.
- [Analytics](https://www.smootify.io/features/analytics): Every pixel, and no data without consent.
- [Metaobjects](https://www.smootify.io/features/metaobjects): Metaobjects in, metaobjects out.

## Add-ons

- [All add-ons](https://www.smootify.io/add-ons): 17 add-ons included in the plan: 9 on every plan, 8 on the Server plan
- [Booking](https://www.smootify.io/add-ons/booking): Time slots booked from a calendar you design: appointments, paid sessions, pickup and delivery windows. (Server plan)
- [Product configurator](https://www.smootify.io/add-ons/product-configurator): Prices calculated live from the options, quantities and formulas you set. (Server plan)
- [Name your price](https://www.smootify.io/add-ons/name-your-price): The customer sets the amount they pay, inside the limits you give. (Server plan)
- [Draft orders](https://www.smootify.io/add-ons/draft-orders): Quote requests from the store, answered from your Shopify admin. (Server plan)
- [Magic box](https://www.smootify.io/add-ons/magic-box): Mix and match bundles: the customer builds the box from the products you choose. (every plan, Free included)
- [Magic add-ons](https://www.smootify.io/add-ons/magic-add-ons): Extras attached to a product, with their own titles and images at checkout. (every plan, Free included)
- [Cart upsell](https://www.smootify.io/add-ons/cart-upsell): Shopify’s free complementary products, shown in your Webflow cart. (every plan, Free included)
- [Metaobject creator](https://www.smootify.io/add-ons/metaobject-creator): Webflow forms that create Shopify metaobjects, with no manual entry in the admin. (Server plan)
- [Customer metafield editor](https://www.smootify.io/add-ons/customer-metafield-editor): Let customers edit their own profile fields, stored as Shopify metafields. (Server plan)
- [Newsletter subscription](https://www.smootify.io/add-ons/newsletter-subscription): A newsletter form designed in Webflow that subscribes the customer in Shopify. (Server plan)
- [Product file upload](https://www.smootify.io/add-ons/product-file-upload): Shopify’s own file upload on the product, designed in Webflow, with the file managed from your admin. (Server plan)
- [Dynamic properties](https://www.smootify.io/add-ons/dynamic-properties): Show or hide add-to-cart inputs from Shopify metaobjects, when conditional visibility is not enough. (every plan, Free included)
- [Predictive search](https://www.smootify.io/add-ons/predictive-search): Shopify’s own predictive search, free, designed pixel by pixel in Webflow. (every plan, Free included)
- [Search and discovery](https://www.smootify.io/add-ons/search-discovery): Filters, synonyms, boosts and recommendations from Shopify’s free Search and Discovery app. (every plan, Free included)
- [Store locator](https://www.smootify.io/add-ons/store-locator): Your stores, dealers and distributors on one Mapbox map. (every plan, Free included)
- [Last viewed](https://www.smootify.io/add-ons/last-viewed): The products a customer looked at recently, one click away. (every plan, Free included)
- [Wishlist](https://www.smootify.io/add-ons/wishlist): A wishlist you design yourself, saved for guests and account holders. (every plan, Free included)

## Shopify Flows

- [Shopify Flows](https://www.smootify.io/flows): automations for Smootify stores, trigger to action
- [Quote request notification](https://www.smootify.io/flows/draft-order-notification): Every time a customer sends the cart as a quote request, you get an email.
- [Back in stock](https://www.smootify.io/flows/back-in-stock): A shopper leaves an email on a sold-out variant, and Shopify writes to them when it is back.
- [Price drop alert](https://www.smootify.io/flows/price-drop): A shopper asks to be told when a variant costs less, and Shopify tells them when it does.
- [Waitlist for a new product](https://www.smootify.io/flows/waitlist): Shoppers sign up for something that is not out yet, and hear from you the day it is.
- [Review request after delivery](https://www.smootify.io/flows/review-request): A few days after an order is fulfilled, the customer gets a link to review what they bought on your site.
- [Review moderation notice](https://www.smootify.io/flows/review-moderation): When a new review comes in as a draft, you get told there is one to approve.
- [Product rating from your reviews](https://www.smootify.io/flows/review-rating): Every night Shopify Flow adds the newly approved reviews to each product’s average rating and review count, ready for the stars on your site.
- [Empty box subscription inventory](https://www.smootify.io/flows/empty-box-inventory): On every order of an empty-box subscription, Flow reads the chosen variants from the line and takes them off stock.
- [Store credit on a paid order](https://www.smootify.io/flows/store-credit): Shopify Flow gives the customer store credit when they pay an order, takes it back if the order is cancelled, and your site shows the balance.
- [Product questions and answers](https://www.smootify.io/flows/product-questions): A question asked on a product page reaches you by email and joins the product’s list; once you answer it and make it active, Shopify Flow tells the customer who asked.
- [Gift list link](https://www.smootify.io/flows/gift-list): When a customer creates a gift list with a form, Shopify Flow emails them the link to share it, and tells you.
- [Gift list: count the gifts](https://www.smootify.io/flows/gift-list-gifts): When an order is paid, Shopify Flow adds the units bought from a gift list to the list, so its page shows “2 of 6 gifted” and closes what is complete.
- [Gift card at any amount](https://www.smootify.io/flows/gift-card-any-amount): The customer chooses the amount of a gift and who receives it; once the order is paid, Shopify Flow creates a Shopify gift card of that amount for the recipient, and Shopify emails them the code with the message.
- [EU withdrawal request](https://www.smootify.io/flows/eu-withdrawal-request): A customer withdraws from the contract with a form on your site; Shopify Flow sends them at once the acknowledgement of receipt the EU rule asks for, with what they sent and the time it was received, then marks the order and tells your shop.
- [Sample request to draft order](https://www.smootify.io/flows/sample-request): A sample request sent from your site becomes a free draft order for the customer and their company, and your sales team is told on Slack to review it before shipping.
- [Customer photos, approved](https://www.smootify.io/flows/customer-photos): Once a day, the customer photos you approved join their product’s gallery, and each customer who sent one gets store credit.
- [Trade registration](https://www.smootify.io/flows/trade-registration): A trade application sent from your site tags the customer as pending and reaches your sales team on Slack; when you approve them with a tag, Shopify Flow tells them their trade account is active.
- [Referral with store credit](https://www.smootify.io/flows/referral): Every new customer gets a personal 10% code to give to friends; when a friend pays their first order with it, the customer who shared it gets store credit.
- [Support request to the right team](https://www.smootify.io/flows/support-request): A support request sent from the customer account, with the order number and photos, reaches the right team on Slack by topic, and the customer gets a confirmation with a request number.
- [Custom quote to draft order](https://www.smootify.io/flows/custom-quote): A made-to-measure request sent from your site, with sizes, material and drawings, becomes a draft order with a custom line for the customer: you set the price and send the invoice from Shopify.
- [Confirm the slots booked with Smootify](https://www.smootify.io/flows/confirm-booking): When an order is placed, Shopify Flow confirms the time slots it holds and saves each booking with the order and the customer.
- [Give back the slots of a cancelled order](https://www.smootify.io/flows/release-booking): When an order is cancelled, Shopify Flow frees the places of its time slots and marks its bookings as cancelled.

## Solutions

- [Made to order](https://www.smootify.io/solutions/made-to-order): Made to order, priced as it is built.
- [B2B and wholesale](https://www.smootify.io/solutions/b2b-wholesale): Quotes, not a contact form.
- [Boxes and subscriptions](https://www.smootify.io/solutions/subscription-boxes): Why a build-your-own box cannot be a subscription.
- [Multi-market](https://www.smootify.io/solutions/multi-market): One design, every market.
- [Fashion and apparel](https://www.smootify.io/solutions/fashion-and-apparel): Every color and size, without an app for each.
- [Food and beverage](https://www.smootify.io/solutions/food-and-beverage): Boxes, subscriptions and the price per kilo.
- [Furniture and interiors](https://www.smootify.io/solutions/furniture-and-interiors): Made to measure, priced on the page.
- [Beauty and cosmetics](https://www.smootify.io/solutions/beauty-and-cosmetics): Shades, refills and reviews that stay yours.
- [Print on demand](https://www.smootify.io/solutions/print-on-demand): Artwork in, price out.
- [Electronics and tech](https://www.smootify.io/solutions/electronics-and-tech): Specs, accessories and the warranty card.

## Compare

- [Smootify vs Shopify Plus and a theme](https://www.smootify.io/compare/shopify-plus): Not for calculated prices, quotes or build-your-own bundles: with Smootify they run on Shopify Basic, Grow and Advanced, the prices and quotes through a draft order and the bundles merged at checkout. Shopify Plus starts at $2,300 a month on a 3-year term; Shopify Basic, a Webflow Basic site plan and the Smootify Server plan come to $113 a month. Every number here can be checked on the pricing pages.
- [Smootify vs a Shopify theme and apps](https://www.smootify.io/compare/shopify-apps): Smootify replaces the apps a theme needs for bookings, calculated prices, quotes, bundles, file uploads and forms with 17 add-ons in one Shopify app, billed on the same Shopify invoice. The Server plan, which includes all of them, costs $49 a month; below, each app it replaces is priced at its first paid plan.
- [Smootify vs Webflow Ecommerce](https://www.smootify.io/compare/webflow-ecommerce): With Smootify you keep designing in Webflow while Shopify runs products, checkout and orders, so you need a Webflow site plan instead of an Ecommerce plan. A Webflow Basic site plan, Shopify Basic and Smootify Lite cost $83 a month, against $84 for Webflow Ecommerce Plus, and the store gets the Shopify checkout, marketplaces, POS and Shopify apps.

## Guides

- [Guides](https://www.smootify.io/guides): Smootify 2.0, one job each from start to finish
- [From a template to a live store](https://www.smootify.io/guides/template-to-live-store.md): Clone the Smootify starter or another 2.0 template, connect your Shopify store, bring in your products and publish on your own domain, with the check that tells you each step worked.
- [Move a 1.x site to 2.0 with your agent](https://www.smootify.io/guides/move-from-1x-with-an-agent.md): Let your agent read the 1.x site with the Smootify MCP and list what to change on each page, switch on your .webflow.io address, fix what it found, check, then go live.
- [From Figma to a store with the skills and the MCP](https://www.smootify.io/guides/figma-to-store-with-an-agent.md): Your agent annotates the Figma file, you review it, the agent builds it in Webflow with Smootify's markup, checks it, and you connect Shopify and publish.
- [A custom script with Smootify Studio](https://www.smootify.io/guides/custom-script-with-studio.md): When a site needs something no Smootify element does, Smootify Studio gives it a script folder and Claude writes the script with Smootify's conventions. Try it on the real site, build it, put it on the site.
- [Video tutorials (1.x)](https://www.smootify.io/guides/v1): 32 videos recorded on Smootify 1.x, for 1.x projects

## Tips

- [Tips](https://www.smootify.io/tips): one problem per page: the symptom, why, the fix
- [A product page shows nothing](https://www.smootify.io/tips/product-not-showing.md): The product is not published to your Headless storefront's sales channel, or not sold in the visitor's market.
- [Customers get no order confirmation email](https://www.smootify.io/tips/no-order-email.md): The project still uses the test token the Smootify app created; use the public token of your Headless storefront.
- [Every site needs the cookie banner](https://www.smootify.io/tips/cookie-banner-everywhere.md): Smootify does not add Shopify's banner; build smootify-consent in a component every page uses, even if you do not sell in Europe.
- [Keep each pixel in one place](https://www.smootify.io/tips/pixels-in-one-place.md): Set Meta, Google and TikTok in SmootifyUserOptions.analytics and remove them from Webflow's integrations and your custom code, so each waits for the visitor's consent.
- [Links to products open a 404 page](https://www.smootify.io/tips/links-open-404.md): Your template pages do not use Smootify's default URLs, /products/, /collections/ and /vendors/: set productsBase, collectionsBase and vendorsBase.
- [Open the debugger on a phone](https://www.smootify.io/tips/debugger-on-phone.md): On your .webflow.io address, add ?smootify-debug to the page's address; on a computer, press Alt+Shift+D.
- [The CMS sync reports a conflict](https://www.smootify.io/tips/cms-sync-conflict.md): Your .webflow.io address and your custom domain were published at different times; publish both, then sync again.
- [Color swatches show no color](https://www.smootify.io/tips/swatches-without-colour.md): The Color option was created first and linked to the Color field afterwards; Shopify leaves its swatches empty until you create it again from the field.
- [A Webflow Button is a link](https://www.smootify.io/tips/button-is-a-link.md): Webflow's Button element publishes a link, so attributes that need a real button, such as data-action, need a Custom element with the tag button.
- [Nothing shimmers while the page loads](https://www.smootify.io/tips/nothing-shimmers.md): Smootify 2.0 has no automatic placeholders; add a skeleton attribute where you want one.
- [Exact search inside a big collection](https://www.smootify.io/tips/search-in-a-collection.md): Give the collection's products a tag and set data-tag on the block, so the search and its filters cover only those products.
- [Page numbers do not show on a collection](https://www.smootify.io/tips/page-numbers-hidden.md): Turn on the Availability filter in Shopify's Search & Discovery app; Smootify counts the products of a collection from it.
- [Login works on .webflow.io and fails on your domain](https://www.smootify.io/tips/login-fails-live.md): The live address is missing from the Customer Account API settings of your Headless storefront.
- [A form saves nothing after you copied it](https://www.smootify.io/tips/form-names-after-paste.md): Webflow renames form fields when you paste them; each field's Name must match a key of the metaobject definition exactly.
- [A Shopify app's snippet stops working](https://www.smootify.io/tips/app-snippet-stops-working.md): A plain script runs before Smootify has loaded; change its type to smootify-load so it runs right after.

## Glossary

- [Glossary](https://www.smootify.io/glossary): Shopify and headless terms, one question each
- [What is a product in Shopify?](https://www.smootify.io/glossary/product.md): The thing you sell, with what all its versions share (title, description, photos, vendor), while each version the customer can buy is a variant with its own price, SKU and stock.
- [What is a product option in Shopify, and how is it different from a variant?](https://www.smootify.io/glossary/option.md): An option is a choice the customer makes, such as Color or Size, with its values; a variant is one combination of those values, the version that is actually bought, with its own price, SKU and stock.
- [What is a variant in Shopify?](https://www.smootify.io/glossary/variant.md): One version of a product that a customer can buy, such as the Sand shirt in size M, with its own price, compare-at price, SKU, barcode, stock, weight and image.
- [What is a collection in Shopify, and why is it not a Webflow collection?](https://www.smootify.io/glossary/collection.md): A group of products, such as "Summer" or "Shirts", either picked by hand (manual) or filled by rules such as a tag or a price (automated); a Webflow collection is something else, a type of CMS content.
- [What is a handle in Shopify?](https://www.smootify.io/glossary/handle.md): The URL name of a product or a collection, such as linen-shirt in /products/linen-shirt: lowercase, unique, made from the title when the item is created, and on a Smootify site the same as the Webflow slug.
- [What are the vendor and the product type in Shopify?](https://www.smootify.io/glossary/vendor.md): Two free text fields of every product: the vendor is the brand or maker, the product type is your own kind of product, such as Shirt; both are used to filter, to group products and to build automated collections.
- [What are tags in Shopify?](https://www.smootify.io/glossary/tags.md): Free labels you put on products, customers and orders, such as vip or linen, that customers do not see unless you show them: Shopify uses them for automated collections, filters, segments and Flow.
- [How does inventory work in Shopify?](https://www.smootify.io/glossary/inventory.md): Each variant has its own stock, counted per location; Shopify can track it or not, and can keep selling when it reaches zero, which decides whether the variant shows as available.
- [What are Shopify's native swatches?](https://www.smootify.io/glossary/swatch.md): A color or an image attached to an option value, such as a sand-coloured dot for Sand, set in Shopify by linking the option to a category field such as Color; storefronts show it in place of the value's name.
- [What is a product category in Shopify?](https://www.smootify.io/glossary/product-category.md): The kind of product chosen from Shopify's standard list, such as Apparel › Shirts, which gives the product its category fields (color, size, material) and helps taxes and marketplaces read it.
- [What is a bundle in Shopify?](https://www.smootify.io/glossary/bundle.md): Several products sold together as one item; a fixed bundle, made with Shopify's free Bundles app, is a set you decide, with the stock taken from each product in it.
- [What is a Shopify metafield?](https://www.smootify.io/glossary/metafield.md): A custom field you add to a Shopify resource, such as a product, a variant, a collection or a customer, to keep information Shopify has no field for.
- [What is a Shopify metaobject?](https://www.smootify.io/glossary/metaobject.md): A content type you define in Shopify, with its own fields, whose entries stand on their own or are linked from metafields: a designer, a size chart, a store review.
- [What is a sales channel in Shopify?](https://www.smootify.io/glossary/sales-channel.md): A place where the store sells, such as the Online Store, the Shop app, Instagram or a headless site; a product or a collection shows up in a channel only when it is published to it.
- [What do Active, Draft and Archived mean on a Shopify product?](https://www.smootify.io/glossary/product-status.md): The status of a product: Active is on sale in the channels it is published to, Draft is a work in progress no customer sees, Archived is a product you stopped selling but keep for its history.
- [What is Shopify's Online Store, and do I need it with Smootify?](https://www.smootify.io/glossary/online-store.md): Shopify's own storefront, built with a theme at yourstore.myshopify.com; a Smootify store does not use it, because the Webflow site is the storefront, but its address keeps working unless you redirect it.
- [What is headless commerce?](https://www.smootify.io/glossary/headless-commerce.md): A store split in two: the back end keeps the products, the orders and the checkout, and the storefront customers see is built with any tool and reads the back end through an API.
- [What is Shopify's Storefront API?](https://www.smootify.io/glossary/storefront-api.md): Shopify's public API for storefronts: it reads products, collections and prices for the visitor's market and handles carts and customer accounts, with a token that is safe to put in a web page.
- [What is a market in Shopify?](https://www.smootify.io/glossary/market.md): A country, or a group of countries, a Shopify store sells to with its own settings: currency, prices, languages, domain and which products are available.
- [What is the compare-at price in Shopify?](https://www.smootify.io/glossary/compare-at-price.md): The original price shown crossed out next to the price, such as $45 next to $32, set on each variant; Shopify charges the price, never the compare-at price.
- [How do discounts work in Shopify?](https://www.smootify.io/glossary/discount.md): A price reduction set in Shopify, either a code the customer types or an automatic discount that applies itself; it can take an amount or a percentage off products or the order, give free shipping, or offer buy X get Y.
- [How does Shopify handle taxes, and why do my prices include them or not?](https://www.smootify.io/glossary/taxes.md): Shopify works out the taxes of every order from the store's settings, and each market decides whether the prices shown include tax, as in Europe, or add it at checkout, as in the United States.
- [What is a unit price in Shopify?](https://www.smootify.io/glossary/unit-price.md): The price per reference quantity, such as €1.50 per 100 g, shown next to the price where the law asks for it; it is set on each variant from its total quantity and a reference unit.
- [How do gift cards work in Shopify?](https://www.smootify.io/glossary/gift-card.md): A product sold with one variant per amount; Shopify turns each sale into a code, emailed to the buyer or a recipient, that anyone can spend at checkout.
- [What is store credit in Shopify?](https://www.smootify.io/glossary/store-credit.md): Money a store puts on a customer's account, such as a refund or a loyalty reward, which the customer spends at checkout; it needs Shopify's new customer accounts.
- [What is a selling plan in Shopify?](https://www.smootify.io/glossary/selling-plan.md): A way to sell a product other than as a one-time purchase, such as a subscription every two weeks or a pre-order, set up by an app and attached to the product.
- [Where does the cart live on a Smootify store, and what can it carry?](https://www.smootify.io/glossary/cart.md): The cart is kept by Shopify, not by the site: its lines (variant, quantity, properties), the order note, cart attributes and discount codes all travel with it to checkout and end up in the order.
- [What is the Shopify checkout, and can I design it in Webflow?](https://www.smootify.io/glossary/checkout.md): The pages where the customer pays, hosted by Shopify on a sub-domain of your store such as store.example.com; you style it in Shopify's checkout editor, not in Webflow, and deeper changes need Shopify Plus.
- [What happens to an order in Shopify after the customer pays?](https://www.smootify.io/glossary/order.md): Shopify creates the order at the end of checkout, with a payment status (paid, refunded…) and a fulfillment status (unfulfilled until you ship); fulfilling means packing and sending it, with tracking.
- [What is a draft order in Shopify?](https://www.smootify.io/glossary/draft-order.md): An order the store creates instead of the checkout, with the prices and discounts the store sets, which the customer pays through an invoice link.
- [What is a location in Shopify?](https://www.smootify.io/glossary/location.md): A place where the store keeps stock and fulfills orders, such as a warehouse or a shop; stock is counted per location, and a location can offer local pickup.
- [How do customer accounts work in Shopify?](https://www.smootify.io/glossary/customer-account.md): Customers log in with a one-time code Shopify emails them, with no password, through Shopify's new customer accounts; the classic accounts with passwords are deprecated.
- [What is a company in Shopify B2B?](https://www.smootify.io/glossary/b2b-company.md): A business customer with its locations, the people who buy for it and its own catalog of prices, quantity rules and payment terms; it is how Shopify sells wholesale from the same store.
- [Which Shopify plan does a Smootify store need?](https://www.smootify.io/glossary/shopify-plan.md): Shopify's monthly subscription for the store (Starter, Basic, Grow, Advanced, Plus); Smootify works from Basic up, because the Starter plan cannot use the Headless channel, and Smootify's own plan is billed on the same Shopify invoice.
- [What is a Shopify development store?](https://www.smootify.io/glossary/development-store.md): A free store an agency or freelancer creates from a Shopify Partner account to build a client's store; it cannot take real orders, and when the store is ready its ownership is transferred to the client, who picks a plan.
- [Do Shopify apps work on a Webflow site with Smootify?](https://www.smootify.io/glossary/shopify-app.md): Apps add features to a Shopify store; those that work in the admin or at checkout need nothing on the site, those with widgets for any website work with their code, and those written for Shopify themes may need a few changes.
- [What is Shopify Flow?](https://www.smootify.io/glossary/shopify-flow.md): Shopify's free automation app: a workflow starts on an event, such as an order paid or a metaobject entry created, checks conditions, and takes actions such as tagging a customer or sending an email.
- [What is a cart transform in Shopify?](https://www.smootify.io/glossary/cart-transform.md): A Shopify Function that changes the lines of a cart before checkout, such as merging several products into one bundle line, or expanding one line into the products it is made of.

## Case studies

- [Case studies](https://www.smootify.io/case-studies): stores built with Smootify by agencies and freelancers
- [A headless store with a lot of personality, for a beef tallow chips brand](https://www.smootify.io/case-studies/tasty-nates): Figma, Webflow, Smootify and Shopify behind a playful snack store: 3D product, animated illustrations, bundles and a monthly subscription.
- [Brand, 3D and a modular Webflow store for a flip phone](https://www.smootify.io/case-studies/wonder-phone): A full build from identity to launch: 3D renders, a Webflow site with Shopify products, inventory and checkout synced through Smootify, and a Mapbox store finder.
- [Three times faster, and much cleaner, for a slow fashion brand](https://www.smootify.io/case-studies/wetheknot): From a slow WooCommerce shop to Webflow and Shopify connected by Smootify: load time from 4.0 to 1.1 seconds, and CO2 per visit down from 1.74 to 0.19 g.
- [A Webflow and Shopify store for a social impact label](https://www.smootify.io/case-studies/gelukszoekers): Storytelling and eco merch for refugee causes: a Webflow campaign site with a Shopify shop connected through Smootify, easy for the team to update.
- [A pickleball brand and its store, built from scratch](https://www.smootify.io/case-studies/pickleforce): Branding, then a headless Shopify storefront in Webflow with Smootify: logo, type, palette and a store for performance hats.

## Changelog and news

- [Changelog](https://www.smootify.io/changelog)
- [Smootify 2.0 release notes](https://www.smootify.io/changelog/2-0): 2.0 is in public beta; what is new, the breaking changes with what to do, the bug fixes
- [Blog](https://www.smootify.io/blog)
- [Status](https://www.smootify.io/status)

## Optional

- [Showcase](https://www.smootify.io/showcase)
- [Smootify Experts](https://www.smootify.io/experts)
- [Agency by Eclipse](https://www.smootify.io/agency)
- [For agencies](https://www.smootify.io/agencies)
- [Affiliates](https://www.smootify.io/affiliates)
- [Community](https://www.smootify.io/community)
- ["Smootify 2.0: the whole store, in your Webflow design"](https://www.smootify.io/blog/smootify-2-0): 2026-10-13
- [The Smootify Website Checker — a free Claude skill](https://www.smootify.io/blog/the-smootify-website-checker-a-free-claude-skill): 2026-05-05, written for Smootify 1.x
- [AI-ready documentation](https://www.smootify.io/blog/ai-ready-documentation): 2026-05-03, written for Smootify 1.x
- [Say hello to Smootify Icons](https://www.smootify.io/blog/say-hello-to-smootify-icons): 2025-09-03, written for Smootify 1.x
- [Webflow Awards Finalist - Tech Partner of the Year](https://www.smootify.io/blog/webflow-awards-finalist---tech-partner-of-the-year): 2025-09-01, written for Smootify 1.x
- [New Studio Services](https://www.smootify.io/blog/new-studio-services): 2025-07-16, written for Smootify 1.x
- [New Smootify Starter Project](https://www.smootify.io/blog/new-smootify-starter-project): 2025-04-17, written for Smootify 1.x
- [Product Configurator Add-on](https://www.smootify.io/blog/product-configurator): 2025-03-27, written for Smootify 1.x
- [New Premium Template: Volt](https://www.smootify.io/blog/new-premium-template-volt): 2025-03-27, written for Smootify 1.x
- [5 new add-ons](https://www.smootify.io/blog/5-new-add-ons): 2025-03-27, written for Smootify 1.x
- [Power-up your cart!](https://www.smootify.io/blog/power-up-your-cart): 2025-02-05, written for Smootify 1.x
- [New Server Add-ons](https://www.smootify.io/blog/new-server-add-ons): 2025-02-03, written for Smootify 1.x
- [New Premium Template: Naturelle](https://www.smootify.io/blog/new-premium-template-naturelle): 2025-01-13, written for Smootify 1.x
- [Magic Add-ons](https://www.smootify.io/blog/magic-add-ons): 2024-12-06, written for Smootify 1.x
- [Smootify Certified Partners](https://www.smootify.io/blog/smootify-certified-partners): 2024-11-14, written for Smootify 1.x
- [Wishlist Add-on](https://www.smootify.io/blog/wishlist-add-on): 2024-11-04, written for Smootify 1.x
- [Magic Box Add-on](https://www.smootify.io/blog/magic-box-add-on): 2024-11-04, written for Smootify 1.x
- [Smootify Academy](https://www.smootify.io/blog/smootify-academy): 2024-10-24, written for Smootify 1.x
- [Smootify Integrations](https://www.smootify.io/blog/smootify-integrations): 2024-10-21, written for Smootify 1.x
- [Judge.me integration](https://www.smootify.io/blog/judge-me-integration): 2024-10-04, written for Smootify 1.x
- [Share your feedback](https://www.smootify.io/blog/share-your-feedback): 2024-09-20, written for Smootify 1.x
- [Introducing our AI Assistant](https://www.smootify.io/blog/introducing-our-ai-assistant): 2024-09-16, written for Smootify 1.x
- [New FREE template: Reciklo](https://www.smootify.io/blog/new-template-reciklo): 2024-08-23, written for Smootify 1.x
- [New video tutorials](https://www.smootify.io/blog/new-video-tutorials): 2024-08-05, written for Smootify 1.x
- [Discover our new Server Add-ons](https://www.smootify.io/blog/discover-our-new-server-add-ons): 2024-07-23, written for Smootify 1.x
- [Introducing the Official Smootify Shopify App!](https://www.smootify.io/blog/introducing-the-official-smootify-shopify-app): 2024-07-22, written for Smootify 1.x
- [Store Locator Add-on](https://www.smootify.io/blog/store-locator-add-on): 2024-07-03, written for Smootify 1.x
- [Smootify - Relume Library](https://www.smootify.io/blog/smootify-relume-library): 2024-07-01, written for Smootify 1.x
- [New FREE Template: Noise](https://www.smootify.io/blog/new-free-template-noise): 2024-06-24, written for Smootify 1.x
- [Smootify <> Client-First Webflow Style System](https://www.smootify.io/blog/smootify---client-first-webflow-style-system): 2024-06-12, written for Smootify 1.x
- [Theme and Domain, new video!](https://www.smootify.io/blog/theme-and-domain-new-video): 2024-06-03, written for Smootify 1.x
- [Product Options & Custom properties, new video!](https://www.smootify.io/blog/product-options-custom-properties-new-video): 2024-06-03, written for Smootify 1.x
- [Account Pages, new video!](https://www.smootify.io/blog/account-pages-new-video): 2024-06-03, written for Smootify 1.x
- [New version \[0.0.23\]](https://www.smootify.io/blog/new-version-0-023): 2024-05-31, written for Smootify 1.x
- [New Features Page](https://www.smootify.io/blog/new-features-page): 2024-04-24, written for Smootify 1.x
- [New Free Template!](https://www.smootify.io/blog/new-free-template): 2024-04-03, written for Smootify 1.x
- [Smootify Add-ons - New video by PixelGeek](https://www.smootify.io/blog/smootify-add-ons-new-video-by-pixelgeek): 2024-03-25, written for Smootify 1.x
- [CMS Auto-Sync App is here!](https://www.smootify.io/blog/cms-auto-sync-app-is-here): 2024-03-21, written for Smootify 1.x
- [Cart upsell is here!](https://www.smootify.io/blog/cart-upsell-is-here): 2024-03-20, written for Smootify 1.x
- [Make money with Smootify!](https://www.smootify.io/blog/make-money-with-smootify): 2024-03-13, written for Smootify 1.x
- [Search & discovery add-on is here](https://www.smootify.io/blog/search-discovery-add-on-is-here): 2024-02-22, written for Smootify 1.x
- [Multi-currency is here](https://www.smootify.io/blog/multi-currency-is-here): 2024-02-21, written for Smootify 1.x
- [Shopify Subscriptions App is now supported!](https://www.smootify.io/blog/shopify-subscriptions-are-now-available): 2024-02-18, written for Smootify 1.x
- [Search & discovery Add-on](https://www.smootify.io/blog/search-discovery-add-on): 2024-02-13, written for Smootify 1.x
- [Desktop Sync App](https://www.smootify.io/blog/desktop-sync-app): 2024-02-13, written for Smootify 1.x
- [Cart Upsell Add-on](https://www.smootify.io/blog/cart-upsell-add-on): 2024-02-13, written for Smootify 1.x
- [Early Access for a limited time](https://www.smootify.io/blog/early-access-for-a-limited-time): 2024-02-12, written for Smootify 1.x
- [The Official Webflow App is here.](https://www.smootify.io/blog/the-official-webflow-app-is-here): 2024-02-09, written for Smootify 1.x