Settings

Options Customizer

Don't worry if you don't feel brave enough to write your own JS configuration script! just use the customizer below to generate the proper script!

How to customize Smootify behaviour

Smootify can be customized using a simple configuration script that can be added inside the global head custom code section of your Webflow Project.

Below you can find the Typescript schema of all Smootify Options available at the moment.

type SmootifyOptions = {
    showOnlyActiveImages: boolean,
    productsBase: string,
    collectionsBase: string,
    vendorsBase: string,
    accountBase: string,
    newCustomerAccountsPublicKey: string,
    invalidProductRedirectUrl: string,
    newCustomerLoginRedirect?: string,
    orderPageUrl: string,
    selectMarketBasedOnBrowserLanguage?: boolean
    enableAutoTrack?: boolean,
    useBrowserFormatter?: boolean
}

You can change all or only some of the options by adding a script on the global head custom code section of your Webflow project settings. For example, the snippet below will force Smootify Product images to show up only images that are connected to the current selected variant.

<script>
window.SmootifyUserOptions = {
    showOnlyActiveImages: true,
}
</script>

For reference below there are the default options that Smootify will use in the case the previous script is not added inside the project:

const defaultOptions = {
    showOnlyActiveImages: false,
    productsBase: 'product',
    collectionsBase: 'collection',
    vendorsBase: 'vendor',
    accountBase: 'account',
    invalidProductRedirectUrl: "/",
    newCustomerAccountsPublicKey: "",
    newCustomerLoginRedirect: window.location.origin,
    orderPageUrl: '/account/order',
    selectMarketBasedOnBrowserLanguage: false,
    enableAutoTrack: false,
    useBrowserFormatter: false
}

You can naturally change all of the options or only some of them, like in the example below:

<script>
window.SmootifyUserOptions = {
    ...(window.SmootifyUserOptions || {}), // Spread previous options to avoid overriding them all
    showOnlyActiveImages: true,
    productsBase: 'goods'
}
</script>

Available Options

The complete list of customizable Smootify properties is provided below.