The Back in Stock Waitlist code snippet adds a “Notify me” CTA button to out of stock products on your store. This code snippet is required if you want to let store visitors opt in to back-in-stock waitlist messages from you.
Note: Before you can send Back in Stock waitlist messages to subscribers, you’ll need to complete three workflows:
- Create a Back in Stock Opt In journey
- Create a Back in Stock Waitlist sign-up unit
- Add the Back in Stock Waitlist code snippet to your non-Shopify or headless/Hydrogen Shopify store (instructions below)
You can complete these workflows in any order, but each must be complete before you can use this feature.
For more information about the Back in Stock waitlist feature, see the overview before you get started.
Back in stock waitlist code snippet
Add the “Notify me” CTA to your store using the code snippet below. Add the snippet based on where you want the CTA to be injected when a product is out of stock. This will likely be the same place as the out of stock button, but might differ depending on your store setup:
<div id="attn-waitlist-trigger"></div>
You must also add an HTML class name in the logic used to display your out of stock button or messaging. This should only be present when the item is actually out of stock:
attn-oos
This class name lets Attentive know where to look for the out of stock messaging on your store to determine whether to display the “Notify Me” CTA.
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 store’s theme or by modifying the Attentive code snippet that you add to your store.
Example: Your site theme has a CSS class for buttons called .btn. When you add the code snippet to your 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.