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 In Stock 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 blog post, we’ll outline the steps to enable a “Notify me” button on your Collections pages.

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

  2. Copy-paste the following snippet in the place where you want to show the button in your code<style>
    /* Hide when not loaded */
    .swym-button.swym-add-to-watchlist-view-product:not(.swym-loaded){display: none;}
    </style>{% 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>

    Please note : We recommend appending this section after the “<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.

Once you’ve add this snipped, here is what your customers will see that will allow them to sign up for an alert right from your Collections pages:


Shoppers can sign up to receive automatic alerts on products that are out of stock

Plans come with a 14-day free trial. GET APP NOW

Recent Posts

Leave a Comment