OneSignal Help & Documentation

Welcome to the OneSignal New IA developer hub. You'll find comprehensive guides and documentation to help you start working with OneSignal New IA as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    Discussions

Legacy Shopify Website Builder Setup

How to set up OneSignal Web Push notifications on Shopify sites using the Website Builder option

❗️

These setup instructions are old.

The following instructions apply only to OneSignal customers who want to use our Website Builder setup process for Shopify. See our Shopify App Setup Guide if you added the OneSignal Shopify App directly.

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.


OneSignal Legacy Shopify Setup

❗️

Below Instructions are Old and Not Recommended

The following instructions apply only to OneSignal customers who want to use our Website Builder setup process for Shopify. See our Shopify App Setup Guide if you added the OneSignal Shopify App directly.

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.

It is not recommended to follow this guide, instead use our OneSignal Shopify App.

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.


Frequently Asked Questions

Updated 11 days ago


Legacy Shopify Website Builder Setup


How to set up OneSignal Web Push notifications on Shopify sites using the Website Builder option

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.