Collection button snippets by theme

To help you add the Back in Stock button to your collections, we compiled a list of snippets that you can just copy & paste to your theme. This list will grow as we test and document more themes.

Dawn

Add the code snippet below at the end of the "snippets/product-card.liquid" file (line 136).

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

Sense

Add the code snippet below on line 217 of the "card-product.liquid" file.

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

Collections and home page;

Add the code snippet below on line 51 of the "product-card-grid.liquid" file.

<!-- 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 the code snippet below on line 40 of the "product-card-list.liquid" file.

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

Add the code snippet below on line 126 of the "product-grid-item.liquid" file.

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

Palo Alto

Add the code snippet below on line 380 of the "product-grid-item.liquid" file.

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

Venture

Add the code snippet below on line 84 of the "product-card.liquid" file.

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

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

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

Narrative

<!-- Inserted by Back in Stock -->
{% unless product.available %}        
    <a href="#" class="BIS_trigger bis-collection-button btn btn--to-secondary btn--full product__add-to-cart-button" style="margin-top: -20px; margin-bottom: 5px" data-product-data="{{ product | json | escape }}">    
        Email when available
    </a>    
{% endunless %}
<!-- End of the block inserted by Back in Stock -->  

Diva-classic

Collection page;

Search page;

Symmetry

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

Focal

<!-- Inserted by Back in Stock -->
{% unless product.available %}        
    <a href="#" class="BIS_trigger bis-collection-button collapsible-toggle text--strong" style="text-decoration: underline; font-weight: bold; display: block; margin-top: -15px" data-product-data="{{ product | json | escape }}">    
        Email when available
    </a>    
{% endunless %}
<!-- End of the block inserted by Back in Stock -->     

Broadcast

<!-- Inserted by Back in Stock -->
{% unless product.available %}        
    <a href="#" class="BIS_trigger button btn btn--add-to-cart" style="width: 100%" data-product-data="{{ product | json | escape }}">    
        Email when available
    </a>    
{% endunless %}
<!-- End of the block inserted by Back in Stock -->