'Now Back in Stock' Installation Guide

To install Now Back in Stock, go to your shop's admin area, then go to 'Online Store' > 'Themes' > 'Edit HTML/CSS'. Then find 'Templates' and select 'product.liquid'.

Check if your theme use sections. If your template looks like the example below you will need to go to 'Sections' and click on 'product-template.liquid'.

Find the form that adds an item to your cart. The start of the form will look something like this:

Insert the following code directly under this tag.

<script data-app="esc-out-of-stock" type="text/json">[{% for variant in product.variants %}{"id":{{ variant.id }},"title":"{{ variant.title }}","option1":{% if variant.option1 %}"{{ variant.option1 }}"{% else %}null{% endif %},"option2":{% if variant.option2 %}"{{ variant.option2 }}"{% else %}null{% endif %},"option3":{% if variant.option3 %}"{{ variant.option3 }}"{% else %}null{% endif %},"sku":{% if variant.sku %}"{{ variant.sku }}"{% else %}null{% endif %},"requires_shipping":{{ variant.requires_shipping }},"taxable":{{ variant.taxable }},"featured_image":{% if variant.featured_image %}"{{ variant.featured_image }}"{% else %}null{% endif %},"available":{{ variant.available }},"name":"{{ variant.name }}","public_title":"{{ variant.public_title }}","options":{{ variant.options | json }},"price":{{ variant.price }},"weight":{% if variant.weight %}{{ variant.weight }}{% else %}0{% endif %},"compare_at_price":{% if variant.compare_at_price %}{{ variant.compare_at_price }}{% else %}null{% endif %},"inventory_quantity":{{ variant.inventory_quantity }},"inventory_management":{% if variant.inventory_management %}"{{ variant.inventory_management }}"{% else %}null{% endif %},"inventory_policy":{% if variant.inventory_policy %}"{{ variant.inventory_policy }}"{% else %}null{% endif %},"barcode":{% if variant.barcode %}"{{ variant.barcode }}"{% else %}null{% endif %}}{% unless forloop.last %},{% endunless %}{% endfor %}]</script>

If you would like to show your Now Back In Stock form in a specific place on your product page, you will also need to insert the following code in the place you want the form to appear:

<div id="esc-oos-form"></div>

If you choose to skip this step, the form will appear above the Add to Cart form.

To check the install is complete, navigate to a product that is out of stock. You should now see the Now Back In Stock form.

That's it. Your customers can start requesting Now Back In Stock alerts!