Skip to main content

Migrate from Storefront.js to Smile.js

Migrate your frontend integration from our legacy Storefront.js implementation to the latest Smile.js (our modern JavaScript SDK).

Matt (he/him) avatar
Written by Matt (he/him)
Updated today

πŸ›’ Supported on all platforms

πŸ’³ Available on Plus and Enterprise plans

πŸ‘€ Accessible to all roles

In an effort to modernize our JavaScript SDK and in preparation for the release of a variety of new functionality, Smile is deprecating the old Storefront.js frontend integration used by merchants on custom e-commerce platforms.

This article explains everything you need to know about what's changing, who is impacted by this change, and how to migrate.

What's changing


Historically, merchants using Smile on a custom e-commerce platform would add Smile's rewards popup (launcher & panel) or make use of Smile's JavaScript SDK by including Storefront.js on their frontend. This was accomplished by adding a script tag as well as multiple <div> elements to the page. Once Storefront.js had been included on a page, merchants would have access all of the methods and functionality of our JavaScript SDK (Smile.js).

Going forward, to display Smile's rewards popup or make use of Smile's JavaScript SDK (Smile.js), you'll have to directly include and initialize Smile.js itself. The old approach of including Storefront.js is being deprecated.

How to determine if migration is needed


Smile stopped offering it's integration with custom e-commerce platforms in March 2018, so if you've signed up since then, you're not impacted by this change and no action is required. If you signed up before this date, you'll only be impacted if you manually included Smile's JavaScript SDK on a custom frontend using Storefront.js. The easiest way to tell is to look for the following HTML elements on your web pages:

  • A <script> tag with the URL: https://cdn.sweettooth.io/assets/storefront.js

  • A <div> element with a class of sweettooth-init

  • A <div> element with a class of sweettooth-launcher

If any of the above are present on any of your webpages, you'll need to migrate.

Migrating from Storefront.js to Smile.js


Pre-requisites: Before completing this guide, you'll need to ensure the following.

  • Your account is on a plan that includes JavaScript SDK access. The easiest way to confirm this is in Smile Admin, going to Settings > Developer Tools. If you see a card to Manage signing keys and there is a button to generate a new signing key, then you have access!

  • You have a full and complete list of any web properties where you're using Storefront.js (see above).

Migration steps: For each of the web properties where you've included Storefront.js, follow these steps.

  1. In Smile Admin, create a new signing key specifically for the web property.

    1. Choose a name that represents the web property the key will be used on (e.g. "Main Website" or "Marketing Landing Page").

  2. Remove the Storefront.js <script> tag, initializer <div>, and launcher <div> (see examples of what each tag looks like).

  3. Include Smile.js using a new <script> tag.

  4. Initialize Smile.js using the SmileUI.initialize() method.

  5. Repeat these steps for every web property where you've included Storefront.js.

Once you've repeated the steps above for every place where you've included Storefront.js, your migration is complete! Smile will announce an official end-of-life date for Storefront.js sometime in the near future, so you'll need to ensure that you've migrated before that date or your code will stop working.

Did this answer your question?