Need Help with Shopify?

This is our jam, we can help you with any challenge you have with Shopify. Small changes or complete site integrations. 

Book a call

Everything You Need to Know about Notifications in Shopify | Tutorial

Posted by on

We use notifications to inform our clients about anything that’s happening within Shopify. If, for example, an order or a fulfillment gets processed, the client gets an update via a notification.

Today you're going to learn:

- How to set up the design of your notification. 

- How to set up the content of an SMS and an e-mail notification using liquid code. 

Note: None of the default notifications inside Shopify can be turned off through the dashboard. If you're using a third party APP, and they don't have a way of turning off the notifications through the API, they're going to receive two notifications. You, therefore, want to make sure that all the notifications that you set up are the priority ones inside Shopify. So the one that gets set up is the one inside Shopify, and if you're using a third party APP, you want to turn off the third party APP's notifications.



1. How to Set Up the Design of Your Notification


To customize the design of your notification and see what it looks like before it gets sent out, go to your dashboard, hit 'Settings', 'Notifications' and then hit the 'Customize' button. 



On the right-hand side, you’ll get to choose the logo, the width of it and the accent color of your notification. 

2. How to Set Up the Content of Your Notification


To change the content of your notification, you need to create a mixture of liquid code and html code. This applies if you want to add information, such as a customer service phone number or a map to your store. To do this, go back into notifications and choose whether you want to set up the code for the SMS or the e-mail.

2.1. SMS Notification

 



There are two different types of declarations within the liquid code: the process and the output. A process is identified by a single curly brace with a percent sign. In this case, it's either going to be setting a variable, or it's going to pull information and do something with it.

An output declaration is made of a double curly brace and outputs information such as the customer's first name or the order item title.



Note: It’s very important to keep those two declarations separate when you’re starting to get into liquid coding, otherwise the system might end up processing something that initially was supposed to be an output. 



2.1.1. The ‘If’ and the ‘Unless’ Statement


The first thing we want to do is to write an ‘if’ statement which goes around the customer's first name. 



The first ‘if’ statement that we have is an ‘unless’ statement. The 'unless' statement is the opposite of an 'if' statement. So in regular programming, if you have an ‘if’ statement, you also have an ‘end’.

 

If the customer didn't fill out a first name, it's just going to say ‘Hi’, and then it's going to put a comment in there. 



2.1.2. Order Total Price



This is where we get to access our first piece of liquid code, which outputs the information of the order total price. If you want to generate a nice and clean look, you can add a dollar sign by using a filter — also known as pipe — on top of this liquid code. You can apply this filter by typing ‘money’.



2.1.3. Shop Name

The shop name is another variable inside of Shopify which we enter: 'from {{shop.name}}!

'

 

2.1.4 Shipping

This is where the first ‘if’ statement comes in:

 if the order consists of a physical product and not a digital product and requires shipping,

 it's going to say:

 'We’ll notify you when it ships.'



Otherwise, the ‘else’ statement of the SMS applies: 'we'll notify you when it's ready.'

2.1.5. URL Tracking Number

You also get to set up whether the order has a status URL, where customers can click on and see where the shipment is at, or not.

 

'{% if order.order_status_url%}View order ({{ order.name }}): {{ order.order_status_url }}{% endif %}

'

2.1.6. Text Stop



The final thing you get to set up in the text message is the text stop.

 

'Text {{ ‘stop’ | upcase }} to unsubscribe.'



This is a link that gets in as a variable from the Shopify system to unsubscribe clients.



Note: If all of this information feels a bit overwhelming, have a look at our documentation which explains all the variables, what each of them is used for and how to apply them: 

2.2. How to Change the Content of an E-Mail Notification 



To change the content of your e-mail notification, you need to create a html code. If you’re not comfortable doing this, go out and build your html document in another editor first. Copy the code in and swap out the variables. You can use it in a WYSIWYG editor or MailChimp editor, which shows you what your code is going to look like once it's finished.



3. Anything else You Need to Know about Notifications

Below I listed a few additional things which are worth knowing when it comes to setting up your notifications. 

3.1. Style



Note: This is the place where all the styles are being stored. There's no way to access all of your styles inside your e-mail notifications, so they have to be set up as inline styles. 



As you can see in the screenshot, it says '<style>' and then it starts off an inline style.

Anything that you're willing to be rendering inside your e-mail needs to be in that style. This is due to the old technology that we are using with our e-mail browsers.

3.2. Examples of Notifications


You can find examples of the different types of notifications that you'll use for your customers under 'Notifications':

3.3. Desktop Notifications


If you enable desktop notifications, your desktop is going to show you a little window on the top hand corner whenever things happen.


That's it. To receive updates, drop your email in the form below and we will let you know each time we post a new blog.

← Older Post Newer Post →


Subscribe to our mailing list

* indicates required

How to Shopify

RSS

Need Help with Shopify?

This is our jam, we can help you with any challenge you have with Shopify. Small changes or complete site integrations. 

Book a call