2.0 Beta

Smootify 2.0 is in public beta. Your 1.x store keeps working. Move when you want.

What changed
Log inStart free

Options

SmootifyUserOptions, the label globals and the page hooks, with their 2.0 defaults.

v2.0 beta
Open .md
On this page
  1. SmootifyUserOptions
  2. showOnlyActiveImages
  3. activeImagesMode
  4. productsBase
  5. collectionsBase
  6. vendorsBase
  7. accountBase
  8. newCustomerAccountsPublicKey
  9. invalidProductRedirectUrl
  10. newCustomerLoginRedirect
  11. orderPageUrl
  12. subscriptionPageUrl
  13. selectMarketBasedOnBrowserLanguage
  14. enableAutoTrack
  15. cacheDuration
  16. accountPageRedirectTo
  17. useBrowserFormatter
  18. preload
  19. avoidWebflowIXRestart
  20. ajaxApi
  21. gsap
  22. prefetch
  23. webflowRestartAlways
  24. structuredData
  25. analytics
  26. analytics.metaPixelId
  27. analytics.ga4MeasurementId
  28. analytics.googleAdsId
  29. analytics.tiktokPixelId
  30. analytics.waitForConsent
  31. Labels
  32. Page hooks
  33. window.smootifyProductsBase
  34. window.smootifyCollectionsBase
  35. window.smootifyVendorsBase
  36. window.smootifyAccountPage
  37. window._languageBase
  38. window.smootifyCksEndpoint
  39. window.smCustomPriceFormat(cents)
  40. window._metafieldsDefsFilter(selector, attribute, definitions)
  41. window._filterDraftOrderData(data)
  42. window.smootifyAddonsBox({lines, mainProduct, mainVariant, selectedAddonsVariants})
  43. window.smootifyAddOnsBox(lines, products)
  44. window.Smootify
  45. Animations

Options go in window.SmootifyUserOptions = { … }, in a script placed before the Smootify loader in the site head code. The builder writes it for you:

Options builder

Answer a few questions and copy the script for your head code. It writes only what you change.

Options builder

Step 1 of 6

Pages

The Collection URLs of your template pages in Webflow. Leave a field empty when it already matches.

Smootify links products to /<this>/<handle> and knows a product page by it.

The URL of the Collections template page.

The URL of the Vendors template page.

The folder of your account pages. Visitors who are not logged in are sent away from it.

SmootifyUserOptions

showOnlyActiveImages

Default false. [product="images"] in every form shows only the images of the current variant: a slider keeps only those slides, the plain copies and the lightboxes of the other images get display:none, and those lightboxes leave their group, so the open lightbox pages through the variant’s images only. Every media slider is limited the same way; the media copies and lightboxes, and the videos / external-videos sliders, are not touched. By position an image of a variant starts that variant’s images, up to the next variant’s image (an image before the first one goes with no variant), and a variant without an image hides nothing; with activeImagesMode: "alt" the images whose alt tag #Name_Value is one of the variant’s options, and the untagged ones. The visitor moving the slider or clicking a thumbnail inside those images keeps them all, a thumbnail of another variant shows that variant’s images. Deprecated: only-variant-images on [product="gallery"] (debugger advice)

activeImagesMode

Default "position". "alt" matches the images by option alt text; deprecated: variant-images="alt" on [product="gallery"].

productsBase

Default "products". URL segment of product pages (1.x: "product")

collectionsBase

Default "collections". (1.x: "collection")

vendorsBase

Default "vendors". Plural like the other two (1.x: "vendor")

accountBase

Default "account". Account folder, account-only pages redirect visitors.

newCustomerAccountsPublicKey

Default "". Customer Account API client id: without it login, account elements and store credit are disabled (classic accounts are not supported)

invalidProductRedirectUrl

Default "/". 2.0: removed — accepted, never read: a product that is not found removes its block (advice on .webflow.io), no redirect.

newCustomerLoginRedirect

Default —. OAuth redirect_uri of the login (default the page origin; an absolute URL listed among the Callback URIs of the Customer Account API). "same-page": the login returns through the origin to the page where it started (an account page included), with no second load when it started on the home page (its query and hash written back); the code is exchanged with the origin as redirect_uri.

orderPageUrl

Default "/account/order". Order page linked by [order="url"] and subscriptions.

subscriptionPageUrl

Default "/account/subscription".

selectMarketBasedOnBrowserLanguage

Default false. No saved country: the browser languages pick the market.

enableAutoTrack

Default true. GA4 / Meta / Klaviyo / Mixpanel events of product view, add to cart, checkout (not for the services of analytics)

cacheDuration

Default 0 (forced to 10 when preload). Minutes, TTL of the persistent cache (IndexedDB, localStorage fallback)

accountPageRedirectTo

Default —. Where visitors not logged in go from account pages: URL (default /), or "passwordless-login" for the OAuth login (2.0: without newCustomerAccountsPublicKey no login can open, so /, with a debugger advice)

useBrowserFormatter

Default false. Intl.NumberFormat money for the market instead of the shop’s money format.

preload

Default true. Speculation rules for product / collection / vendor links and product preload; forced false in the Webflow preview.

avoidWebflowIXRestart

Default false. The restart skips IX2 / IX3.

ajaxApi

Default true. Answers Shopify’s AJAX API (/cart.js, /cart/add.js, /products/<handle>.js…) from the Storefront API (v2/docs/ajax-api.md)

gsap

Default true. Loads gsap and CustomEase when the page is idle, unless the page has a script[src*="gsap"]; false never loads them.

prefetch

Default true. Product links near the viewport, hovered or touched go to the persistent cache; off without it (cacheDuration: 0 with preload: false)

webflowRestartAlways

Default false. Restarts Webflow at every product load outside the cart, as 1.x.

structuredData

Default true. Product JSON-LD on product pages, unless the page has Product markup of its own; false turns it off.

analytics

Default —. Object: tracking pixels Smootify loads with the visitor’s consent (own chunk), started when it has at least one id.

analytics.metaPixelId

Default —. Meta Pixel (15-16 digits), marketing consent.

analytics.ga4MeasurementId

Default —. GA4 (G-…), analytics consent, Consent Mode v2.

analytics.googleAdsId

Default —. Google Ads (AW-…), marketing consent.

analytics.tiktokPixelId

Default —. TikTok Pixel (20 characters), marketing consent.

analytics.waitForConsent

Default true. false: every script loads at once with the consent denied (Consent Mode estimates)

Labels

GlobalUse
window.SmootifyLabelsmerged over {calculatedAtCheckout: "Calculated at checkout"} at boot; the text of [cart="taxes"] / [cart="duties"] when a cart line has a price override
window.SmootifyStatusLabelsstatus key → text for [order="financialStatus"], [order="status"], [order="fulfillmentStatus"] and [subscription="status"]: the key as Shopify sends it (PAID), then lower-cased; fallback the raw value (orders) or the capitalised value (subscriptions)
window.SmootifySortLabelsmerged over relevance, price_asc, price_desc, best_selling, created_asc, created_dsc, title_asc, title_dsc (in a search only relevance and the two prices are offered)
window.SmootifyStoreCreditEventsLabelstore-credit event → text, merged over ADJUSTMENT, ORDER_CANCELLATION, ORDER_PAYMENT, ORDER_REFUND, PAYMENT_FAILURE, PAYMENT_RETURNED, TAX_FINALIZATION

Page hooks

window.smootifyProductsBase

Overrides productsBase for the page (read when used)

window.smootifyCollectionsBase

Same for collections.

window.smootifyVendorsBase

Same for vendors.

window.smootifyAccountPage

Same for the account base.

window._languageBase

Short-circuits the language-base detection ("" = root)

window.smootifyCksEndpoint

URL (http…) of a proxy that asks Shopify for the analytics tokens on plans without the Smootify server (the server plan uses Smootify’s)

window.smCustomPriceFormat(cents)

2.0: removed — not read: prices use the shop’s money format, or useBrowserFormatter.

window._metafieldsDefsFilter(selector, attribute, definitions)

Filters the metafield identifiers the page asks for, before the metafield_definitions filters; deprecated: Smootify.addFilter("metafield_definitions", …) (debugger advice)

window._filterDraftOrderData(data)

Rewrites the draft-order payload of the quote; deprecated: Smootify.addFilter("draft_order_data", …).

window.smootifyAddonsBox({lines, mainProduct, mainVariant, selectedAddonsVariants})

May be async; returns the box fields (title, image…) merged over the defaults (box-title, box-image) when use-magic-box adds add-ons.

window.smootifyAddOnsBox(lines, products)

Synchronous 1.x variant of the above, used only without smootifyAddonsBox; deprecated.

window.Smootify

Before the script: an array of functions (`window.Smootify = window.Smootify.

Animations

GlobalDefault
window.cartInAnimation{opacity:[0,1], scale:[0.9,1]}
window.cartInAnimationSettings{duration:0.5, easing:[0.25,0.46,0.45,0.94]}
window.cartOutAnimation{opacity:[1,0], scale:[1,0.85]}
window.cartOutAnimationSettings{duration:0.3, ease:"ease-in"}
window.detailInAnimation{opacity:[0,1]}
window.detailInAnimationSettings{duration:0.5, easing:[0.25,0.46,0.45,0.94]}
window.detailOutAnimation{opacity:[1,0]}
window.detailOutAnimationSettings{duration:0.5, easing:[0.25,0.46,0.45,0.94]}

    ↑ ↓ to moveEnter to openEsc to close