How it works

The process of injecting our widget (button or form) into Shopify themes is an automatic process. In order to accomplish this goal, we employ artificial intelligence to find the best HTML element to append our widget to.

When a shop installs the ReStock Alerts app, our backend inspects the product page code and provides the appropriate HTML elements for our Javascript SDK.

The javascript SDK then creates the button and subscription form HTML elements and injects them to the provided HTML elements.

Although we try our best to match the button placement and style with your theme, there may exist some use cases which need manual customization that could be found in the troubleshooting section.

Manual Placement

If you are a developer and you want to change the position of the button, all you have to do is to put your desired HTML element in the product liquid section of your product or collection/home page.

Product Page

You can put any HTML element like button, link or even an image. The only point is that you need to add restock-{{ product.handle }} as id attribute to your element, so our javascript SDK can recognize it for opening subscription modal form.

This way you can add any other attribute like class to your element and have full control over its style. Example:

<button id="restock-{{ product.handle }}">Notify Me</button>

Or with a link:

<a href="#" id="restock-{{ product.handle }}">Notify Me</a>

Or any other HTML element that suits your needs.

P.S. If you are using a button, it is a good idea to add type="button" thus it does not act as a submit button.

<button type="button" id="restock-{{ product.handle }}">Notify Me</button>

Collection Page / Home Page

The procedure is the same for product page, collection page or even home page. The only point is that since in collection and home pages the “NOTIFY ME” button only will show up when all of the variants are out of stock, so in their templates you just need to check the availability of the product:

{% unless product.available %}
  <button id="restock-{{ product.handle }}">Notify Me</button>
{% endunless %}

Maybe the hard part is to find the appropriate file in your theme files which can be different depending on the theme but the best place to start is through your template folder and looking for product or collection json or liquid files.

You can check this documentation from Shopify to learn more:

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/edit-theme-code

Customization

If you do not like the look and feel of the widget, you can change the style of the elements with css code. Here are the element’s classes of the widget elements to use in your css code:

Global Classes

These classes are global and if you use theme to change the style, the style would reflect on all of the pages:

.restock-alerts-notify-button           // Main class of notify button

.restock-alerts-modal-wrapper           // Modal wrapper element
.restock-alerts-modal-box               // Modal card element

.restock-alerts-form                    // Subscription form
.restock-alerts-modal-title             // Subscription form title
.restock-alerts-modal-description       // Subscription form description
.restock-alerts-email-input             // Subscription form input
.restock-alerts-email-error             // Subscription form input error
.restock-alerts-variant-select          // Subscription form variant select element
.restock-alerts-submit-button           // Subscription form submit button

For example you can change the background color of the button in all pages with these css code:

.restock-alerts-notify-button {
  background-color: red !important;
}

Or you can remove the border of inline form with:

.restock-alerts-form {
  border: none !important;
}

Do not forget to add !important at the end of each css statement to overwrite the current style.

Product page related classes

You can use these css classes to only change the style of the button in product page:

.restock-alerts-float-button            // Additional class for float button

.PRODUCT_PAGE-notify-button         // Additional class for button in product page

Let's say you just want the font size of the button on the product page to change, but keep the collection and home page the same, you can write:

.PRODUCT_PAGE-notify-button {
  font-size: 18px;
}

Collection page related class

You can use this class if you only want to change the button's style on collection pages:

.COLLECTION_PAGE-notify-button      // Additional class for button in collection pages

Home page related class

Finally for home page and landing pages use this class:

.LANDING_PAGES-notify-button       // Additional class for button in landing pages

Hide/Show Button

Adding hide-notify-btn tag to a product is the best way to disable the button for it. But if you need to specify your own condition using javascript, it is possible by adding the following code snippet.

_ReStockConfig = window._ReStockConfig || {};

_ReStockConfig["disable_button"] = true; // your condition

For example if you want to disable the button for products which their handle contains the “gold” word, you can do it by the following code snippet: (Do not forget to first initiate your javascript variable using liquid objects)

const product = {{ product | json }};

_ReStockConfig = window._ReStockConfig || {};

_ReStockConfig["disable_button"] = product.handle.includes("gold");

Remember that you need to add this javascript to your product page template so it will just apply to your products pages.

Like so for collection pages, if you need to hide button for all the buttons in “sports” collection, just add the following code snippet to your collection page template:

const collection = {{ collection | json }};

_ReStockConfig = window._ReStockConfig || {};

_ReStockConfig["disable_button"] = collection.handle == "sports";

Troubleshooting

Button is not displayed

Although automatic injection works most of the time but in some cases like when dealing with customized themes, our AI is unable to find an appropriate HTML element and as a result, the widget would not show up on product or collection pages.

If that is the case, you can use the same approach explained in manual placement to inject the button to your desired position.

Button does not have good style

Another possible scenario is when the widget has been injected into the theme successfully, however, because of some styles in the theme, it does not look very nice or sometimes it's not visible at all.

The CSS classes of our UI elements are explained in the customization section and you can use them to apply your desired CSS.

Button appearance at first sight

Remember that it takes Shopify a few seconds to load our javascript SDK and then it determines whether to display the button or not based on the product or product variant availability. It's possible that the button would be displayed on available products for these very brief moments. If you do not like this to happen, you’d have to add some logic to your code using liquid to handle the appearance of the button on your side. Here’s the piece of code you can use for that:

{% unless product.selected_or_first_available_variant.available %}
  <button type="button" id="restock-{{ product.handle }}">
    Notify Me
  </button>
{% endunless %}

Working with offline themes

If you are developing an offline theme, it is possible that you need to test the functionality of our app on it.

As you know Shopify just injects our app embed block into the online theme of the store, so if you need to test our app with your under development offline theme, just manually add the following snippet in product section of your theme and you are good to go:

<script>
  _ReStockConfig = window._ReStockConfig || {};
  _ReStockConfig["product"] = {{ product | json }};
</script>
<script src="https://static.shopgram.io/restock-alerts-sdk.js" defer ></script>

Do not forget that you need to have our app installed on your store.

Customize Your "Notify Me" Widget Appearance with CSS

PageFly x Notify Me! integration

EComposer x Notify Me! Integration

Customizing the Low Stock Alert on Product Pages

How Notify Me! Works