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