Back in stock notifications

If a product, or variation of that product, is out of stock - you can include a 'back in stock notification' form on your website.

Your visitors can enter their name, and email address, and then be automatically notified when you put the item back in stock in the admin system.

An example of the form is shown above. It's simple to use and is entirely automatic, you don't need to do anything apart from place the product back in stock on your admin system. The customer is notified automatically.


Installing the extension

Select 'apps and extensions' from the left menu and then 'available extensions'. Find the 'back in stock notification' extension and click to activate it on your account.

Once the extension is activated you'll then need to add the relevant code to your website's files (described below). Adding the code will place the form on your website. To add the relevant code you'll need to use the page editor, alternatively you can click the 'request installation' button and we'll install the code for you (a small charge will be made for the installation, which is listed on the extension page).

For self-installation

1. Locate the product.twig file (located in /views/product pages/product.twig)

2. Add the code, shown below, where you'd like the form to be shown on the product page. It's important that this code is placed within the main <form> on the product page

<div class="stock-requests-container">
    <p>
        <b>Want to be notified when this product is back in stock?</b> 
        Complete the form below and we'll send you an email when it is.
    </p>
    <input type="text" name="stock_request_name" placeholder="Your Name">
    <input type="text" name="stock_request_email" placeholder="Your Email Address">
    <button name="stock_request" value="1" type="submit">Send Your Request</button>
</div>

For example


Click to save your changes to the file.

Please Note: The code for the above comes with no styling, so it will need to be styled (with CSS or inline styles) to display nicely.

3. If your theme uses LESS files, find #product-container within the LESS files of your website (located in the /stylesheets folder) and add the following code

    &.in-stock {
      .stock-requests-container {
      display: none;
      } 
    }

e.g.

Click to save your changes to the file.

If your theme just uses one CSS file (usually default.twig.css) locate #product-container and add the following code

#product-container.in-stock .stock-requests-container {
  display:none;
}

Click to save your changes.

4. Test the product page on your website (by viewing a product) to make sure that the form behaves properly. It should only display when a product or selected product variation is out of stock, and should be hidden when a product or variation is in stock.

5. You should also test that a product can be added to the basket without any problems.

Warning!

The back in stock notification system is not compatible with bundle products so, if you are using the product bundles extension, you should code the section not to display on bundle products.


Setting up and using back in stock notifications

As mentioned above, the system is completely automatic, but you do need to configure a couple of settings.

Select 'products' from the left menu and then 'view stock requests'.

Click the 'notification settings' from the top menu and select at what time of the day the notifications should be sent out (notifications are sent out once per day).

It's probably wise to set the notification time after you update your stock levels (if you do this at the same time each day).

Stock requests will also expire automatically after a fixed period of time. Notifications are not sent out to expired requests. You can set the expiration time in the 'requests expire after' box.

Click the 'save changes' button and everything will now be setup. We'd advise you to test the system yourself to make sure it is working correctly.


Managing stock requests

In future, all requests to be notified when an item is back in stock will be shown here (as shown on the example below).

In the status column you'll see whether a product has come back in stock and the customer has been notified. A request can have one of 3 status (either expired, notified or not notified).

You can adjust the status yourself by ticking the box (in the 'select' column) and at the bottom of the page selecting the new status from the drop down list (and then clicking 'save').