Adding to category pages

Back in Stock Alerts supports out-of-stock products inside Quick View by default. To show a Notify Me button directly in a category-page product grid, add storefront configuration through BigCommerce Script Manager.

caution

The CSS selectors depend on your theme. Test the change on a preview theme before applying it to your live storefront.

Add the script

1. Open BigCommerce Script Manager.
2. Create a script with these settings:
   • Placement: Header
   • Location: Storefront pages
   • Script category: Essential or Functional
   • Script type: Script
3. Add the configuration below.

<script>
  window.BISAData = window.BISAData || {};
  window.BISAData.enable_list_alert_requests = true;
  window.BISAData.list_container_selector = '#product-listing-container';
  window.BISAData.list_item_selector = '.productGrid .product .card-figcaption-body';
  window.BISAData.list_item_product_id_selector = 'a[data-product-id]';
  window.BISAData.list_item_out_of_stock_selector = 'a[data-product-id]';
  window.BISAData.list_item_out_of_stock_text = 'Out Of Stock';
  window.BISAData.list_item_button_label = 'Notify Me';
</script>

4. Adjust the selectors and text values for your theme.
5. Save the script and open an out-of-stock product listing to test it.

Setting	Purpose	Example
enable_list_alert_requests	Enables alerts in product lists.	true
list_container_selector	Product-grid container used to detect pagination changes.	#product-listing-container
list_item_selector	Container where each product's buttons appear.	.productGrid .product .card-figcaption-body
list_item_product_id_selector	Element containing the product ID.	a[data-product-id]
list_item_out_of_stock_selector	Original out-of-stock action.	a[data-product-id]
list_item_out_of_stock_text	Text that identifies the original out-of-stock action.	Out Of Stock
list_item_button_label	Text for the replacement alert button.	Notify Me

For the Halot theme, start with #product-listing-container .productListing as the list_container_selector.