Some themes do an excellent job informing viewers when a product in a collection is out of stock, generally with a “Sold Out” tag. If a customer is interested in one of those products and wishes to receive an automated alert, they should be able to do so directly from the Collections page.
Skipping this forces them to visit the product detail page to sign up for a notification, adding unnecessary friction which can be avoided. On a mobile device with a slower network connection, this could mean the difference between successfully engaging that user and losing them entirely.
Open your theme's code editor
Head over to the Online Store tab, and click on the Menu button to access the theme code
Find the name of the file that renders your product tiles
Tip: Searching for files that have product- in their name usually yields the file that contains your collection page's product tile code on most themes.
Depending on the theme, it could be one of these files:
snippets/product-listing.liquid
snippets/products-grid.liquid
snippets/product-grid-item.liquid
snippets/product-card.liquid
snippets/product-listing-item.liquid
snippets/product-loop.liquid
snippets/product-item.liquid
snippets/product-thumbnail.liquid
snippets/product-card-grid.liquid
snippets/product-block.liquid
snippets/product-listing-slider.liquid
snippets/product-thumbnail.liquid
snippets/product-item.liquid
snippets/product-loop-grid.liquid
snippets/snippet-product-item.liquid
Add the button to the collections liquid file that renders the collections grid as a snippet.
Once you know the name of the file that renders the product tiles on your collections pages, you’ll need to add our back in stock alerts button code.
<!-- Swym Watchlist Button On product- tile -->
{% for variant in product.variants %}
{%if variant.available == false%}
<a href="#" class="swym-button swym-custom-watchlist swym-add-to-watchlist-view-product" style='font-family : "swym-icons";' data-url ="{{ shop.url }}{{ product.url }}" data-variant-id="{{CURRENT SELECTED VARIANT ID}}" data-product-id="{{product.id}}"></a>
{%break%}
{%endif%}
{% endfor %}
Create a file called ‘swym-custom.liquid’ in the snippets file and add the following code
<script>
function swymCallbackFn(swat) {
// your API calls go here
attachNotifyMeEvents();
function attachNotifyMeEvents() {
var swymNotifyMeBtn = document.querySelectorAll(".swym-custom-watchlist");
swymNotifyMeBtn.forEach(function(btn) {
btn.addEventListener("click", addToWatchlist);
btn.classList.add("swym-loaded");
});
}
function addToWatchlist(eventObj) {
eventObj.preventDefault();
var productId = +eventObj.target.getAttribute("data-product-id");
var variantId = +eventObj.target.getAttribute("data-variant-id");
var du = eventObj.target.getAttribute("data-url");
var params = {
empi: productId,
epi: variantId,
du: du
};
swat.getProductDetails(params, function(productJSON) {
productJSON.variants.forEach(function(v) {
if (v.id == variantId) {
params.pr = SwymUtils.formatProductPrice(v.price);
params.iu = productJSON.featured_image;
params.et = 8;
swat.addToWatchList(eventObj, params, function(e) {
console.log("Subscribed to product!", e);
}); // Shows Subscribe me.
return;
}
});
});
}
}
if (!window.SwymCallbacks) {
window.SwymCallbacks = [];
}
window.SwymCallbacks.push(swymCallbackFn);
</script>
Include the script in your theme code
We suggest adding it to the theme.liquid file, right before the closing </body> tag.
{% render 'swym-custom'%}
Optional CSS to include an eye icon:
.swym-button.swym-custom-watchlist:after {
content: '\e900';
color: inherit;
font-family: 'swym-icons';
z-index : 10;
}
a.swym-button.swym-custom-watchlist {
display: inline;
position: relative;
top: 7px;
z-index : 10;
}
Need Further Assistance?
You can always reach out to us at [email protected]. If you're already on our messenger, simply say "talk to an agent," and Fin will connect you with a member of our team who can provide further assistance.