The "Notify When Available" button is automatically placed in most of the stores after integrating it through the app dashboard.

The widget integrates correctly with the integrated Themes listed; in some random scenarios, we need to place it in the store manually, for that we use a CSS or a jQuery selector. Also, for custom or non-integrated themes, the widget may not display. In those cases, we can get the button placed by selecting the location using selectors.

To place the Notify “When Available” button yourself, please do the following:

1- From the App dashboard -> Go to Theme Integration

2- Find the “Selector” section..

There, you will see the field to use a CSS selector. Selectors are patterns used to identify elements in CSS, so if you have some knowledge of HTML and CSS and you feel comfortable with it, you can easily find the right selector.

You can use the web DevTools built into your browser to look for and find your desired selector.

To open DevTools on Google Chrome, press Ctrl+Shift+i on Windows devices or CMD+Option+i for Mac. Once there, you can use the selection tool to find the HTML element, which corresponds to the section under the cursor. After that, you can go to the web page you want to inspect, and as you hover a node-section and move the cursor over the page, the HTML element will be highlighted (in blue) in the Elements panel.

Once you have found the selector you want to use, you can copy that selector:

And paste it in the selector box from the app preferences page:

3- Once you’ve found the best CSS selector, you need to choose the placement of the widget based on the selected element. You can choose if you want it “Before” or “After” the selected element and also, you can place it as the “First child” or “Last child” of the element:

These options will help you to place the widget in your desire location properly.

Remember that we can always help you place the widget. Just drop us a message, and we will be glad to help you.