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

preview of the palo alto theme
Preview

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