How to Create Product Sales Popup Notifications in Shopify Without Apps

Introduction

There is no doubt that Shopify store owners are well aware that real-time product notifications are an effective way to increase sales and credibility. Sales popup notifications simulate recent purchases, giving potential customers the perception of activity in your store. This encourages them to buy more and creates social proof. While apps are available to implement this feature, building it directly into your theme will save you money on app fees, ensure faster site speed, and enhance in-house options for customization.

In this Shopify sales notifications tutorial, we’ll walk you through creating a Shopify custom sales popup directly within your theme code—without needing third-party apps.

Step 1: Setup the Notification Section in Your Theme Files

• Create a new section, and name the file sales-popup-notifications.liquid.
• This will allow us to build out the structure of our Shopify sales popup HTML/CSS notifications.

Step 2: Add Toastify for Styling and Animation

In your newly created sales-popup-notifications.liquid file, add the following as your first lines of code: links to Toastify. It’s a lightweight library that will handle the animations of our pop-up windows.

Code:

Toastify simplifies the process of creating custom notifications in Shopify, providing you with an easy way to handle the manual popup notification Shopify and styling using minimal Shopify coding for popups.

Step 3: Capture and Display Products

Here is the loop code that goes through the product blocks you will put in the customization section and creates a set of chosen products.

This script allows you to dynamically capture product handles, create variables for each product, and display a Product sales notification Shopify code. The Shopify sales popup will include the product image, title, and style to make the popup more engaging

Step 4:Timing for POPUP Notifications

This code allows you to set a minimum and maximum delay between popups so these notifications can appear at random, giving the popups a more realistic look.

Code:

This code randomly selects a product from the list and displays its Product sales alert Shopify. The interval between popups is randomized, making it appear more natural and less repetitive.

Ready to launch your Shopify store? We will create a standout site with our development and optimization to build a store that sells.

Contact us now and get your store up and running fast!

Step 5: Add Schema for Customization in Shopify Theme Editor

So, to simplify the process of setting products and timing in Shopify’s theme editor, let’s add the following schema at the end of sales-popup-notifications.liquid :

Code:

This schema enables you to select products and adjust the timing of popup notifications under the Sales Popup Notifications section within your theme editor. It’s a simple way to manage and configure the custom notification bar Shopify with ease.

Step 6: Apply CSS for Styling

Add this CSS to the assets/theme.css file to style the Toastify notification layout

Code:

Step 7: Add it to your theme layout

This will enable it in your store. Open theme.liquid and add the following code after thetag:

Code:

This will add the popup notification feature to all pages that use the theme layout.

Step 8: Customize and test on your home page

Now, go to Customize > Sales Popup Notifications in your Shopify theme editor. Here you can select products and adjust the timing settings for the popup notifications. Make sure the manual popup notification Shopify works as expected, with the right timing and appearance.

Step 9: Output

Conclusion

Creating product sales notifications from Shopify directly in your theme code is an efficient and cost-effective way to boost your store’s credibility and drive sales. By following this Shopify coding for popups tutorial, you can add a custom notification bar Shopify without any third-party apps. You’ll save on app costs, have more control over styling and timing, and enhance the user experience with a Shopify custom sales popup that integrates seamlessly with your store.

Once you’ve implemented the coding sales popups in Shopify, track your store’s performance and make any necessary adjustments to match your brand’s style and goals.