Enabling support for Back-in-Stock alerts on Collections pages for your Shopify store

There are times when some of your products are going to go out of stock. And any shoppers that come looking for those products are going to be a tad disappointed. At the very least, you want to be able to give those shoppers a way to express their interest in that product, continue to stay engaged with you. That’s where the Swym Back In Stock Produt Alerts app comes in handy – once configured, the app will automatically give shoppers a way to sign up for automatic email alerts when products come back in stock. This post is about extending that same capability for shoppers from your Collections page as well.

There are some themes that do a fantastic job of letting the viewer know that a certain product in a collection is not in stock, typically with a “Sold Out” tag. If a shopper is interested in one of those products and wants to sign up for an automatic alert, they should be able to do that right from that Collections page. Requiring them to explicitly visit the product details page just to sign up for that notification is a lot of needless friction and can be avoided – especially on a mobile device with relatively lower network speed, this could make all the difference between engaging that user successfully and losing them altogether. In this article, we’ll outline the steps to enable a “Notify me” button on your Collections pages.

  1. You will first need to add a new snippet called swym-product-view to your theme liquid files. This is very easily done and is outlined in this article here.

  2. Once you have added the swym-product-view snippet, find the right file from which your product card gets displayed in the collection. Depending on your theme, it will 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

Note: If you don’t find any of these files, please email  support@swymcorp.com, and we will help you find the right file for your theme.

3. Copy-paste the following snippet in the place where you want to show the button in your code

<span style="font-family: Lato; font-weight: normal; font-size: medium;"><style>
<!-- Hide when not loaded - Best practice - Move to a css file -->
.swym-button.swym-add-to-watchlist-view-product:not(.swym-loaded){display: none;}
{% include 'swym-product-view', product: product %}
<button class="swym-button swym-add-to-watchlist-view-product product_{{product.id}}" data-swaction="addToWatchlist" data-product-id="{{product.id | json}}"></button></span>

Please note : We recommend appending this section after “<span>{{product.title}}</span>”.

And that should be it – a “Notify me” icon should now start showing up on your Collections pages as part of the product tiles. And when users click on the icon, they should see a popup that allows them to choose a variant (assume that product has multiple variants) and subscribe for an alert if that variant is out of stock. Note that if your product has variants, we’ll need to enable a setting for your store as part of your app configuration to allow users to be able to choose the specific variant that they are interested in, so please get in touch with us if you’d like to enable this capability on products in your collections that have multiple variants.

Let's discuss your needs!

Let's discuss your needs!

Let's discuss your needs!