# State classes

> The classes Smootify toggles on products, variants and the cart, to style each state in Webflow.

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/reference/state-classes  
Updated: 2026-10-13

Smootify adds and removes these classes as the state changes. Create them as combo classes in Webflow to design each state; never set them yourself.

## smootify-product

`loaded`, `w-dyn-bind-empty`, `price-varies`, `is-variable`, `has-subscription`, `is-on-sale`, `is-free`, `is-available`, `is-not-available`, `not-existing-variant`, `is-currently-out-of-stock`, `many-in-stock`, `last-in-stock`, `low-stock`, `low-not-last-stock`, `is-new`

## smootify-variant

`loaded`, `is-on-sale`, `is-available`, `is-not-available`, `last-in-stock`, `low-stock`, `not-existing-variant`

## smootify-cart

`loaded`, `is-rendered`, `is-empty-cart`, `has-taxes`, `has-empty-quote`

## smootify-search-discovery

`inited`, `empty`, `is-filtered`, `has-pagination`, `has-page-numbers`, `is-single-result`

## smootify-search-page

`inited`, `is-empty`, `is-filtered`, `has-pagination`, `has-page-numbers`, `has-query`, `is-single-result`