OneSignal & Shopify

How to use OneSignal's new integration with Shopify.

OneSignal's Support Engineer, Jon Fishman, goes through OneSignal's powerful Shopify application and how it can help Shopify users reach their eCommerce goals. The transcript of the webinar can be found below.



In this webinar, I'm going to be going over all the Shopify options. There's a lot to go over in a relatively short webinar, so we'll try to fly through it and leave questions at the end. Feel free to place your questions within the chat or Q and A, and we will go through them probably towards the end or during the session.

One thing I wanted to point out is I'm not going to actually download the app, but if you want to go ahead, you can go to the apps page, which will look like this, and visit the Shopify app store. You'll go to the Shopify app store and just search for OneSignal, and you can download it here.

The setup process is very easy. It should take about less than three minutes to get started. But I will still go over all the necessary setup options that the process will go over, and we can check that out as we go along.

This also will be recorded. The recording will be available on our YouTube channel or in our documentation likely.

Okay. Probably just wait one more minute for people to join. I too am a stickler for being on time, but I understand things come up. So, no worries. We will have plenty of time to go over everything.

This webinar is set for just 30 minutes. I hope to do the entire demo within 10. That likely won't happen because there's a lot of stuff to go over. But we will have plenty of time for Q and A towards the end.

For those of you just joining, thanks for coming. I plan to run through all the capabilities of the OneSignal Shopify app. I will not go over set up, but if you need to get set up, if you have not done so already, just go to your Shopify dashboard, go to your apps, visit the Shopify app store. It'll take you here. Search for OneSignal and you can go ahead and click the button to download it and follow the prompts.

Okay, let's just go ahead and get started.

Setting up OneSignal with Shopify

Once you actually download the OneSignal Shopify app, you will then see it within your Shopify apps here. When you click on it, it's actually going to take you to a page like this. If you have not set up yet, just go ahead and run through the setup wizard. It'll walk you through about five or six screens of getting set up.

One of the major setup options that you will have to do is prompting users. What do I mean by that? a prompt is a message that shows to your users when they are on your site, asking them to subscribe to push notifications. A user must subscribe to your sites to get push notifications from you. There's no way around that. That's just how web push works in general, is you go to a website and you are enjoying the site. You search around, you're adding items to your cart. You're reading blog posts, and you're like, "Wow, this is a great site. I want to stay informed."

So what the prompt, the push permission prompt, is supposed to do is ask the user, "Hey, are you enjoying yourself? Would you like to stay updated on new posts or discounts or product releases?" And generally, a user can say yes or no.

You can customize the message here. You can add your own icon here. This icon is actually helpful because it will be used as the default icon for all your push notifications. Again, that was under settings. Turn on the permission prompt. You can delay the prompt for two pageviews and X amount of seconds.


For example, if you want it to show after they go to the site and then they click a page, you can click one or two or however many pages you want to wait. You can do that here with pageviews, and then how many seconds after that pageview. For example, 2 and 10 means that when I am on my site... I've actually subscribed already. So let me go ahead and unsubscribe. This is actually a good little process for testing your site. Click the little lock icon next to your site URL, go to ASK, and that will reset your notifications to ASK. Go to cookies and then just clear your cookies here, and then reload the page.

So now, my prompt, I have set up to show after 2 pageviews and 10 seconds. This is pageview 1. I go into one of my items here. This is pageview 2, and now I wait 10 seconds. I said 10, right? Yeah, 10 seconds. And then the prompt is going to show. Here it is. Okay.

So now that I click YES, this is the native browser prompt. This is the actual required prompt by the browser for subscription. Now, the reason why it's a two-step process is because if the user says NO on the slide prompts, then you can ask them again later. no big deal. But if the user clicks BLOCK on this native prompt, they cannot be asked again. They would have to go into their browser settings to turn on push notifications.

I'm going to go ahead and click ALLOW, and now I'm subscribed. We actually send a welcome notification. I'm on a different monitor here, so you don't see the welcome notification on my screen, but let's go ahead and set up the welcome notification. That'd be the next thing we do. But I just want to highlight here that, again, you can customize the message. You can customize the icon, put whatever icon you want. This will be your default icon. So it will be used on your notifications if you don't supply one. And then you can customize the buttons. And then you can customize the delay. Once that is set up, you can click SAVE.

And again, if you ever wanted to change this, if you ever want to change the message, change the buttons, change the delays, you can always come into your settings, make sure this is turned on, and do that. If you ever want to test how that looks, again, you would just go back to your site. Go to that little lock icon. And then click Notifications, select ASK. And then for cookies, you'll clear your cookies. And that will actually treat you as like a brand new site visitor to your site. Okay, cool.

So, let's now head into the... Well, let's just go back to the home screen. Okay. I jumped ahead of myself. What I want to highlight here on the dashboard is some of the key stats. So Subscribers, these are devices that have opted in to receive push notifications. Your Average Click-Through Rate, once that finishes loading, it will tell you the average amount of clicks you're getting on your push notifications.

Revenue for Messages Overview

And then the Revenue for Messages. This is really interesting. What happens is that when a user clicks a notification or they receive a notification, they don't have to click it. But they click or receive a notification 24 hours. And then they go to your site and then purchase something. We will attribute the revenue you make from that purchase to the notification.

And so, if that purchase happened from clicking notification or within 24 hours of receiving a notification, OneSignal will just attribute that purchase to your notification process. That will be a really good way for you to help determine your return on investment with OneSignal, is that if you're getting a revenue from your messages being sent.

That revenue will also show up here over time. You can see a look back up to a year of the happening. And then Total Subscribers, this would be your subscribed and unsubscribed devices over time. And then down here, we get into our automated messages. This is actually the same thing as if we go into our messages tab here.

So, the campaigns here is… actually, I can create notifications and send them anytime I want through the OneSignal dashboard. I just click on New Campaign and I go through the process. We'll go through this in a little bit, but I want to highlight all the automated message sequences that we provide so far.

Automated Message Templates


So right now, at this time of recording, there are four automated message sequences. The first one is the welcome notification. This actually shows when the user first subscribes to your site. So, for example, if you want it to say, "Thanks for subscribing," that's the default message. Or if you want to give some promotion like, "Thanks for subscribing. Here’s 10% off," or "$10 off", or however much you want, "on your next purchase," you can absolutely do that as well. You can put actually the discount code within the message, like new subscribe or something like that.

And then you can also add a link to your cart with that discount code set up. You'd actually set that up with your discounts inside of your Shopify dashboard. Also, be careful when you clear your browser cache, it will unsubscribe, or it will log you out of your Shopify dashboard. So, just be aware of that. You just have to log back in. no big deal.

Cool. Yeah. There's actually a great documentation on that. This will take you to your discounts page and your Shopify dashboard when you click it. You can set up that discount. I can click my discount. I can go to generate the code here. Oh, that generates the code. Okay. Sorry. Yes. That's not what I want to do. I want it to get the link to my code.

Well, there's a way to generate the link. Oh, here it is. Sorry, get the shareable link, copy the link. And then this is what I would put in the link here.

So now, when the user clicks my notification that they get, remember that discount icon is set here, they'll be sent to the cart and then this SHOPNOW10 or SHOPNOW discount will be applied on my next purchase. Okay?

You can do that again with your regular campaigns. Just generate the discount code, get the shareable link. You'll have your discount code in the link. And just add that into your campaign as the link, so when the user clicks it, they will get sent to the cart with the discount applied. Okay?

I'll go ahead and save that. That's the welcome message. This will actually only show up when the user subscribes for the first time. If you're worried about people maybe unsubscribing and re-subscribing over and over again to get that discount, it won't happen. They will only get it the one time that you subscribed like a brand new user. That would require the user to actually clear their cookies and clear their notification preferences in the browser. Okay, cool.

Again, if there's any questions as I go along, please feel free to throw them into the chat or the Q and A. I'll be happy to answer them towards the end of this webinar.

The next automated message we want to go over is the one that everybody asks about - the Recovered Abandoned Cart messages.

To turn this on, you'll have like a little button here that says, View/Edit. The way that this works is that the title, the top part of the notification, you can set that to be whatever you want. We have a default here. We've saved items for you, but you can say, "Come back and purchase," or "Don't forget your items." whatever you want.

You can actually throw in emojis as well. A great website to get emojis is, and you can just literally copy-paste the emoji into the message. This is a really good idea. We generally see people that have emojis in their notifications have a higher click rate than non-emojis. So, adding the title or updating the title with your emojis is a great idea.

We generally don't recommend updating the message. The reason for that is because we're using the Shopify Liquid syntax, the well-known Liquid syntax that Shopify uses to generate a customized message for your users. That message is basically saying, "Hey, you left..." and then the last item they added into their cart, "You left that item and X amount of items in your cart." If it was more than one item, it'll say, "Hey, you left your sunglasses and two more items in your cart." If it's just one item, it'll say, "Hey, you left your sunglasses in your cart."


Now you can customize this if you want. If you're familiar with the Liquid syntax, you can absolutely do any type of message you want, and you can actually base that off of the tags that are added to users. But generally, the way that it works is like this. So, here. I'll make sure to let our team know that we need to make a quicker link to this page so you can see it faster. But basically, when a user adds an item to their cart, what's going on in the backend is at that signal... So I go to this item. I'm not a small, so I'll add my extra-large. And then I will basically add the item to the cart here. Okay? I want to show in the console here what's going on. So I add the item to the cart. And so now, I have this item in the cart and I'll just continue shopping.

On the OneSignal side, my device... actually, I'll just pull it up here. My device here inside the AUDIENCE and ALL USERS tab here, what we're doing is we're adding these items to the device. So those are items like the item name, so if it was the woman's t-shirt or the men's t-shirt or whatever the item name is that you set here.

We're adding how many items are in the cart. So right now, zero. And we're also adding a URL to the image. So this is all done for you automatically. You don't have to actually do any of this. OneSignal will do it for you.

So what's happening now is that when I add an item to my cart, this data all gets updated with the most recent item in the cart. Once I leave the site, once I leave the Shopify site, OneSignal will automatically send this message to the user one hour after they leave. So if I leave the site and then I get this message, I click it, and the message will have the image of the item, and I click it, it will take me back to my cart where I can finish my checkout.

Now if I don't finish checkout, and then I come back to the site, and then I leave the site again, then the abandoned cart message will be sent again after an hour. That's basically how it works. Users add, customers add items to their cart. They leave the site. And then an hour later, they will get this abandoned cart message saying, "Hey, you left your men's extra-large t-shirt and three more items in the cart." And that will just continue to go on as users add items, leave, come back, remove items. Once they remove the item they will not get sent this again. OneSignal automatically removes them from getting any further messages until they add an item again.

In-Stock Alerts

Let's now talk about the In-Stock Alerts. This one's cool. With in-stock alerts, what happens is that I'm visiting the sites and there's this awesome item that I really want, the super awesome out of stock product. You know what? It’s out of stock right now. That's a bummer because I really wanted this product, right?

Well, what we do is we can show a prompt that says, "Want to know when this item is back in stock?" which you would customize here. The prompt message wants to know when this item is back in stock. And then you can customize the yes or no buttons and set the delay. So what happens is, once I click on "Yes, absolutely, tell me about it," it will then say, "Thank you. We'll alert you once the item is back in stock." You can update that message as well here on the confirmation message.

Now, when I'm in my dashboard here and I go to my products, my inventory, when I now update my super awesome out-of-stock product, I go to the inventory here. So once I update this to however many I have, and I click SAVE, OneSignal automatically sends a notification to all users that were interested in this product.


So that's how the in-stock alerts work. You can customize this as well. It's also using the Liquid syntax. Again, you'd want to follow that guide on this kind of format if you want it to update the message, because we will put the item name in the message. But the title, you can change whatever you like. Okay, great.

Shipping Updates

There's one more. We talked about Abandoned Cart, Welcome, and In-Stock Alerts. Let's talk about Shipping Updates. The way that Shipping Updates work is actually very simple. Again, it works the same way. You can customize the title to be whatever you want. And then we have that Liquid syntax for the message. But what happens is that, when a user makes a purchase and I go into my orders, and I fulfill the order... I'm sorry, I haven't actually fulfilled an order yet because this is just our demo site. But once you fulfill the order, it will actually send the notification to the user. Once you mark it as fulfilled, it will then send the notification to the user that your order is on your way. You can actually say the product name and however many other items that were sent are on its way to you. And that's basically how the automation works.

Right now it's just these four. We do plan to add more automated messages. We do plan to add customizable, automated messages. But right now, if you're looking to get set up with OneSignal and you're wanting to set up these types of messages, it's all done for you. You literally go into the View/Edit, you just update the message, what you wanted to say, and you're done. OneSignal will handle everything else for you. You'd never have to send any messages if you don't want to.

If you want to come in here and check out the reports, you can click the REPORT button. Once it's done loading, it will tell you how many sent and it would just basically tell you how well that message is doing.

Now, I did want to highlight how you can actually send your own messages, and that's under the Campaigns tab here. Basically, what I'm going to do is I'm going to create one on the fly. My campaign, I'll just call it my '10% Discount Engaged Users'. So, what I want to do for this campaign is I want to set a 10% discount to my users who love my site, who are actively engaged and who use the site a lot. I want to reward them for coming back.

Segments and Engaged Users

Now, what is an engaged user? Well, good question. An engaged user, according to OneSignal, is a segment that we provide called engaged users here. I can add that. You might be asking, "Well, what is that?" Good question. If I go into my audience and go to my segments, well, OneSignal provides us engaged users segment. What this is, is that it's the last session. So the user has been back to the site less than a week ago, so within one week. But also, their session count is five times or more. They've been back to my site within a week, and in total, they've been to my site five times or more. So these are my users that love my site. They've been back within a week and they've been back over five times. Whether that five times was within the same week or not, it doesn't matter, these people love my site. So I want to reward them with a 10% discount.

Now, since I'm on the subject of segments, segments could be created using any of the data that OneSignal collects. The first session is the first time that they've been back to this, that they subscribed to my site. So I can say all my users that subscribed to my site over 600 hours ago or less than, or greater than, or less than X amount of time. A week is 168 hours. I should know better math, 168 times 2, so two weeks, 336. All my users that have not been back to my site or that at first... I'm sorry, that first subscribed to my site over two weeks ago, that would be these users. Or I can use last session. I can say last session is less than or greater than 336. That's how many users have not been back to my site in over two weeks.


I can combine this with all the other data. Session count, that's how many times they've been back. Session count is greater than or less than... If they have not been back to my site in over two weeks, and they've only been to my site one or two times, these might be users that maybe stumbled upon my site and they're not super interested, or maybe they just didn't find what they were looking for. We can actually send a message to these users saying like, "Hey, did you find what you were looking for? Hey, come back and let us know..." if you have a form, they can fill out. Or "Hey, what..." get some idea for why maybe they left or maybe they didn't find what they're looking for.

You can also send based on the country. You can send based on their language. I mean, all this stuff here.

The user tag, this is the one that I was showing a little bit earlier in your AUDIENCE section. Right now there's not the ability to set your own custom tags. Right now, OneSignal will add the tags for you. But if you wanted to, I could use like item name, for example. And if I want it to target all my users that have the item name, and then I could say is this, maybe we got a new backpack in. I want to target all my users that have this backpack tag. I can send them my backpack users.

Or if I just want to be like any user that has an item name, so that means any user that has added an item to their cart or to their... I remember that item name will also get added when you send the shipping notification. I can just say 'exists'. If any user has an item name that exists, I can just say that this is my interested users or product interests. So these are all my users that at some point have added an item to my cart or have made a purchase because they have this item tag. So now, I can say 'product interests, item name exists'. Now, I can target these with new updates to new products that we have or specific products, things like that.

And so, again, you can use the user tag key and value. I could say the key is a certain value, so that would be the key item name or item count is 0 or is 1. I can say 'is not' a certain value. I can say all my users that don't have the embroidered Champion backpack. I can say just 'exists' or 'does not exist'. So all my users that have never added an item name before, I can target them saying, "Hey, maybe that would be a good one for discounts." And then for the greater than or less than, so all my users that had the item count, I can say is greater than... I could say 1. So now, all my users that have more than one item, I can basically like, "Hey," maybe get them, send them another abandoned cart sort of situation and give them a 10% offer or some kind of discount on their next purchase.

But what's really cool is that you can combine these with AND and OR filter. so if I wanted to, I could say all my users that have item count is greater than one, and item count is less than five, for example. If they have two, three, or four items in their cart, that would target these users.

So there's a lot of things you can do with the segmentation aspect. Once you create these segments, they are dynamic. Meaning as user data changes, as they return to the site, as tags get added, as their last session and first session get updated... Well, first session will never get updated once they subscribed, but as last session gets updated and session count gets updated, this data will always change. So users can move in and out of segments as you see fit based on the segment counts, segment data filters. So, that's my segment back to my messages.


So, now that we know what engaged users are, I can continue. You can also exclude segments. If I want to target my engaged users, but I don't want to target my users that made a purchase already, I could do that. So that means that if a user is inside this segment and this segment, they will not get it if they're inside this segment.

I can actually add multiple languages as well. Remember how earlier I said that OneSignal collects the language code? Well, if I wanted to send the notification maybe in Korean and Japanese and Spanish and Portuguese and Hebrew, I could basically do all of them if I want to. But just keep in mind that OneSignal will not automatically translate the message. You'll have to still go to Google translate. Or if you know the language, you can put your own message in here. But you can add different languages if you want. Otherwise, this is the default. So, no matter what language the user's browser is in, if you don't set the language here, they will get this message you set here. And this doesn't have to be English. This can be whatever you want. You can put whatever language you want here if you only want to send one language. But if you want to send multiple languages, you can add multiple languages.

I'm going to do... My title is '10% off just for you'. I'm going to say, "Because you are awesome, take off 10% for your next purchase." Or just say, "Use SHOPNOW," because that was my discount, "because you are awesome."

I could put an icon here. If I wanted to put a special image, go for it.

GIFs are supported, but they don't animate. So, that's just how browsers have it set up at this point. It doesn't really matter if it's OneSignal or any other push provider. If you're trying to put an animated GIF, it's just not going to work on browsers at this time. Hopefully, browsers will support it someday, but not right now.

And then for that link, I'm going to go back and I'm going to get the discount link, wherever that is. Discount, and then open my discount and then go to promote, get shareable link, copy link. Back to my message. Cool.

And now, I can actually test this out if I wanted to send myself a test. And then here's all my test users. I'll just send them to everybody. To set a test user that's back in the ALL USERS tab, you'll see these actions. I can find my device and I just add the test user and then put my test username here. I'll just say this is a Jon demo.

Yeah. Oh, sorry. I lost my train of thought for a second. Okay. So now, I'm good. I tested it out. It looks good. I'm ready to send. I can send the message immediately or up to 30 days in advance, just put the time you want. And then I can deliver the message immediately at that time. Or I can use the time zone feature where I can basically send a notification at maybe eight o'clock in each user's time zone. I can now review. Looks good. Send message. Continue. And now, that message will show up in my campaigns here.

Once it loads, it'll look like this. I can save as a draft. I should have showed that. One of the options was you can save a message as a draft. Basically back in the campaign page, I can save it as a draft. And then it will show up here as a draft that I can update to send again later. And then also, you can see the high-level stats about how many were sent, how many devices we sent to, how many were delivered. The difference between sent and delivered is that, well, we targeted 76 users in this case, but it looks like 16 of them were unsubscribed. So, only 50 of them were delivered. And then how many clicks we got.


Also, if you're going to be using this, instead of recreating messages over and over again, you can actually go to Actions and duplicate the message. So, that will basically recreate the message for you. I can just make my little changes if I want. Maybe this one's not actually 10% off, this is a 20% off, and I can update the information here. Okay?

All right. We actually... Wow. Time flies when you're having fun, right? Okay. We're actually done with the demo. I want it to give plenty of time for Q and A. I'm not seeing any questions being asked. Were there any questions about this? Was this helpful? Has anybody not set up the OneSignal app yet?

Sorry, I'm not used to doing webinars. I'm seeing if there was a way to allow for chatting or raising your hand. It seems like if you want to raise your hand or ask questions, I guess I can allow you to talk on my side. Otherwise, that's it. If you want to head off the demo, we'll go ahead and close. I can stay on for a little bit longer. If anybody has any questions, feel free to post something in the Q and A or in the chat. Otherwise, I'll let you go.

All right. Thanks everybody. Have a great rest of your day.