Add the Notify me button to collection and home pages

To show a Notify me button on product cards, such as on collection pages and in home page product lists, add a small snippet to your theme's product card. This takes a few minutes in the code editor.

Create the snippet

1. In your Shopify admin, go to Online Store › Themes, click … next to your current theme, then Edit code.

2. In the snippets folder, click Add a new snippet, name it bis-collection-button and click Done.

   

3. Paste this code into the new file and click Save:

   <div>
     <script id='bisae_product_variants_{{product.id}}' type='application/json' data-product-name="{{ product.title }}" data-product_id="{{ product.id }}">
       {{ product.variants | json }}
     </script>
     <script id='bisae_product_selected_or_first_available_variant_{{product.id}}' type='application/json'>
       {{ product.selected_or_first_available_variant | json }}
     </script>
     <div class="bis-collection-button" data-product-name="{{ product.title }}" data-product_id="{{product.id}}"></div>
   </div>

   

Add it to your product card

1. Open your theme's product card file. Its name depends on the theme, for example card-product.liquid, product-card.liquid, product-card-grid.liquid, product-card-list.liquid or product-grid-item.liquid.

2. Paste this line where the button should appear, for example under the price, then click Save:

   {% render 'bis-collection-button', product: card_product %}

   

Change how this button looks

The button on product cards has its own style settings. In the app, go to Settings › Button Style, click Customize, and scroll to the custom button section for the home page and collection pages. You can change its text, colors and hover colors.