Klaviyo back in stock button - collectionpage

Store Design

Topic summary

A user wants to replace “Sold Out” buttons with “Notify Me” buttons on their collection page’s quick buy feature, integrating Klaviyo’s Back in Stock (BIS) functionality.

Initial Problem:

  • The user attempted to add a Klaviyo BIS button to the quick-order-list but it didn’t work when replacing the sold-out code.

Solution Provided:

  • Replace the <span class="variant-item__sold-out"> element with a button containing Klaviyo BIS trigger attributes (klaviyo-bis-trigger, data-product-id, data-variant-id).
  • Ensure the Klaviyo BIS script is installed on collection pages.
  • The code should check if variant is unavailable (variant.available == false) and display the “Notify Me” button accordingly.

Current Status:

  • A complete code snippet was provided showing proper placement within the existing conditional logic.
  • Another user requested similar help but couldn’t follow the instructions, with an offer of assistance extended.
Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

I’ve just added a back in stock button to my product and I would like it to show on the collection page too. The collection page uses a quick buy feature, and instead of the buttons saying “sold out”, I would like them to say “NOTIFY ME”

In the quick-order-list row, I tried to replace the sold out code with the below, but that didn’t work.

{%- if variant.available == false or quantity_rule_soldout -%}
  <button
    type="button"
    class="button button--secondary w-full klaviyo-bis-trigger"
    klaviyo-bis-trigger
    data-product-id="{{ product.id }}"
    data-variant-id="{{ variant.id }}"
  >
    {{ 'Notify me' }}
  </button>

Can anyone point me in the right direction?

2

Hi @INFRA ,
Replace the sold-out button code with your Klaviyo BIS button
Use this

{%- if variant.available == false or quantity_rule_soldout -%}
  <button 
    type="button" 
    class="button button--secondary w-full klaviyo-bis-trigger"
    klaviyo-bis-trigger
    data-product-id="{{ product.id }}"
    data-variant-id="{{ variant.id }}">
    Notify Me
  </button>
{%- endif -%}

Make sure Klaviyo BIS script is installed on collection pages.

Thanks
Manoj

3

Hi, thanks for your help! If I’m not mistaken, this is the whole code:

 {%- if variant.available == false or quantity_rule_soldout -%}
            <span class="variant-item__sold-out"> {{ 'products.product.sold_out' | t }} </span>
          {%- else -%}
            {% comment %} TODO: Remove theme check {% endcomment %}
            {% # theme-check-disable %}
            {% assign cart_qty = cart | item_count_for_variant: variant.id %}
            {% # theme-check-enable %}
            {% render 'quantity-input', variant: variant, min: 0 %}
          {%- endif -%}
        </div>
        {% if cart_qty > 0 %}
          <div
            id="Remove-{{ variant.id }}"
            class="quick-order-list-remove-button"
            data-index="{{ variant.id }}"
          >
            <button
              class="button button--tertiary"
              aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}"
              data-target="remove-{{ variant.id }}"
            >
              <span class="svg-wrapper">
                {{- 'icon-remove.svg' | inline_asset_content -}}
              </span>
            </button>
          </div>
        {% endif %}
      </div>

When I just replace the sold-out code with your code, nothing happens. Could that be because of the code below “ {% if cart_qty > 0 %}” ?

4

Hi @INFRA ,
You’ll need to swap out the Sold Out span with a Notify Me button that hooks into Klaviyo BIS.
use this code

{%- if variant.available == false or quantity_rule_soldout -%}
  <button 
    type="button" 
    class="button button--secondary w-full klaviyo-bis-trigger"
    klaviyo-bis-trigger
    data-product-id="{{ product.id }}"
    data-variant-id="{{ variant.id }}">
    Notify Me
  </button>
{%- else -%}
  {% assign cart_qty = cart | item_count_for_variant: variant.id %}
  {% render 'quantity-input', variant: variant, min: 0 %}
{%- endif -%}
</div>

{% if cart_qty > 0 %}
  <div
    id="Remove-{{ variant.id }}"
    class="quick-order-list-remove-button"
    data-index="{{ variant.id }}"
  >
    <button
      class="button button--tertiary"
      aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}"
      data-target="remove-{{ variant.id }}"
    >
      <span class="svg-wrapper">
        {{- 'icon-remove.svg' | inline_asset_content -}}
      </span>
    </button>
  </div>
{% endif %}

Thanks
Manoj

5

I’d also like help with this but I can’t quite follow the instructions. Could you help me please?

6

@mikeylew hello, do you want to add klaviyo code?