# Options

> 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.

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/developers/options  
Updated: 2026-10-10

Smootify reads its settings from `window.SmootifyUserOptions`, an object you set in the site’s custom code. This page groups the options by task and covers the other globals Smootify reads: labels, page overrides and animations. The full list, with every default, is in the Reference under [Options](https://www.smootify.io/docs/reference/options).

## Set the options

The builder writes the script from a few questions, with only the options that differ from the defaults:

_The options builder of this page writes the `SmootifyUserOptions` script from a few questions: open the page in a browser to use it._

By hand, put one script in Site settings, Custom code, Head code, **before** the Smootify loader:

```html
<script>
  window.SmootifyUserOptions = {
    ...(window.SmootifyUserOptions || {}),
    newCustomerAccountsPublicKey: "your-client-id",
    productsBase: "product",
  };
</script>
<script src="https://cdn.smootify.io/assets/v2/loader.js" data-channel="latest" data-css="true"></script>
```

- Smootify reads the object once, when it starts. A change made later has no effect.
- Set only the options you change: the others keep their defaults.
- The spread (`...`) keeps options another script set before this one. Without it, a second assignment replaces the first.

The loader itself is covered in [Install Smootify 2.0](https://www.smootify.io/docs/start/install).

## Page addresses

Smootify builds links to products, collections and vendors from the slugs of your CMS collections, and needs the folder of the account pages.

- **`productsBase`** (default `"products"`), **`collectionsBase`** (`"collections"`), **`vendorsBase`** (`"vendors"`): the slugs of the Products, Collections and Vendors collections. A site whose collections are called `product`, `collection` and `vendor`, the 1.x defaults, sets them. See [CMS collections and sync](https://www.smootify.io/docs/start/cms).
- **`accountBase`** (`"account"`): the folder of the account pages. A visitor who is not logged in is sent away from them.
- **`orderPageUrl`** (`"/account/order"`) and **`subscriptionPageUrl`** (`"/account/subscription"`): the pages that show one order and one subscription.

## Customer accounts

- **`newCustomerAccountsPublicKey`**: the client id of Shopify’s Customer Account API. Without it, login, the account elements and store credit do not work. See [Customer accounts](https://www.smootify.io/docs/build/account).
- **`newCustomerLoginRedirect`**: where Shopify sends the customer back after login. The default is the site’s address.
- **`accountPageRedirectTo`**: where a visitor who is not logged in goes from an account page: an address (default `/`), or `"passwordless-login"` to start the login.

## Markets and prices

- **`selectMarketBasedOnBrowserLanguage`** (`false`): for a visitor with no saved country, the browser’s languages choose the market.
- **`useBrowserFormatter`** (`false`): prices formatted by the browser for the market (`Intl.NumberFormat`), instead of the store’s money format.

## Speed and cache

- **`preload`** (`true`): the browser prepares product, collection and vendor pages ahead, and product data is loaded early. Always off in the Webflow preview.
- **`cacheDuration`** (`0`): minutes a product stays in the browser’s cache. While `preload` is on, `0` becomes 10.
- **`prefetch`** (`true`): once the page is idle, the products of the links near the screen, hovered or touched are fetched into the cache, so the next product page renders from it. It needs the cache: it is off when `preload` is `false` and `cacheDuration` is `0`.
- **`gsap`** (`true`): Smootify loads GSAP when the page is idle, for the cart and panel animations, unless the page already loads it. `false` never loads it: the animations then use the browser’s own animation API.

More in [Performance](https://www.smootify.io/docs/start/performance).

## Webflow interactions

When Smootify changes the page, it restarts Webflow’s interactions so that they apply to the new elements.

- **`avoidWebflowIXRestart`** (`false`): the restart skips interactions (IX2 and IX3).
- **`webflowRestartAlways`** (`false`): restarts Webflow after every product load, as 1.x did. By default 2.0 restarts only when a render changed the page.

## Integrations

- **`ajaxApi`** (`true`): Smootify answers the Shopify AJAX API (`/cart.js`, `/cart/add.js`…) on the page. See [Shopify AJAX API](https://www.smootify.io/docs/developers/ajax-api).
- **`structuredData`** (`true`): the product JSON-LD on product pages. See [SEO and structured data](https://www.smootify.io/docs/start/seo).
- **`analytics`**: an object with the ids of the tracking pixels Smootify loads with the visitor’s consent: `metaPixelId`, `ga4MeasurementId`, `googleAdsId`, `tiktokPixelId`, and `waitForConsent` (`true`). See [Analytics and pixels](https://www.smootify.io/docs/features/analytics).
- **`enableAutoTrack`** (`true`): product view, add to cart and checkout events for the GA4, Meta, Klaviyo and Mixpanel scripts the page loads itself, after consent.

## Labels

These globals replace texts Smootify writes. Set them like the options.

- **`window.SmootifyLabels`**: `{ calculatedAtCheckout: "…" }`, the text of the taxes and duties in the cart when a line has a custom price. Read once, at start.
- **`window.SmootifyStatusLabels`**: the texts of order and subscription statuses, keyed by Shopify’s value (`PAID`, `FULFILLED`…). A status without a text shows Shopify’s value.
- **`window.SmootifySortLabels`**: the texts of the sort options, keyed by `relevance`, `price_asc`, `price_desc`, `best_selling`, `created_asc`, `created_dsc`, `title_asc` and `title_dsc`. Which list shows each one: [Sort labels](https://www.smootify.io/docs/build/filters#sort-labels).
- **`window.SmootifyStoreCreditEventsLabel`**: the texts of store credit events, keyed by `ADJUSTMENT`, `ORDER_CANCELLATION`, `ORDER_PAYMENT`, `ORDER_REFUND`, `PAYMENT_FAILURE`, `PAYMENT_RETURNED`, `RECURRING_PAYMENT` (“Subscription Payment”) and `TAX_FINALIZATION`.

```html
<script>
  window.SmootifySortLabels = { price_asc: "Price, low to high", price_desc: "Price, high to low" };
  window.SmootifyStatusLabels = { PAID: "Paid", FULFILLED: "Shipped" };
</script>
```

The last three are read each time they are used, so they can also be set later.

## Page overrides

Set on one page, in its page settings, these change an address option for that page only:

- **`window.smootifyProductsBase`**, **`window.smootifyCollectionsBase`**, **`window.smootifyVendorsBase`**: override the three slugs above;
- **`window.smootifyAccountPage`**: overrides `accountBase`;
- **`window._languageBase`**: the address prefix of the page’s language, such as `"/fr"`, or `""` for the root, when Smootify cannot find it on its own.

## Cart and panel animations

The mini cart and `modal-backdrop` panels open and close with an animation you can change:

- **`window.cartInAnimation`** and **`window.cartOutAnimation`**, with **`window.cartInAnimationSettings`** and **`window.cartOutAnimationSettings`**;
- **`window.detailInAnimation`** and **`window.detailOutAnimation`**, with their `…Settings`, for `modal-backdrop`.

An animation is `{ prop: [from, to] }` or `{ from: {}, to: {} }`; the settings hold `duration` (seconds) and `easing` (a name or a cubic-bezier list).

```html
<script>
  window.cartInAnimation = { opacity: [0, 1], x: ["100%", "0%"] };
  window.cartInAnimationSettings = { duration: 0.4, easing: [0.25, 0.46, 0.45, 0.94] };
</script>
```

A cart inside a popover is not animated: it keeps the transitions it was designed with. See [Popovers](https://www.smootify.io/docs/build/popovers).

## The html element

Smootify also reads attributes on the page’s `html` element. Webflow and Weglot write them: there is nothing to set, but keep them when you export or rebuild the page.

- `data-wf-site`: the Webflow project, which the licence is checked against;
- `data-wf-locale` and `lang`: the page’s language, and the first market;
- `data-wf-item-slug`: the CMS item of the page, which tells Smootify the product page’s product;
- `data-wg-translated`: set by Weglot, which Smootify waits for before its first request.

The attributes Smootify writes on `html`, such as `logged-in`, are in [CSS](https://www.smootify.io/docs/developers/css).

## Where people get stuck

> [!STUCK]
> - **An option has no effect.** The script sets it after the loader, or a second script replaces the object. Set it once, before the loader, with the spread.
> - **Product links lead to a 404.** The CMS collections keep the 1.x slugs (`product`, `collection`, `vendor`). Set `productsBase`, `collectionsBase` and `vendorsBase`.
> - **Login does nothing and the account elements stay empty.** `newCustomerAccountsPublicKey` is missing.
> - **Products never come from the cache.** `preload` is `false` and `cacheDuration` is `0`, which also turns `prefetch` off.
> - **Interactions play again after a product loads.** `webflowRestartAlways` is `true`. Remove it to restart only when the page changed.

## Coming from 1.x

- **New defaults**: `productsBase`, `collectionsBase` and `vendorsBase` are plural in 2.0 (`products`, `collections`, `vendors`).
- **New options**: `ajaxApi`, `gsap`, `prefetch`, `webflowRestartAlways`, `structuredData` and `analytics`.
- **Removed**: `invalidProductRedirectUrl` is accepted and never read: a product Shopify does not return leaves its block empty, with no redirect.
- **Deprecated**: `showOnlyActiveImages` and `activeImagesMode` still work. Use `only-variant-images` and `variant-images="alt"` on `[product="gallery"]`: see [Product gallery and media](https://www.smootify.io/docs/build/product-gallery).