Guides
Log InSign Up

Legacy Shopify Setup

How to setup OneSignal Web Push notifications on Shopify sites using code.

Suggest Edits

❗️

Deprecation Notice

OneSignal stopped supporting new apps from using Blogger, Bubble, Squarespace, Webflow, Weebly, Wix, HTTP sites, and website builders that don't support uploading Service Workers to a server (which are required for web push).

We used to provide a workaround subdomain like https://LABEL_HERE.os.tc so we would host the Service Worker files for you, but this isn't going to be supported anymore for several reasons, the most important being:

  • This doesn't work for iOS Web Push
  • It provides a bad User Experience for your users
  • Chrome is making a change detailed in their storage partitioning plans / CHIPS which when enabled prevents our SDK from checking unsubscribe stats when using the https://LABEL_HERE.os.tc/unsubscribe page.

If you currently use the the os.tc subdomain, you can continue to use it but will no longer be able to prompt for push notifications. Your existing subscriptions will continue to receive notifications. Starting September 8th, Chrome's change will prevent users from being able to unsubscribe when they visit the https://LABEL_HERE.os.tc/unsubscribe page. They will need to unsubscribe from the browser notification settings.

Sorry for the inconvenience. We know a lot of people want this. Especially for blogger, hopefully the Google Team will support this someday: Is it possible that I can build progressive web app for my Blogger blog

If you use one of these types of site builders, you may be able to work around this by following our Typical Website setup and put a CDN in front of your domain to host the OneSignalSDKWorker.js Service Worker file. But this is quite technical and we don't have any guidance on how to setup the CDN.

The 2 biggest solutions that the OneSignal Shopify App provides is:

  1. a "no code" solution with powerful built-in features like abandoned cart and back-in-stock updates
  2. implements the Web Push API Service Worker requirements within Shopify's App Proxy Limitations

OneSignal provides the below Legacy setup instructions for developers that want more control over the code on their Shopify site, which includes:

If you are using external_ids or any Database, DMP, & CRM Integrations it is recommended to use the Legacy Setup.

The "cons" of the Legacy setup are:

  1. requires code
  2. requires the use of the OneSignal os.tc subdomain. See Web Push HTTP vs. HTTPS for more details.

Shopify App for Web & OneSignal Dashboard for Mobile

If you want to use the OneSignal Shopify App but also have your own Mobile Apps using OneSignal. It is recommended to setup a separate OneSignal.com App for mobile users.

You will need to setup a onesignal.com account with an email different from the email used to login to shopify.com.

🚧

Important Setup Requirement for different apps

You will need to setup a onesignal.com account with an email different from the email used to login to shopify.com.

OneSignal Legacy Shopify Setup

❗️

Legacy Setup Instructions

These instructions only apply if you want to setup the OneSignal SDK on your Shopify site directly with code and do not want to use the OneSignal Shopify App.

See the OneSignal Shopify App Setup Guide if you setup or want to setup the OneSignal Shopify App without code.

This guide will walk you through how to set up Web Push for your Shopify store by adding code to your site using the Website Builder setup process in the OneSignal Dashboard.

Pre-requisites:

  • A free or paid OneSignal account
  • A Shopify store with access to edit template files

Step 1. Choose Integration

In the OneSignal Dashboard, click New App/Website from the All Applications page.

On the screen that appears, fill in the name of the app.

If your account is part of an Organization, select the name of the organization that the app should belong to from the list.

Select Web Push from the list of platforms, then click Next: Configure Your Platform.

On the screen that appears, select Website Builder > Shopify.

Step 2. Site Setup

Once you've selected Shopify as your integration, you must fill out information about your site.

Enter Site URL

You will need to enter in your primary domain that you have set up in Shopify. See managing your domain in Shopify to learn how to find this domain.

Auto Resubscribe

Recommended: This feature is only for HTTPS sites and if you do not select "My site is not fully HTTPS". This allows users to automatically resubscribe upon returning to the site without being prompted if they clear their browser cache or if you are transferring to OneSignal from another push provider.

Default Notification Icon URL

Enter a link to an icon file that is at least 80x80 pixels (recommended size is 192x192). The file must be in .png, .jpg, or .gif format.

Choose a Label

Shopify implementations must choose a unique label that will be displayed as the originating subdomain in your notifications.

Warning: You can only change your label if you have less than 100 web push users. Once you have 100+ web push users, this setting is disabled.

Step 3. Permission Prompt Setup

To send push notifications to your site's visitors, you first must ask them for permission using one of OneSignal's prompts.

You must have at least one prompt active on your site for users to be able to subscribe. Use the pre-configured Slide Prompt, or click Add a Prompt to open the permission prompt selector and choose another type.

Permission Prompt Editor

In the Permission Prompt Editor, you can select which prompts you wish to use, and style them as you like. Once you have edited the prompt to your liking, click Save.

Prompt Customization Guides

  • Subscription Bell - a small icon at the corner of your page that users can interact with to subscribe
  • Slide Prompt - a small modal that comes from the center of the page and asks if users are interested in signing up.
  • HTTP Pop-Up Prompt (HTTP-only) - a pop-up window that appears after other prompts and is required for HTTP (not HTTPS) sites.
  • Custom Prompts - Create your own links or buttons as prompts.

Step 4. Welcome Notification

Welcome notifications are an optional way to thank users after subscribing to your site. Users will see a welcome notification as soon as they subscribe. You can edit or disable them at this step.

Step 5. Advanced Options (Optional)

Most Shopify store owners will not have to edit anything in Advanced Options. See Web Push Advanced Options to learn more about each option.

Step 6. Add Code to Site Template

To enable OneSignal on your Shopify site, you will need to copy the code from this step and add it to your site's theme code.

To add the code to your Shopify theme:

  1. Open your Shopify admin
  2. From your Shopify admin, go to Online Store > Themes
  3. Find the store's active theme, and then click Actions > Edit code
  4. In the Layout folder, click on your theme.liquid file to open it in the online code editor
  5. Locate the </head> tag in the code editor
  6. Paste the OneSignal code you copied above on a blank line within the </head> tag
  7. Click Save to confirm the change to your theme

Step 7. Subscribe & Send a Test Notification

Visit the site and subscribe through the OnesSignal permission prompt that you configured in Step 3.

Then, send a test notification to yourself through the OneSignal Dashboard to test your implementation.

Migrating to the Shopify App

If you used the below steps to add OneSignal to your Shopify site, unfortunately there is not a way to migrate your current users to the new Shopify App. This is due to how Shopify required users subscribe to the os.tc subdomain in this version whereas the Shopify App allows users to subscribe directly to your site.

However, all is not lost! You can continue to send push from the old OneSignal app to your current subscribers. It is recommended to send a couple notifications letting users know the site has moved and they should subscribe again.

While you may lose subscribers at first, they will come back overtime as the subscription process is much more streamlined and easier using the Shopify App instead of adding the code directly to the site.

Migration Steps

1 - you need to use a different email for onesignal.com and your shopify account, you won't be able to access the shopify app from your onesignal.com account. It is all handled within the app directly, so you can send push from shopify. All in one place.

In your shopify.com Settings > General

Make sure you do not use the Store Contact Email for an account at onesignal.com

2 - you need to remove any code on your site used for OneSignal. This code basically looks like this:

<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
  var OneSignal = window.OneSignal || [];
  OneSignal.push(function() {
    OneSignal.init({
      appId: "abcdef12-1234-1234-1234-abcdf1234",
    });
  });
</script>

3 - Add the OneSignal Shopify App.

Updated about 1 year ago