Set up the back in stock button for collections

Open your theme editor
Create a new snippet
Paste the code to the snippet
Add the snippet to the collection page

Now, Shopify does not support app blocks for the collection page. Doran will not add the back in stock button to the collection. You have to add it manually. Follow this below steps to do it.

Open your theme editor

In this tutorial, we use the theme Dawn version 13.0.1 for example. It may be different from other theme you are using.

Create a new snippet

After you access the theme code editor, you can create a new snippet.

Enter the name for the snippet: doran-bis-button

Do not forget to click Save.

Paste the code to the snippet

Copy the content of the below code and paste to your snippet.

<script type="text/javascript">
  window.$bpDoranInit = window.$bpDoranInit || {};
  window.$bpDoranInit.backInStockProducts = window.$bpDoranInit.backInStockProducts || [];
  var product = {
    id: "{{ product.id }}",
    title: "{{ product.title | replace: '"', "'" }}",
    handle: "{{ product.handle | replace: '"', '%22' }}",
    variants: [],
    tags: [],
    collections: [],
  }
  {% for tag in product.tags %}
    product.tags.push("{{ tag | replace: '"', "'" }}");
  {% endfor %}
  {% for collection in product.collections %}
    product.collections.push("{{ collection.id }}");
  {% endfor %}
  {% if product.featured_image %}
    product.image = "{{ product.featured_image.src | replace: '"', '%22' }}"
  {% endif %}
  {% for variant in product.variants %}
    product.variants.push({
      id: "{{ variant.id }}",
      title: "{{ variant.title | replace: '"', "'" }}",
      sku: "{{ variant.sku }}",
      management: "{{ variant.inventory_management }}",
      policy: "{{ variant.inventory_policy }}",
      quantity: {{ variant.inventory_quantity | default: null }}
    })
  {% endfor %}
  window.$bpDoranInit.backInStockProducts['{{ product.id }}'] = product;
</script>
<style>.doran-collection-bis-button { z-index: 9999 }</style>
<div
  class="doran-collection-bis-button"
  data-dr="back-in-stock-inline-button"
  data-product-id="{{ product.id }}"
  data-selected-variant-id="{{ product.selected_or_first_available_variant.id }}"
></div>

Do not forget to click Save.

Add the snippet to the collection page

Search for a snippet that name card-product.liquid

As we mentioned above, in this example we are using the theme Dawn version 13.0.1 as an example. If you can not find a display location or can not find card-product.liquid, please contact us.

Copy the below code.

{% render "doran-bis-button", product: card_product %}

Paste it to the line 166.

After all above steps, you will see the result like this.

I hope this tutorial may help you to set up the back in stock button for collections. If you have any issues relating to this, please contact us to get help.