How the Notify Me Widget Works in Backend
The Notify Me widget (button or form) is automatically injected into your Shopify theme. We use artificial intelligence to find the best placement on your product, collection, or home pages.
When you install the ReStock Alerts app:
Our backend inspects your product page code.
It identifies where to place the widget using our JavaScript SDK.
The SDK creates and injects the button and subscription form on your store automatically.
While we match the button placement and style with your theme, some cases may require manual customization.
Manual Placement (For Developers)
If you want to control exactly where the button appears, you can manually place the widget in your Shopify theme.
Product Page
Add a button, link, or image with:
An
idofrestock-{{ product.handle }}for recognition by our SDK.Any additional
classfor styling.
Examples:
Button:
htmlCopyEdit<button id="restock-{{ product.handle }}">Notify Me</button>Link:
htmlCopyEdit<a href="#" id="restock-{{ product.handle }}">Notify Me</a>Button with type:
htmlCopyEdit<button type="button" id="restock-{{ product.handle }}">Notify Me</button>
Collection Page or Home Page
Use the same approach but only display when the product is out of stock:
liquidCopyEdit{% unless product.available %} <button id="restock-{{ product.handle }}">Notify Me</button> {% endunless %}Finding the correct file may vary by theme. Check your template folder for product, collection, or JSON/Liquid files.
Learn more: Shopify: Edit theme code
Customizing the Widget with CSS
You can adjust the widget’s appearance using CSS to match your store’s branding.
Global Classes
These classes apply styles across all pages:
.restock-alerts-notify-button.restock-alerts-modal-wrapper.restock-alerts-modal-box.restock-alerts-form.restock-alerts-modal-title.restock-alerts-modal-description.restock-alerts-email-input.restock-alerts-email-error.restock-alerts-variant-select.restock-alerts-submit-button
Examples:
Change button color:
cssCopyEdit.restock-alerts-notify-button { background-color: red !important; }Remove border:
cssCopyEdit.restock-alerts-form { border: none !important; }
Page-Specific Classes
To style specific pages:
Product Page:
.PRODUCT_PAGE-notify-buttonCollection Page:
.COLLECTION_PAGE-notify-buttonHome/Landing Page:
.LANDING_PAGES-notify-button
Example:
cssCopyEdit.PRODUCT_PAGE-notify-button { font-size: 18px; }Use !important to ensure your styles apply correctly.
Hiding or Showing the Button with JavaScript
You can hide the button conditionally using JavaScript.
Example: Hide for Products with “gold” in the Handle
javascriptCopyEditconst product = {{ product | json }}; _ReStockConfig = window._ReStockConfig || {}; _ReStockConfig["disable_button"] = product.handle.includes("gold");Example: Hide for Collections with the Handle “sports”
javascriptCopyEditconst collection = {{ collection | json }}; _ReStockConfig = window._ReStockConfig || {}; _ReStockConfig["disable_button"] = collection.handle == "sports";Add these snippets to your product or collection templates as needed.
Troubleshooting
Button Not Displayed:
Our AI may not find placement on some custom themes. Use manual placement to inject the widget where needed.
Button Style Issues:
If the button displays incorrectly due to theme styles, use the CSS classes above to adjust styling.
Button Appears Briefly on Available Products:
Shopify may temporarily display the button before loading our SDK. To prevent this, use:
liquidCopyEdit{% unless product.selected_or_first_available_variant.available %} <button type="button" id="restock-{{ product.handle }}">Notify Me</button> {% endunless %}
Testing on Offline Themes
To test the widget on an offline theme, add this snippet to your product template:
htmlCopyEdit<script> _ReStockConfig = window._ReStockConfig || {}; _ReStockConfig["product"] = {{ product | json }}; </script> <script src="https://cdn.hengam.io/restock-alerts-sdk.js" defer></script>
Note : The Notify Me app must be installed for this to work.