Back in stock notifications

Important!

It is only necessary to add the code below to your theme if you are using a Version 2 or Version 1 theme. Users of Version 3, Version 4 and Version 5 themes do not need to install any code to use these features.

Once you've installed the 'Back in stock notfications' app, you'll need to add the relevant code to your website's theme files by following the instructions which are related to the version theme you are using. Adding the code will enable the notification form to display when a product is out of stock or when the visitor selects a product variation that is out of stock. To change the code you'll need to use the page editor for your live theme. Alternatively, if you don't want to add the code yourself, you can select request installation on the app installation page, and we will change the code for you for a small charge which is listed on the installation page.

• Installation instructions (for version 2 themes or earlier)
• Installation instructions (for version 3 themes or later)

Installation instructions (for version 2 themes or earlier)

1. Locate the product.twig file by selecting Views > Product Pages > product.twig from the menu of the theme's page editor.

2. Add the code, shown below, where you would 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:

Then save your changes to the file.

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

3. 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;
}

Then 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 app, you should code the section to not display on bundle products.

Installation instructions (for version 3 themes or later)

If you're using a version 3 (or later) theme, locate the product_form.twig file by selecting Views > Partials > product_form.twig from the menu of the theme's page editor.

1. 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.

{% if global.features.extensions.back_in_stock and not modal %}
	<div class="stock-requests-container">
		<p>
			Want to be notified when this product is back in stock? Complete the form below and we'll send you an email when it is.
		</p>
		<label class="field-block">
			<span class="field-label">Your name</span>
			<input type="text" name="stock_request_name" class="required">
		</label>
		<label class="field-block">
			<span class="field-label">Your email address</span>
			<input type="text" class="required jsv_email" name="stock_request_email">
		</label>
		<button class="button" name="stock_request" value="1" type="submit">Send Your Request</button>
	</div>
{% endif %}

For example:

2. Save your changes to the file.

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

3. Locate the _components_product.scss file in your theme's stylesheets and add the code below:

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