Enhance Customer Experience with Customized Shopify Notifications

Table of Contents

1. Introduction
2. Setting Up Notifications in Shopify
   • Customizing Notifications
   • Changing Logo and Accent Color
3. Customizing Notification Content
   • Understanding Liquid Code
   • Adding Variables and Filters
   • Conditional Statements
4. Setting Up SMS Notifications
   • Handling Blank Order Confirmation
   • Including Order Total Price
   • Notifying Shipping or Pickup Status
   • Adding Order Status URL
5. Setting Up Email Notifications
   • Building HTML with Liquid Code
   • Inline Styles for Email Notifications
6. Other Types of Notifications
   • Orders
   • Shipping
   • Customer Templates
   • Recipient Notifications
7. Enabling Desktop Notifications
8. Using Webhooks
9. Conclusion

Setting Up and Customizing Notifications in Shopify

When running an online store using Shopify, it's important to effectively communicate with customers regarding orders, fulfillment, and other important events. Shopify provides a robust notification system that allows you to set up and customize notifications according to your brand and customer experience. In this article, we will guide you on how to set up notifications and customize them to suit your needs.

Setting Up Notifications

To start customizing notifications, navigate to the Settings section in your Shopify dashboard. Look for Notifications, which is located in the middle of the screen. Here, you will find two areas to customize your notifications: the Customize button and the Notifications tab.

Customizing Notifications

Clicking on the Customize button will display an example of what the notification will look like before it is sent out. On the right-hand side, you have options to choose your logo, adjust its width, and set your accent color. By selecting a logo and customizing the accent color, you can ensure that the notifications align with your brand identity. Save the notification after making the necessary changes.

Changing Logo and Accent Color

In order to change the logo, click on the Customize button and select the desired logo. Once added, it will be updated at the top of the notification. You can also adjust the width of the logo and change the accent color to match your brand's color scheme.

Customizing Notification Content

When it comes to customizing the content within notifications, Shopify uses a combination of liquid code and HTML code. This may appear overwhelming at first, but understanding how liquid code works will allow you to make the necessary changes.

Understanding Liquid Code

Liquid code in Shopify is identifiable through two types of declarations. The first type is marked by a curly brace with a percent sign (%), denoting that it is performing some processing. This may involve setting variables or manipulating information programmatically. The second type is marked by a double curly brace ({{}), which signifies that something is being output.

Adding Variables and Filters

By utilizing liquid code, you can insert variables and filters to output relevant information within your notifications. For instance, you can display the order total price using the 'money' filter, which will add a dollar sign and format the amount. Additionally, variables like shop_name allow you to dynamically include your store's name in the notifications.

Conditional Statements

Conditional statements play a crucial role in notifications, enabling you to display specific content based on certain conditions. For example, you can use an 'unless' statement to check if the customer's first name is blank. If it is, the notification can skip personalization and proceed to the next part. You can also use conditional statements to notify customers about shipping status or pickup readiness, depending on the nature of the order.

Setting Up SMS Notifications

SMS notifications are a concise and effective way to keep your customers informed. The process of setting them up involves handling different scenarios and tailoring the message to provide relevant information.

Handling Blank Order Confirmation

To start the SMS notification, the system checks if the order confirmation includes the customer's first name. If the first name is left blank, the greeting will only say "Hi" instead of addressing the customer by their name. This ensures a smooth flow of the notification regardless of whether the first name is provided.

Including Order Total Price

Adding the order total price to the SMS notification is important for customers to be aware of the amount they have been charged. Liquid code allows you to retrieve the order total price and apply the 'money' filter to format it properly, ensuring a clear representation of the cost.

Notifying Shipping or Pickup Status

Depending on the type of order, whether physical or digital, you can provide customers with shipping or pickup status updates. Using conditional statements, you can check if the order requires shipping. If it does, the notification will inform customers that they will be notified when their order ships. If it doesn't require shipping, the notification can assure customers that they will be notified when the order is ready for pickup.

Adding Order Status URL

If your store offers tracking services, it's beneficial to include an order status URL in the SMS notification. This URL will direct customers to a page where they can track the shipment. By including this feature, you enhance the customer experience and provide a convenient way for them to check the progress of their order.

Setting Up Email Notifications

Email notifications offer a more comprehensive way to communicate with customers, allowing for the inclusion of rich content and branding elements. When customizing email notifications, it's essential to understand how to work with HTML and liquid code.

Building HTML with Liquid Code

To build email notifications, you need to combine HTML and liquid code. It's recommended to use an external editor or a WYSIWYG editor like MailChimp to create your HTML templates. Afterward, you can copy the code into Shopify and make the necessary liquid code modifications. Remember to keep inline styles for the email notifications since Shopify's email browsers are compatible with inline styles.

Inline Styles for Email Notifications

Due to browser limitations, email notifications in Shopify require inline styles for all the CSS declarations. You won't be able to access the assets, notifications, styles.css file through themes, which means that all the styles need to be added inline. This ensures that the styles are properly rendered when viewed in email clients.

Other Types of Notifications

Apart from order-related notifications, Shopify provides various other notification options, targeting different types of communications with customers. These include notifications for orders, shipping, customer templates, and recipient notifications. Each of these notifications can be customized and tailored to meet your specific requirements.

Enabling Desktop Notifications

Desktop notifications serve as valuable reminders for important events within your Shopify store. By enabling desktop notifications, you can prompt timely actions and stay updated with the latest activity on your storefront. These notifications appear as small windows in the top hand corner of your desktop screen.

Using Webhooks

Webhooks in Shopify provide a way to receive real-time notifications of store events by sending data to external services. This functionality allows you to integrate with other systems seamlessly and automate processes based on specific triggers or events within your store.

Conclusion

Notifications play a vital role in keeping customers informed and engaged throughout their shopping journey. By customizing and utilizing notifications effectively, you can enhance the customer experience, build trust, and drive repeat business. Take advantage of Shopify's comprehensive notification system to ensure your customers are well-informed at every step of their interaction with your online store.

Highlights

• Shopify offers a robust notification system that allows you to set up and customize notifications according to your brand and customer experience.
• Customizing notifications can include changing your logo, adjusting accent colors, and modifying the content within the notifications using liquid code and HTML.
• SMS notifications enable concise and effective communication with customers, allowing you to provide order confirmation, shipping updates, and pickup readiness information.
• Email notifications offer a more comprehensive way to communicate with customers, allowing you to include rich content and branding elements in your messages.
• Shopify provides various other notification options for orders, shipping, customer templates, and recipient notifications, allowing you to tailor the communication to specific needs.
• Enabling desktop notifications and utilizing webhooks can further enhance your ability to stay updated and automate processes within your Shopify store.

FAQ

Q: Can I turn off default notifications in Shopify if I'm using a third-party app?
A: No, the default notifications cannot be turned off in the Shopify dashboard. If you're using a third-party app that sends notifications through the API, the customer may receive duplicate notifications. It's important to prioritize and customize the notifications within Shopify to avoid redundancy.

Q: How can I track the status of a shipment in SMS notifications?
A: You can include an order status URL in the SMS notifications, which will allow customers to track their shipment. This URL can lead them to a dedicated page where they can view real-time updates on their order's whereabouts.

Q: Are the styles in email notifications customizable?
A: Email notifications in Shopify require inline styles instead of external CSS files. This means that you need to include the styles directly within the HTML code of the email template. Inline styles ensure compatibility with email clients and proper rendering of the notification content.

Q: What are webhooks, and how can I use them in Shopify?
A: Webhooks in Shopify are a way to receive real-time notifications of store events. By setting up webhooks, you can send data to external services, allowing you to automate processes or integrate with other systems seamlessly. Webhooks can be used to trigger actions based on specific events within your Shopify store.