How to Show Pop-Up Form When Product Is Out Of Stock?

Categories
Guide

Hi everyone!

Welcome to the Plerdy channel. My name is Marta, I am a Marketing Manager, and in this video, I will show you how to set up a pop-up on products that are out of stock.

Before we start – make sure you subscribe to our channel and don’t miss new videos.

Online stores usually offer a great variety of products, and among this big number, it might happen that some of the products will be sold out – temporarily or permanently – but the users won’t be able to purchase them at the moment. Especially during sales, like Black Friday, for example.

But that doesn’t mean that those customers are “lost” for us because they wanted to buy a specific product and we cannot offer it. Instead, we can use this opportunity to sell other products to this customer, offer him some “hot” positions on sale, or offer a discount if he orders something different today. Because their chances that a user will close the website after he sees that a product is out of stock are very, very high, and it makes much more sense to offer a discount and keep a customer than lose him.

To do so, we can set up a pop-up specifically on the out-of-stock products. How can we do it?

First of all, we should go to our Plerdy account, open the Forms and Feedback tab, click on the Build form and then choose a type of the pop-up we want to create. For example, we want to create a pop-up showing the top positions on sale so that the user can explore if he likes sth from it. We can create a custom banner. Of course, we would need a banner prepared in advance. But at this point, we will focus not on the design but the setup.

We created this form, and next opened the Display rules tab. Here we go to “Where to show?” and we will see the next rule, “Display by the presence of specific text in the block.” This is exactly what we need. If we hover over the question mark, we will see a short instruction about what we should do next.

Basically, we have to go to our website, open a category page, and find a product out of stock. There has to be a specific element informing customers that the product is unavailable. We should click on this element with our right click and inspect it to get the element class in the CSS selector. All of the products on the website that become out of stock should have such elements with the same class so that when we take it and set up a pop-up based on this selector, we can be sure it will work for all out of stock items.

We copied the CSS selector, then went back to Plerdy and pasted it in the following field. You can also add an in the next field to remember what it was about.

When this is done, we set up other rules if needed, check everything and save a pop-up.

That’s it!

So thanks for watching till the end, and see you in the next videos!

Take care, bye!

Article by:
CEO Andrew Chornyy

CEO Plerdy — expert in SEO&CRO with over 11 years of experience.

Leave a Reply

Your email address will not be published.