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 Restockify 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 into 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 a button, link, or even an image on the product page. 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.

Note: 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 the product page, collection page, or even home page. The only point is that since on 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

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 classes of the widget elements to use in your CSS code:

Global Classes

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

.restockify-notify-button // Main class of notify button

.restockify-modal-wrapper // Modal wrapper element
.restockify-modal-box // Modal card element

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

For example, you can change the background color of the button on all pages with this CSS code:

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

Or you can remove the border of the inline form with:

.restockify-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 on the product page:

.restockify-float-button // Additional class for float button

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

For example, if you just want to change the font size of the button on the product page while the collection and home page stay the same, you can write:

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

Collection page related class

Use this class if you want to change the button style only on collection pages:

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

Home page-related class

Finally for the home page and landing pages use this class:

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

Hide/Show Button

Add 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.

_RestockifyConfig = window._RestockifyConfig || {};

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

For example, if you want to disable the button for products whose 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 }};

_RestockifyConfig = window._RestockifyConfig || {};

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

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

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

const collection = {{ collection | json }};

_RestockifyConfig = window._RestockifyConfig || {};

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

Troubleshooting

The button is not displayed

Although automatic injection works most of the time 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 a manual placement to inject the button into your desired position.

The button does not have a 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.

Pay attention that it takes a couple of seconds for Shopify to load our javascript SDK and then it will determine if it should display the button or not based on the availability of the product or product variant. So if you do not like the UX, you need to add some logic to your code using liquid to handle the appearance of the button on your side. Example:

{% 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 inject 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 the product section of your theme and you are good to go:

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

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

Advanced customization