The kit your agent starts from.

Lucide icons, 20×20, colour bound to the text token.

Primary and secondary, two sizes, with the loading state.

• Default
• Hover
• Focus
• Loading
• Disabled

Icon-only button: close, wishlist, arrows.

• Default
• Focus
• Disabled

Icon with an optional counter, for the cart and the wishlist.

The text input used in every form.

• Default
• Focus
• Filled
• Error
• Disabled

Native select.

• Default
• Focus
• Error
• Disabled

Order notes and messages.

• Default
• Focus
• Filled
• Disabled

Webflow checkbox.

• Not selected
• Selected
• Focus
• Disabled

Webflow radio.

• Not selected
• Selected
• Focus
• Disabled

Webflow dropdown.

• Closed
• Open

Webflow popover.

• Closed
• Open

Webflow tab link.

• Default
• Current

Grey image placeholder.

Backdrop behind drawers and dialogs.

• Closed
• Open

Prints a quote or an order.

The empty block for every list in the store.

• Cart
• Filters
• Search
• Orders
• Addresses
• Subscriptions
• Wishlist
• +1

The short messages Smootify shows after an action, one template per event.

• Added to cart
• Wishlist
• Message
• Error

Three layouts, each plain, with a form or with quick view.

• Grid
• Grid + form
• Grid + quick view
• Horizontal
• Horizontal + form
• Horizontal + quick view
• Mini
• +7

Single price, price range and compare-at price.

• Single
• Range
• Compare-at
• Default
• On sale
• Free

Shown only when its condition is true.

• Discount %
• New
• Sold out
• Last items
• Low stock
• Pre-order
• Subscription
• +1

Stars from Judge.me or from a metafield.

• Judge.me
• Metafield

The grid, with its result count and empty state.

• Count
• Results
• Empty

The filter panel as a drawer, a sidebar or a popover.

• Drawer
• Sidebar
• Popover
• Reset

Checkbox filter.

Radio filter.

Select filter.

Dropdown filter.

Popover filter.

Colour swatch filter.

Search inside the filters.

Price range filter.

A filter group and its values.

• Value
• Default
• Selected
• Zero count

Active filters above the grid, removable.

• Chip
• Default
• Preselected

Sorting in four forms.

• Dropdown
• Select
• Radio
• Popover

Previous and next, load more, or infinite scroll.

• Prev-next
• Load more
• Infinite
• Default
• Loading
• Hidden

The single buttons pagination is built from.

• Previous
• Next
• Load more
• Infinite scroll
• Default
• Disabled
• Loading

Sliders, thumbnails, lightbox and zoom, with video and 3D thumbnails.

• Slider
• Thumbs below
• Thumbs side
• Lightbox grid
• Zoom
• Video
• 3D
• +2

Title, vendor, price, description: a toggle for every field.

The stock message for each condition.

• In stock
• Many in stock
• Low stock
• Last one
• Sold out
• Pre-order
• Unavailable combination

Colour, image and text swatches, inline or in a popover.

• Color
• Image
• Text pill
• In popover

A single value, with unavailable still clickable.

• Color
• Image
• Text pill
• Default
• Selected
• Unavailable
• Focus

Variant pickers instead of swatches.

• Dropdown
• Popover
• Native select
• Closed
• Open

Quantity stepper with its limits.

• Default
• At minimum
• At maximum

The add to cart form, with every state drawn inside.

• Default
• Loading
• Sold out
• Unavailable
• Error

Reserves the space Shopify fills with Shop Pay.

Minimum, maximum and increments, often for B2B.

Pickup availability by store.

• Available
• Unavailable
• No pickup

Sign-up for a sold-out variant.

• Form
• Sent
• Error

The wishlist button.

• Empty
• Filled

Reserves the space for the Judge.me widget.

Metafields as text, lists, tabs or accordions.

What is inside a Shopify bundle.

Related, complementary and recently viewed products.

• Slider

How far the customer is from free shipping.

• X to go
• Reached

The cart itself, in every mount.

• Empty
• With items
• Error

A line, full or compact.

• Default
• Updating
• Removing

Subtotal, discounts, shipping and total.

• Row
• Discount
• Default
• Calculated at checkout

Discount codes and gift cards.

• Applied gift card
• Empty
• Loading
• Applied
• Error

Order note and custom fields.

Upsell cards: the only place for a direct-add button.

• Card
• Button
• Default
• Loading
• Unavailable

“Cart reserved for 14:59”.

The cart in quote mode, sent as a draft order.

• Button
• Request
• Loading
• Error
• Sent

Cart icon with the item count.

• Empty
• With items

Search as you type, with results and suggestions.

• Result
• Suggestion
• Empty
• With results
• No results

Sign-in link: Shopify hosts the login.

• Logged out
• Logged in

The header on every account page.

• Log out
• Default
• Loading

Order list with payment and fulfilment badges.

• Row
• Payment status
• Fulfillment status
• List
• Empty

Order detail with shipments and tracking.

• Line item
• Shipment
• Shipment status
• In transit
• Delivered
• Failed

Address book with create, edit and delete.

• Card
• Create form
• Edit form
• Delete confirmation
• List
• Empty
• Loading
• +2

Profile and newsletter preference.

• Newsletter
• Default
• Loading
• Saved
• Error

Search results, with the empty state.

• Results
• Empty

Every Shopify policy on one template.

• Privacy
• Refund
• Terms
• Shipping
• Subscription

Paid extras on the product, in five forms.

• Checkbox
• Select
• Dropdown
• Popover
• Swatch

The product and its extras, summed up.

Line item properties the customer fills in.

• Text
• Url
• Email
• Number
• Select
• Swatch
• Dropdown
• +2

One-time or subscribe, with the plans.

Subscriptions in the account: pause, cancel, resume.

• Contract
• Status
• Action
• Detail
• Active
• Paused
• Cancelled
• +2

Country and currency switcher.

• Currency

“Shopping from Italy? Prices in EUR.”

Pickup location chooser.

B2B company, store credit and transactions.

• Store credit
• Transaction

Custom customer fields, saved to Shopify.

• Default
• Loading
• Saved
• Error

The wishlist page.

• List
• Empty

A link to the wishlist that opens without an account.

• Default
• Copied
• Shared
• Empty

Map, search and store list, with the store row it shares with store availability.

• Store
• Default
• Active

Blog posts or any metaobject list.

• Card
• List
• Empty

The list named in the link, or the not found block.

• Default
• Not found

A product in a gift list: how many are gifted, and its add to cart.

• Available
• Gifted
• Sold out

Cookie banner wired to Shopify’s consent.

• Preferences link

Build-your-own box with progress and discount.

• Category
• Product
• Item
• Summary
• Current
• Completed
• In box

Newsletter sign-up.

• Default
• Loading
• Subscribed
• Error

Files attached to the order.

• File
• Empty
• Dragging
• Uploading
• Uploaded
• Error
• Full

Options that set the price through a formula.

• Price
• Default
• Filled
• Error
• Open
• Uploading

A link that reopens the same configuration at the same price.

• Default
• Copied
• Shared

The customer sets the amount.

• Default
• Price too low

Forms that write metaobjects to Shopify.

• File
• Default
• Loading
• Error
• Sent

Creates a gift list: title, occasion, date, message, products.

• Default
• Sent
• Error

Edits or deletes a gift list. Only its owner sees it.

• Default
• Sent
• Error

One slot with the places left. Drawn once, repeated by Smootify.

• Default
• Selected
• Full

One day and its slots, as a column or a row.

• Column
• Row
• Default
• Today
• Closed
• Full

The free slots for a number of days, with the range arrows.

• Week
• Compact
• Default
• Selected
• Loading
• Error

An appointment without payment: the slot and a Webflow form.

• Default
• Sent
• Error

A paid appointment: the calendar inside the add to cart.

• Default
• Selected
• Error

A pickup or delivery window picked in the cart.

• Default
• Selected
• Required
• Error

The navbar, with the Smootify pieces nested.

The open mobile menu.

The footer, with markets, newsletter and consent.

Breadcrumb from CMS links.

Account navigation link.

• Default
• Current

Account summary tile.

• Default
• Current