Shopify App Guide
How to set up OneSignal Web Push notifications on Shopify sites using the OneSignal Shopify App.
See the recent Shopify App Webinar recording to deep dive into all features.
This guide walks through Web Push Setup for your Shopify store using the OneSignal Shopify App.
|Pre-requisites:||- A Shopify store|
- If you have a OneSignal.com account, your Shopify Login email cannot be same as OneSignal.com email. If it is, login to onesignal.com and follow these steps to easily reset your email..
|Easy Setup||1. Install OneSignal App from the Shopify App Store.|
2. Setup Prompt to ask users to subscribe to push notifications.
3. Welcome Users with a push notification after they subscribe.
|Subscribe and Send Test Notification||Once you finished the setup steps and turned on the prompt, you can follow these steps to:|
- Add Yourself as a Test User
- Send a Push Notification
|Abandoned Cart Details (Automated)||Details on setup and testing abandoned cart notifications. Users must subscribe to push through the Permission Prompt setup in step 2, then add an item to the cart. If the do not checkout, they will get a push notification after 1 hour of leaving the site each time they return and leave with items in their cart!|
|In-Stock Alerts (Automated)||If customer visits a product that has 0 inventory, OneSignal provides a prompt to ask if they want to be notified when an item comes back. If the customer clicks "ok" OneSignal will automatically send them a "back in stock" reminder upon updating your inventory!|
|Send Shipping Updates (Automated)||Once a subscribed customer's order is fulfilled, OneSignal will automatically send them a notification.|
|Sending Notifications||You have full control over your messaging! Send any message you want, anytime you want, to whomever you want!|
Setup Audience Segments including Segments with User Tags.
Messages will be saved to reuse later over and over if you wish.
Warning for Existing OneSignal Accounts
Installing the OneSignal Shopify App will not work if your email for onesignal.com and shopify.com are the same.
To easily change your onesignal.com email, login to onesignal.com and follow these steps to reset your email.
1. Install App
Within your Shopify Dashboard, go to your Apps and click Visit the Shopify App Store, search for OneSignal and click the Add app button. Review the permission request screen, and click to Install app located at the bottom.
On the confirmation screen that appears, click Let's Get Started.
2. Permission Prompt Setup
Your site visitors must give you permission to send them push notifications. This happens through a prompt which you can customize to ask them to subscribe to your messages.
During setup, if you click Skip at this step, the prompt will not be enabled on your site, and visitors will be unable to subscribe to your notifications. You can always turn this prompt on or off within your OneSignal Shopify App settings.
Set your Icon!
The icon image you set here for the icon field is used in some of the Automated Messages that don't include products.
You can customize the message, your own icon, and the delay for when to show the prompt:
- pageviews controls how many pages or refreshes the user must perform to be prompted
- seconds controls how long the user has to be on the page before the prompt shows
3. Welcome Message Setup
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.
During setup, if you Skip this step, the welcome notification will not be enabled but can be turned back on within Messages > Automation > Welcome New Subscribers screen.
Note: The image you select for the Icon field is shared with the Permission Prompt from Step 1.
4. Subscribe & Send a Test Notification
Visit your site and you should see the prompt you setup from step 2, you may need to wait or click around the site based on the time and pageview delay you set.
Once you click the "OK" button on the slide prompt and "Allow" button the native prompt, you should see the welcome notifications setup from step 3.
Within Audience > All Users you should see at least 1 device, select the 3-dot menu button under Actions and click Add to Test Users to set yourself as a test user.
Next, head to Messages > Campaigns and select "New Campaign" to send a message. Simply fill out the form and within the "Message" screen, you will see a "Send Test" button. You can now send yourself a test antime.
See below Sending Notifications guide for more details on sending messages.
5. Abandoned Cart Recovery Setup
Abandoned Cart notifications are a way to bring shoppers back to your site if they leave after reaching the Shipping step in the checkout process. If you click Skip at this step, the Abandoned Cart notifications will not be enabled.
Testing Abandoned Cart Notifications
If the Abandoned Cart notifications are set to be active, simply add an item from your Shopify store to your cart
Abandon the checkout process either by navigating to another page or closing the cart's browser tab.
You should receive an abandoned cart notification within approximately 60 minutes from the time you navigated away from the cart.
Changing Abandoned Cart Message
We generally don't recommend customizing this message since it includes a lot of information to help remind the user about the last item added to the cart. If you would like to customize the message and ok with adding some liquid syntax see the FAQ - Customizing Abandoned Cart Notifications.
6. In-Stock Alerts
A big challenge in e-commerce is to bring visitors back to your website in order to convert these interested shoppers into buyers. But what if the product they are looking for on your website is sold out?
OneSignal’s in-stock automation allows your site visitors to get notified as soon as an item they were looking for is back in stock. Shoppers are asked for push notification permissions when they visit a product page that has zero inventory.
When they opt-in, they receive back-in-stock alerts prompting the shoppers to complete the purchase before the product is sold out again. These alerts will have a link to the product page and the product image added automatically, without any configuration.
Testing In-Stock Alerts
As the Shopify store admin:
- Activate in-stock alerts automation on OneSignal
- Change the inventory Quantity Available for any product SKU to 0 (SKU must be set)
- Uncheck "Continue selling when out of stock" if checked
As a shopper:
- Open another browser.
- Navigate to the product SKU that you set out-of-stock earlier on your store.
- Subscribe to the in-stock permission prompt.
As the Shopify store admin, change the inventory count for the product SKU to anything greater than 0, indicating the product is back in stock. You should receive the in-stock alert on the browser you subscribed to as a shopper.
7. Send Shipping Updates
Shopper satisfaction is very critical in generating repeat business. Keep your customers informed and happy by sending “Shipping Notifications” for their orders. We will automatically send notifications when items in an order are partially or completely fulfilled.
Product Image and Shipment tracking URL (if available, otherwise order status page) will be automatically added to the shipping notification.
Shipping notifications are sent to shoppers who have opted-in to receiving push notifications on your store and have ordered items.
Testing Shipping Notifications
Log in as a shopper:
- You must have subscribed to notifications from OneSignal in step #4
- Place a test order
- Navigate to another page or close the browser tab from which you have placed the test order
Log in as an admin:
- Activate Shipping Update notifications on OneSignal
- Fulfill the test order partially or completely on Shopify
- Test shopper should receive the shipping update with the tracking url (if available)
Through the OneSignal-Shopify App Dashboard, you can send any message you want, anytime you need! Messages are also saved so you can duplicate and edit them to re-use for any purpose. Common examples we will demonstrate below include:
- Sending Discounts
- Ask Users to follow you on Social Media
- Cross Promotions with other sites
Within Messages > Campaigns select New Campaign
Add the Campaign Name which will help identify the message to reuse again later. For example:
10% Discount Engaged Users
Follow Us on Twitter over 1 week new
Cross-Promote Brand X
Next we select our Audience which is the Segments of users eligible to receive the message. This defaults to All Subscribed Users, but you can Send to Particular Segment(s) to add more or different segments.
For "Discount Example", the default segment "Engaged Users" contains subscribers that have been back to the site in 1 week and have been on the site 5 times or more, these are users that are very active on the site and we can reward them with a discount.
For "Follow Us on Twitter over 1 week new" campaign, we are going to create a message we can send once a month or every 3 weeks. After a week of subscribing, uses will be in this segment for 2 more weeks, then leave. This gives us the opportunity to reach out every couple weeks to new users.
- Click Add Segment > Create Segment.
- Name this segment
First Session 7-21 days
- Set "First Session" greater than 168 hours
- Click Add filter
- Set "First Session" less than 504 hours
- Click Create Segment
Segment with User Tag
With the User Tag filter, you can segment users with the "Tags" OneSignal adds when actions are made. A couple examples:
made_purchase - set to
true to target users that have made a purchase at some time in the past.
item_count - how many items in their cart currently. You can set "greater than" or "less than" to target subscribers with x number of items in their carts.
Example for subscribers that "made a purchase".
You can add a the following customizations to your message. Browsers do not support custom font, italics, bold, or other text decorations.
|Title||Top Bold part of the message. Multiple Languages & Emojis Supported. Just copy-paste the desired emoji into the message.|
|Message||The main text of your message. Multiple Languages & Emojis Supported. Just copy-paste the desired emoji into the message.|
|Icon||Upload or use a direct URL to the image. Defaults to your "Permission Prompt" icon from step 2 if not set|
|Link||The URL you want the user to visit when clicking the push notification. Can be any URL, does not need to be your site.|
For a "Social Media Example" copy-paste the URL to your social media account into the link, for instance:
For a "Discount Example", head over to your shopify.com Discounts tab to create your discount. After saving your discount, you will see the "Promote" button with option to "Get a shareable link".
Copy-Paste the provided URL into the "Link" field and your message may look something like this.
You can schedule the message up to 30 days in advance and choose to send the message immediately to each user or at a specific time in the user's own local timezone.
For example, if you set "Send immediately" and "Deliver per subscriber's timezone" at 7:15 pm, each user will get it the next time it is 7:15 pm in their timezone. If that time is passed, they will get it the next day.
Click Review & Send to send the message or Save as Draft to come back to it later to send.
Frequently Asked Questions
Updated over 2 years ago