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

Important: 

  • You must have an administrator-level role or a role that permits you to edit store templates in order to add the Back in Stock Waitlist code snippet.
  • Back in stock waitlist is not directly supported for Shopify stores using custom themes.
  • This article explains how to add the code snippet to your Shopify theme so that the Notify Me CTA button appears in your Shopify store and customers can sign up for the wait list. See Create a Back in Stock Waitlist sign-up unit to learn how to change button copy. You can change the button’s style by following the instructions below.

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.

wait-snip-button.png

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. 

Important: Before you can send Back in Stock Waitlist messages to subscribers, you’ll neeed to complete three workflows:

You can complete the above workflows in any order, but each must be completed before you can use this feature.

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:

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.

Important: If you haven’t yet, you’ll need to complete the following two workflows before your can start sending subscribers automated back in stock waitlist messages:

  • Created and activated a Back in Stock Waitlist sign-up unit
  • Created and activated a Back in Stock Opt In journey

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.

Example: Your Shopify site theme has a CSS class for buttons called .btn.. When you add the code snippet to your Shopify site, add class=”btn” to <div id="attn-waitlist-trigger"></div> like so:

<div id="attn-waitlist-trigger" class=”btn”></div>

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

Articles in this section

Was this article helpful?
0 out of 3 found this helpful