Options

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.

Set the options

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

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

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

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

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.
• structuredData (true): the product JSON-LD on product pages. See SEO and structured data.
• 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.
• 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.
• 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.

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

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

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.

Where people get stuck

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.