Back in Stock: Collections page button

Overview

Adding Back in Stock buttons to your collection pages gives customers faster access to signup notifications without visiting individual product pages. This placement typically sees 5x higher signup rates compared to product page buttons alone.

Supported Pages:

• Collection pages
• Search results pages
• Home page (with product listings)
• Any page displaying multiple products

Quick Setup by Theme

If you're using a popular Shopify theme, use these copy-paste snippets for instant setup:

Dawn Theme

Add to the end of snippets/product-card.liquid (line 136):

<!-- Inserted by Back in Stock -->			
	{% unless card_product.available %}		
		<a href="#" class="BIS_trigger bis-collection-button button" style="margin-top:10px; width:100%" data-product-data="{{ card_product | json | escape }}">	
			Email when available
		</a>	
	{% endunless %}		
<!-- End of the block inserted by Back in Stock -->	

Sense Theme

Add to card-product.liquid (line 217):

<!-- Inserted by Back in Stock -->`			
	`{% unless card_product.available %}`		
		`<a href="#" class="BIS_trigger bis-collection-button button" style="text-decoration: none" data-product-data="{{ card_product | json | escape }}">`	
			`Email when available`
		`</a>`	
	`{% endunless %}`		
`<!-- End of the block inserted by Back in Stock -->

Debut Theme

Collections and home page - Add to product-card-grid.liquid (line 51):

<!-- Inserted by Back in Stock -->
{% unless product.available %}
  <a href="#" class="BIS_trigger bis-collection-button btn" 
     style="margin-bottom: 5px" 
     data-product-data="{{ product | json | escape }}">
    Email when available
  </a>
{% endunless %}

<!-- End of the block inserted by Back in Stock -->

Search page - Add to product-card-list.liquid (line 40):

<!-- Inserted by Back in Stock -->
{% unless product.available %}
  <a href="#" class="BIS_trigger bis-collection-button btn" 
     style="margin-bottom: 5px" 
     data-product-data="{{ product | json | escape }}">
    Email when available
  </a>
{% endunless %}

<!-- End of the block inserted by Back in Stock -->

Brooklyn Theme

Add to product-grid-item.liquid (line 126):

<!-- Inserted by Back in Stock -->
{% unless product.available %}
  <a href="#" class="BIS_trigger button btn btn--add-to-cart" 
     style="width: 100%; margin-bottom: 10px; margin-top: -20px" 
     data-product-data="{{ product | json | escape }}">
    Email when available
  </a>
{% endunless %}

<!-- End of the block inserted by Back in Stock -->

Other Popular Themes

Venture Theme - Add to product-card.liquid (line 84):

<!-- Inserted by Back in Stock -->
{% unless product.available %}
  <a href="#" class="BIS_trigger bis-collection-button product-card__name" 
     style="height: 30px; text-decoration: underline; text-align: center; display: block; background-color: white" 
     data-product-data="{{ product | json | escape }}">
    Email when available
  </a>
{% endunless %}

<!-- End of the block inserted by Back in Stock -->

Minimal Theme:

<!-- Inserted by Back in Stock -->
{% unless product.available %}
  <a href="#" class="BIS_trigger bis-collection-button btn btn--wide btn--secondary" 
     style="width: 100%; margin-bottom: 5px" 
     data-product-data="{{ product | json | escape }}">
    Email when available
  </a>
{% endunless %}

<!-- End of the block inserted by Back in Stock -->

Supply Theme:

<!-- Inserted by Back in Stock -->
{% unless product.available %}
  <a href="#" class="BIS_trigger button btn btn--add-to-cart" 
     style="width: 100%; margin-bottom: 10px; margin-top: -20px" 
     data-product-data="{{ product | json | escape }}">
    Email when available
  </a>
{% endunless %}

<!-- End of the block inserted by Back in Stock -->

Custom Implementation Guide

For custom themes or advanced customization, follow this technical implementation:

Basic Button Code

<a href="#" class="BIS_trigger" data-product-data="{{ product | json | escape }}">
  Email when available
</a>

Show Only for Sold Out Products

{% unless product.available %}
  <a href="#" class="BIS_trigger" data-product-data="{{ product | json | escape }}">
    Email when available
  </a>
{% endunless %}

Required Attributes

Essential attributes for the button:

• BIS_trigger class - Identifies the button to Back in Stock
• data-product-data - Contains product information as JSON

Minimal Product Data Structure

If you prefer to include only essential data instead of the full product object:

<a href='#' class='BIS_trigger' 
   data-product-data='{"id":118958653449,"handle":"product-handle","tags":[],"available":false,"variants":[{"id":1556361314313,"title":"Small","available":false,"inventory_quantity":0,"inventory_management":"shopify"}]}'>
  Email when available
</a>

Required fields:

• Product: id , handle , available , tags , variants
• Variants: id , available , title , inventory_quantity , inventory_management

Variant-Specific Buttons

For pages showing individual variants, specify which variant with data-variant-id :

<a href="#" class="BIS_trigger" 
   data-product-data="{{ product | json | escape }}" 
   data-variant-id="{{ variant.id }}">
  Email when available - {{ variant.title }}
</a>

Styling Your Buttons

Custom CSS Styling

Add custom styles to your theme's stylesheet:

/* Basic styling example */
.BIS_trigger {
  color: red;
  text-decoration: underline;
  font-weight: bold;
}


/* Button-style appearance */
.bis-collection-button {
  background-color: #007cba;
  color: white;
  padding: 10px 15px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  margin-top: 10px;
}

Reusing Existing Theme Classes

Most themes have existing button classes you can reuse. Common examples:

• btn (generic button)
• button (theme button)
• btn--secondary (secondary button style)

<a href="#" class="BIS_trigger btn btn--secondary" 
   data-product-data="{{ product | json | escape }}">
  Email when available
</a>

Troubleshooting

Button Not Working?

1. Check Widget Version

• Visit Widget Settings
• Look for update notices and upgrade if available

2. Verify Product Data

• Ensure data-product-data contains valid JSON
• Use single quotes around the attribute value
• Double quotes should only be inside the JSON

3. Check Element Structure

• The clicked element must have the BIS_trigger class
• Avoid nested clickable elements inside the button
• If using nested elements, add BIS_trigger to the child element

Common Issues

Quotes and Encoding:

<!-- ✅ Correct -->
<a href="#" class="BIS_trigger" data-product-data="{{ product | json | escape }}">


<!-- ❌ Incorrect - will cause encoding issues -->
<a href="#" class="BIS_trigger" data-product-data="{{ product | json }}">

Nested Elements:

<!-- ❌ Problematic - click might not register -->
<a href="#" class="BIS_trigger" data-product-data="{{ product | json | escape }}">
  <span>Email when available</span>
</a>


<!-- ✅ Better approach -->
<a href="#" class="BIS_trigger" data-product-data="{{ product | json | escape }}">
  Email when available
</a>

Advanced Features

Dynamic Button Creation

Back in Stock supports dynamically created buttons. The widget checks for the BIS_trigger class at click time, allowing you to:

• Create buttons via JavaScript after page load
• Modify data-product-data dynamically
• Show/hide buttons based on user actions

Legacy Support

Note: Accounts created before December 15, 2016 can still use data-product-handle instead of data-product-data , but the JSON approach is recommended for all new implementations.

Need Help?

Theme not listed? Contact our support team and we'll create a custom snippet for your theme.

Having trouble with implementation? We'll help you get collection page buttons working within 24 hours.

Contact: backinstock-support@useamp.com