Klaviyo back in stock button - collectionpage

Store Design
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?