How to Speed Up Smile.io Loyalty & Rewards on Shopify

1. The Technical Problem

Smile.io injects a floating launcher button and loyalty modal framework that loads on every pageview regardless of whether the visitor is a rewards member.

The rewards widget bundle compiles extensive customer tier logic, points calculation assets, and SVGs on mobile devices before main content finishes displaying.

2. Engineering Resolution Strategy

1. Defer Smile.io script injection until user interaction. 2. Use custom navigation links to launch rewards rather than heavy persistent floating launchers.

<!-- Deferred Smile.io Rewards Launcher -->
<script>
  window.addEventListener('load', function() {
    function loadSmile() {
      if (window._smileLoaded) return;
      window._smileLoaded = true;
      var s = document.createElement('script');
      s.src = 'https://js.smile.io/v1/smile-shopify.js';
      s.async = true;
      document.body.appendChild(s);
    }
    ['scroll', 'touchstart', 'click'].forEach(e => window.addEventListener(e, loadSmile, {once:true, passive:true}));
    setTimeout(loadSmile, 4000);
  });
</script>

💡 Pro-Tip: Always create a duplicate theme backup before editing theme.liquid or snippet files.

Frequently Asked Questions