Web Push Setup

This guide walks through configuring OneSignal web push notifications for your Shopify store using Vendo.

Prerequisites

• A Shopify store with the Vendo app installed
• A OneSignal account (free tier available)

Step 1: Create a OneSignal App

1. Log in to OneSignal 
2. Click New App/Website
3. Enter your app name (e.g., your store name)
4. Select Web as the platform
5. Choose Custom Code as the integration type

Step 2: Configure Web Push Platform

In the OneSignal setup wizard:

1. Site Name — Your store name
2. Site URL — Your Shopify store URL (e.g., https://yourstore.myshopify.com)
3. Default Icon URL — Upload your store icon (recommended: 256x256 PNG)

Service Worker Configuration

This is critical for Shopify stores. Shopify does not allow serving files from the site root, so the service worker must use a custom path:

4. Click Save to complete the web platform setup

Step 3: Get Your Credentials

From the OneSignal dashboard, navigate to Settings > Keys & IDs:

• App ID — Your OneSignal application ID
• REST API Key — Used for server-side event syncing (optional but recommended)

Step 4: Configure in Vendo

1. In the Vendo Shopify app, navigate to Destinations > OneSignal
2. Enter your OneSignal App ID
3. Optionally enter your REST API Key for server-side events
4. Click Save

Step 5: Enable the Theme Block

1. In your Shopify admin, go to Online Store > Themes > Customize
2. Click App embeds (in the left sidebar)
3. Enable the Vendo theme block
4. Save the theme

The Vendo theme block loads the OneSignal SDK on your storefront and handles:

• SDK initialization with your App ID
• Service worker registration at the correct path
• Push prompt display based on your settings
• User identification (push subscription, login, newsletter signup)
• Tag syncing for identified users

Step 6: Configure Push Prompts

In the Vendo app under OneSignal > Push Settings, customize:

Subscription Bell

A floating button that visitors can click to subscribe:

Slide-Down Prompt

A banner that slides down from the top of the page:

Prompt Timing

Welcome Notification

Sent immediately after a user subscribes:

Step 7: Select Events to Sync

In the Vendo app under OneSignal > Events:

Server-Side Events

Client-Side Events

Step 8: Verify Setup

Check Service Worker

Visit your store and open browser DevTools (F12):

1. Go to Application > Service Workers
2. Verify OneSignalSDKWorker.js is registered
3. The scope should show /apps/vendo/

Test Notifications

1. Subscribe to push notifications on your store
2. In the OneSignal dashboard, go to Messages > New Push
3. Send a test notification to yourself
4. Verify the notification appears

Verify in OneSignal Dashboard

1. Go to Audience > All Users
2. Confirm your test subscription appears
3. Check that user tags are being synced (email, name, etc.)

Troubleshooting

Service Worker Returns 404

The service worker path must be /apps/vendo/OneSignalSDKWorker.js. Verify:

• The Vendo theme block is enabled in your Shopify theme
• You’re accessing the store via its primary domain

Push Prompt Not Appearing

• Check that the Vendo theme block is enabled in App embeds
• Ensure your browser allows notifications (check browser settings)
• Verify you haven’t already dismissed or subscribed
• Try an incognito/private window

Notifications Show “Delivered” But Don’t Appear

• Check your OS notification settings (System Preferences > Notifications)
• Verify the browser has notification permissions
• Some browsers require the site to be served over HTTPS

Tags Not Appearing in OneSignal

• Tags sync only for identified users (logged in, subscribed to push, signed up for newsletter, or completed a purchase)
• Anonymous visitors are not tracked in OneSignal
• Check the Vendo app logs for sync errors

Events Not Triggering

• Verify the events are enabled in OneSignal > Events in the Vendo app
• Client-side events require the Web Pixel to be active and the user to be identified
• Server-side events require the REST API Key to be configured
• See How It Works for details on user identification