Create Sales Pop-up Notifications

Table of Contents

1. Introduction
2. Creating a Sales Pop-up Notification without Shopify Apps
3. Using Toastify.js to Create Toast Windows
4. Creating Schema Settings for Products
5. Implementing Javascript Code with Toastify.js
6. Designing the Sales Pop-up Notification
7. Adding Blocks to Customize the Products
8. Using Liquid Code to Access Shopify Store Data
9. Customizing the Appearance with CSS
10. Displaying Toast Windows Randomly with Javascript

Creating a Sales Pop-up Notification without Shopify Apps

In this article, we will discuss how to create a sales pop-up notification for your Shopify store without the need for any external apps. We will utilize the Toastify.js JavaScript plugin to create toast windows and display product information. By following the step-by-step guide, you will be able to implement this feature on your store and customize it to fit your brand's design.

Introduction

Before we dive into the implementation details, let's first understand the concept of a sales pop-up notification. This type of notification is a visual element that appears on a website to notify visitors about recent sales or product purchases. It serves as a psychological tool to build trust, create a sense of urgency, and encourage potential customers to make a purchase.

Using Toastify.js to Create Toast Windows

The first step in creating the sales pop-up notification is to use the Toastify.js JavaScript library. Toastify.js allows us to easily create toast windows, which are small, non-intrusive message boxes displayed on the screen. These windows can be customized to show various types of information, including the products that have been purchased.

To start, open your browser and go to the Toastify.js GitHub repository. Scroll down to find the CDN links for the CSS and JavaScript files. Copy these links and paste them into your Shopify store's theme code editor.

Next, open the theme's "Customizer" page and navigate to the "Sales Pop-up Notification" section. This section will enable us to create blocks that will later be used to display the products in the notification.

Creating Schema Settings for Products

In order to use the products from your Shopify store in the sales pop-up notification, we need to create blocks that will allow us to select the desired products. Open the theme code editor and create a new section file called "Sales-Pop-Up-Notification". Within this file, define the blocks that represent the products using the "name" and "type" fields.

Underneath the "name" and "type" fields, create the "settings" field to define the settings for the block. Inside the "settings" array, create an object defining the type and id of the setting. Add a label and a value corresponding to the selected product.

Save the section file and return to the Shopify customizer page. Refresh the page, and you should now see a dropdown button in the sales pop-up notification section. Click on the add product button to select the products you want to display in the notification.

Implementing Javascript Code with Toastify.js

Now that we have the required HTML and schema settings, it's time to implement the JavaScript code that will use the Toastify.js library to display the sales pop-up notification. Open the theme code editor and navigate to the "Theme.liquid" file. Scroll down to the opening of the body tag and create a section tag referencing the "Sales-Pop-Up-Notification" section.

Save the file and go back to the customizer page. Refresh the page, and you should now see the sales pop-up notification section. We will now move on to customizing the appearance of the notification.

Designing the Sales Pop-up Notification

To customize the design of the sales pop-up notification, we will use CSS. Open the theme code editor and create a new style tag. Inside this tag, use the Toastify class to target the sales pop-up notification. Set the display property to flex and justify-content property to space-between to horizontally align the elements.

Next, set the flex-direction property to reverse to reverse the order of the elements. This will ensure that the product image appears on the left side, the title in the middle, and the close button on the right side.

With the CSS in place, we can now go back to the Shopify store and refresh the page. You should now see the sales pop-up notification with the custom styling applied.

Adding Blocks to Customize the Products

To display the toast windows with the product information, we need to loop through the blocks and access the selected products. Open the theme code editor and create a for loop using the product block. Inside the loop, assign the selected product to a variable.

Within the loop, use the assigned variable to access the product title and truncate it to a specific length. This will ensure that the toast window is not too large. Use the product's featured image as the avatar.

Add the necessary logic to show the toast using the Toastify function, passing in the product information and customizing the duration, position, and appearance of the toast window.

Save the file and refresh the Shopify store page. You should now see the toast windows displaying the selected products.

Using Liquid Code to Access Shopify Store Data

To make the sales pop-up notification dynamic and display different products each time it appears, we can use Liquid code to access the products from the Shopify store.

Above the for loop, create a capture tag to capture the variable names of the selected products. Use the assign tag to assign the product handles to a variable called "var_name". Use the truncate and replace filters to format the variable names.

After the for loop, create another script tag to convert the captured variable names into a JavaScript array. Use the split function to split the names by the comma delimiter and eliminate any whitespace or line breaks.

Use the resulting array to select a random product handle and display the corresponding toast window using the evaluate function. This will ensure that a randomly selected product is shown each time the sales pop-up notification appears.

Save the file and refresh the Shopify store. You should now see different product toast windows each time the notification is triggered.

Customizing the Appearance with CSS

To further customize the appearance of the sales pop-up notification, you can use CSS. Add styles to target specific elements of the toast windows, such as the product image, title, and close button. Adjust properties like width, height, color, background color, and padding to create the desired look and feel.

Save the changes and refresh the Shopify store to see the effects of the CSS customization.

Displaying Toast Windows Randomly with Javascript

By default, the toast windows will appear as soon as the page is refreshed. To create a more dynamic and engaging user experience, we can add a delay before showing each toast window.

Create a variable called "timer" and assign it a random value between the maximum and minimum time values. Use the setTimeout function to delay the display of the toast window. Inside the setTimeout function, call the "showProductSale" function again after the timer expires.

Save the file, refresh the Shopify store, and observe how the toast windows appear randomly after a delay.

Conclusion

In this article, we discussed how to create a sales pop-up notification without using any Shopify apps. By utilizing the Toastify.js JavaScript library and leveraging liquid code, we were able to display toast windows with product information in a visually appealing manner. By customizing the design and adding random delays, you can create a more engaging user experience on your Shopify store.

We hope this article has provided you with the necessary information and guidance to implement a sales pop-up notification on your Shopify store. Remember to experiment with different designs and settings to optimize the effectiveness of your sales pop-up notification.

If you have any questions or need further assistance, feel free to leave a comment below. We appreciate your feedback and look forward to helping you enhance your Shopify store's user experience.