Customize Smootify behaviour

JS Options

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
    }

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

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

Options available:

Below you can find the list of all available with the relative explanation

showOnlyActiveImages

Smootify Product Images can show both all product images or only the one attached to the current selected variant. By default it shows up all the product images.
Valid values for this option are: true, false

productsBase

By default Smootify supposes that your CMS collection relative to Shopify products has been created inside Webflow with the slug “product”. If you created the CMS collection with a different value, you should change the Smootify Option to reflect the slug of your CMS collection, otherwise dynamic links could be broken.

collectionsBase

By default Smootify supposes that your CMS collection relative to Shopify collections has been created inside Webflow with the slug “collection”. If you created the CMS collection with a different value, you should change the Smootify Option to reflect the slug of your CMS collection, otherwise dynamic links could be broken.

vendorsBase

By default Smootify supposes that your CMS collection relative to Shopify vendors has been created inside Webflow with the slug “vendor”. If you created the CMS collection with a different value, you should change the Smootify Option to reflect the slug of your CMS collection, otherwise dynamic links could be broken.

accountBase

By default Smootify supposes that your account related pages have been created under a folder that has the slug “account”, if you created these pages in a folder called with a different name, you should change the Smootify Option to reflect the slug of your folder

invalidProductRedirectUrl

When you use Markets, it could happen that some products are not activated on that specific Market, by default Smootify will redirect the product page of not activated products to the homepage. You can set a different url if you wish

newCustomerAccountsPublicKey

To use the new customer accounts on the headless channel, you require a public token.

To create a public token, go to your Shopify dashboard and click on the Headless Sale Channel

alt text

Press on Customer Account Api, and set the Client Type to Public

alt text

Enable all necessary Permissions

alt text

Set as Callback URI(s) and Javascript origin the url of your site (Do not add the trailing slash) like in the picture below

alt text

Finally copy the client id

alt text

and set it inside the options of Smootify

    <script>
    window.SmootifyUserOptions = {
        newCustomerAccountsPublicKey: 'your key here',
    }
    </script>

newCustomerLoginRedirect

This option allows to change up where the customers will be redirected once they do a passwordless login. Be sure to add the correct path to the callback uris of the headless channel settings

    <script>
    window.SmootifyUserOptions = {
        newCustomerLoginRedirect: window.location.origin + "/account",
    }
    </script>

orderPageUrl

This option allows to change up where the order page is located in your Webflow project. By default the order page is a page with slug order inside the account folder

    <script>
    window.SmootifyUserOptions = {
         orderPageUrl: "/account/order"
    }
    </script>

selectMarketBasedOnBrowserLanguage

This option allows to select the market based on the default browser language (Unless the customer already changed up the country on it’s own)

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

enableAutoTrack

This option allows to enable automatically analytics integrations (Highly Experimental)

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

useBrowserFormatter

This option replaces the format of Shopify with the Browser international formatter (Highly Experimental)

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