Add the Back in Stock Waitlist code snippet to your Shopify store

The Back in Stock Waitlist code snippet adds the Notify me CTA button to products on your Shopify store and is required if you want to let store visitors opt-in to back-in-stock waitlist messages from you. If you’re not already familiar with the Back in Stock Waitlist feature, you may want to check out our Back in Stock Waitlist overview before getting started here.

This guide shows you how to add the Back in Stock Waitlist code snippet to the Default product template on your store. If all of the products on your store use the Default product template, the Notify me CTA button will appear for each product. If you’re using more than one product template, you’ll need to add the Back in Stock Waitlist code snippet to each. 

Back in Stock Waitlist code snippet

<script id="attn-waitlist-eligibility" type="application/json">{
{%- liquid
for variant in product.variants
assign eligibility = 'false'
if variant.inventory_quantity <= 0
assign eligibility = 'true'
endif
assign entry = '"' | append: variant.id | append: '":' | append: eligibility
unless forloop.last
assign entry = entry | append: ','
endunless

echo entry
endfor
-%}
}</script>
<div id="attn-waitlist-trigger"></div>

Add the Back in Stock Waitlist code snippet to your Shopify store

Where you add the Back in Stock Waitlist code snippet depends which template editor you’re using for your store. Here’s how you can check:

1. Sign in to your Shopify store and select a store.
2. Under Sales channels, click Online store > Themes.
3. Click Customize on your current theme.
4. Click the dropdown menu at the top of the page and select Products > Default product.
5. Check to see which of the following appears below Template:
   
   • A list of blocks and the + Add block button, you can add the code snippet with theme blocks.
     
   • A list of sections and only the + Add section button, you can add the code snippet with code.
     

Add the code snippet with theme blocks

1. Sign in to your Shopify store and select a store.
2. Under Sales channels, click Online store > Themes.
3. Click Customize on your current theme.
4. Click the dropdown menu at the top of the page and select Products > Default product.
5. Under Product information, click Add block and select {/} Custom liquid.
6. Click the {/} Custom liquid you added, and paste the Back in Stock Waitlist code snippet.
7. Click and drag the six dots move icon next to the {/} Custom liquid block you added to where you want the Notify me CTA button to appear on your product pages.
   
   Tip: We recommend placing the Notify me CTA button directly below your Buy/Add to Cart buttons.
8. Click Save in the upper right corner of the editor.

Add the code snippet with code

1. Sign in to your Shopify store and select a store.
2. Under Sales channels, click Online store > Themes.
3. Click Customize on your current theme.
4. Click the dropdown menu at the top of the page and select Products > Default product.
5. Click the three dots on the top left of the page and select Edit code.
6. Scroll to Sections and click product-template.liquid.
7. Paste the Back in Stock Waitlist code snippet where you want the Notify me CTA button to appear on your product pages.
   
   Tip: We recommend placing the Notify me CTA button directly below your Buy/Add to Cart buttons. If you’re adding the snippet with the code editor, paste the Back in Stock Waitlist snippet immediately after the code for the Buy/ Add to Cart button.
8. Click Save in the upper right corner of the code editor.

Confirm that your Shopify store generates new product-view events for product variants

In order for the Back in Stock Notify me CTA to appear when store visitors switch between product variants, like size or color, your Shopify store must generate a new product-view event when new product variants are selected. Your Shopify store can generate new product-view events when product variants are changed in two ways:

• When store visitors change product variants, the URL of the page must update to include a new ?variant={variant ID} parameter. The variant ID in the URL must change to the ID of the product variant selected by the store visitor.
• When store visitors change product variants, the .value property of the HTML element found with document.querySelector('[name=id]') must change to the ID of the product variant selected by the store visitor.
  
  The Attentive tag will check document.querySelector('[name=id]').value every half second. 

Change the style of the Notify me CTA

You can match the style of the CTA button to any CSS class that already exists in your Shopify store’s theme or by modifying the Attentive code snippet that you add to your Shopify store.

You can also use the style attribute to override your theme’s CSS.