How to add notification popup in Shopify?

How to add notification popup in Shopify?

Nowadays some e-commerce websites are using a new marketing strategy to attract more visitors to their store. The topic we are discussing today is related to increasing your store conversion up to 4 times. These days customers are getting smarter than before when it comes to purchasing any product from your store, they want to know if someone else also purchased this before or not. To increase store sales and convince customers to buy their products, owners have started to use Push Notification pop-up.

So, What is this Push Notification pop-up?

Push notification pop-up is a technique to show a pop-up on your browser screen when you visit a website. For aspects, it can be used to show products that are recently sold in your store. It can also be used to show the latest blog posts on the store.

Sounds amazing, How can I integrate it in my Shopify store?

Well, today I am going to show you how you can integrate it into your store. So let’s get started.

Note:- This tutorial is only useful for Shopify users or developers. If you are not a developer and want us to develop Shopify based solution for you then you can contact us.

Follow each step and you will get your own handmade notification popup:

• First of all, you need to create a new JavaScript Snippet in your Shopify Theme. Shopify Admin panel > Online Store > Themes > Edit HTML/CSS > Snippet > Add new snippet. It will look like “name_of_your_snippet”
• Paste following code in the new snippet and save it.
  <script src="https://gist.github.com/developer-vivacity/7af062fa9476fb95e8c73d0e60294b55.js"></script>
• Now let’s create some settings for our notification popup. These settings can help you to change the heading and other notification related settings. To do this you have to go in Config > Settings_Schema.json file and add this code at the end of file right before the final closing bracket “]”.
  <script src="https://gist.github.com/developer-vivacity/a9a1cecd8cb0b3fc8fddfd56e8083ce9.js"></script>
• Now we are done with back-end settings. Let’s add some styling to our notification block so that it won’t look ugly. To do this click on Assets folder right below Snippet folder and click on “Add new asset”. Now choose ‘Create new file’, add filename “notify_popup” and choose file extension “.scss.liquid”.
• After creating the file add this code to it and save it.
  <script src="https://gist.github.com/developer-vivacity/0d351ec0f8858964d59303e84bcdc7d9.js"></script>
• Now one last step is to embed {% include ‘name_of_your_snippet’ %} into before in Layout folder.

That’s it! Your notification pop-up is ready and started to display on your storefront. You can also change its styling and appearance timing.