Shopify Store Web Push SDK Integration Guide

Overview

This guide explains how to integrate the Web Push SDK into a Shopify-based store to enable browser push notifications.

Prerequisites

• Shopify store admin access
• Web Push SDK files (webSdk.produce.min.3.3.4.js, sw.produce.min.3.3.4.js)
• Basic familiarity with Shopify theme editing

Integration Steps

Add via Shopify Theme Editor (Recommended)

1. Upload SDK files to Shopify

1. Log in to the Shopify admin
2. Go to Online Store > Themes
3. Click Actions on the current theme and select Edit code
4. In the Assets folder, click Add a new asset
5. Upload webSdk.produce.min.3.3.4.js (main SDK file)
6. Upload sw.produce.min.3.3.4.js (Service Worker file; the SDK uses it for push)
7. Note the asset URLs (e.g. {{ 'webSdk.produce.min.3.3.4.js' | asset_url }} and {{ 'sw.produce.min.3.3.4.js' | asset_url }})

Important: sw.produce.min.3.3.4.js is the Service Worker file that handles push messages in the background. You must configure its path correctly when initializing the SDK.

2. Add SDK script and initialize the SDK

1. In the theme editor, open the theme.liquid file
2. Add the following code before the </head> tag:

              
              <script>
  // Initialize SDK
  (function() {
    function initializeSDK() {
      // Omitted: Canvas, WebGL, plugin fingerprint code (keep as is)
      const visitorId = getFingerprint();

      if (typeof window.MTpushInterface !== 'undefined') {
        // Register event listeners before init

        // Callback when push channel disconnects
        MTpushInterface.mtPush.onDisconnect(function () {
          console.log("onDisconnect");
        });

        // Receive push messages (web push, browser channel)
        MTpushInterface.onMsgReceive((msgData) => {
          // msgData: { data: {...}, type: 0 } — type 0: push channel, 1: system channel
          console.log("Push message received:", msgData);
        });

        // Push init
        MTpushInterface.init({
          appkey: "", // Required
          user_str: visitorId, // Required, user identifier
          fail(err) {
            console.log("Push init failed", err);
          },
          success(data) {
            console.log("Push init success", data);
          },
          webPushcallback(code, tip) {
            console.log("Status code and message", code, tip);
          },
          swUrl: '{{ "sw.produce.min.3.3.4.js" | asset_url }}', // Service Worker URL; must be same-origin and reachable
        });
      }
    }

    window.MTpushInterfaceReady = initializeSDK;
  })();
</script>
{{ 'webSdk.produce.min.3.3.4.js' | asset_url | script_tag }}

            

Verification

1. Check that the SDK is loaded

1. Open a store page
2. Right-click and choose Inspect or press F12
3. In the Console, look for SDK load messages
4. Type window.MTpushInterface to see if it is defined

2. Test push

1. Ensure the site is served over HTTPS (required for web push)
2. Check whether the browser shows a push permission prompt (if you enabled auto-request)

3. Check Service Worker registration

1. Open DevTools (F12)
2. Go to the Application tab
3. In the left sidebar, open Service Workers
4. Confirm that sw.produce.min.3.3.4.js is registered
5. If there are errors, check the Console

Troubleshooting

Common issues and solutions

Q1: SDK not loading

• Check paths: Confirm that asset_url resolves correctly
• Network tab: Verify that the JS files are downloaded
• Permissions: Ensure files are available under Shopify Assets

Q2: Init fails

• Load order: Ensure the SDK script runs before your init code
• HTTPS: Web push only works over HTTPS
• Browser support: Confirm the browser supports web push
• Service Worker config: Set swUrl correctly and ensure the SW file is reachable
• SW file: Confirm sw.produce.min.3.3.4.js is uploaded under Assets

Q4: Service Worker registration fails

• Path: Verify swUrl; use {{ 'sw.produce.min.3.3.4.js' | asset_url }} for the correct URL
• Access: Open the Service Worker URL in the browser and confirm the file downloads
• Console: In Application > Service Workers, check registration status
• HTTPS: Service Workers require HTTPS (except on localhost)