How to setup Notify me button in Collection & Home page?

For setting up Notify me button in collection & home page, You need to add custom code in your store.

Click on Snippet >> Select on Add a new Snippet >> enter the name "bis-collection-button" in file name >> And click on done button.

Enter the below code in file and save it.

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

Once the file is created then you need to call this file in collection page on the place where you want to display notify me button.

Open card-product.liquid file or product-card-grid.liquid file or product-card-list.liquid file or product-card.liquid file or product-grid-item.liquid file and add below code on the place where you want to display the notify me button.

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

If you get any problem for setting this, then feel free to contact our support team at support@scriptengine.net, our team will help you to setup everything perfectly in your store.

How to style & design Custom Collection & Homepage Notify me button?

Go to Settings >> Button Style >> Click on Customize button >> go to Custom Button (Homepage, Collection page, etc..) >> Here you will able to change button text, its background & text color and hovering button color easily.