Klaviyo notify me button instead of sold out button - Shopify Collection pages with quick add

Store Design

Topic summary

A user wants to replace the “Sold out” button on Shopify collection pages (with quick add) with a Klaviyo “Notify me” button that triggers the back-in-stock popup.

Proposed solution includes:

  • Ensuring Klaviyo’s onsite script is loaded globally in theme.liquid
  • Modifying card-product.liquid to render a Klaviyo trigger button when products are out of stock
  • Adding data- attributes (variant ID, product name, URL, image, SKU) to the button
  • Including JavaScript to update the variant ID if the card has a variant selector
  • Optional CSS styling to match theme buttons

Current status:

  • The original poster is unclear about what code to replace in step 2
  • Other users are offering to help directly by requesting store URL and collaborator access
  • Questions raised about whether Klaviyo app is installed and configured properly

The discussion remains open with implementation details being clarified.

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

Hey there

I have a Klaviyo “notify me” button setup correctly on individual product pages with the accompanying popup, but I’d like them to display on collection pages that have the quick add feature. At the moment, when there is no stock, the quick add to cart button turns to “sold out” but I want it to become a Klaviyo “notify me” button along with the same popup.

Thank you

2

Hey @mikeylew :waving_hand:
You can show Klaviyo’s “Notify me” on collection cards (with Quick Add) by swapping the Sold out state for a Klaviyo trigger button and passing the variant id to it.

1) Make sure Klaviyo onsite script is global

In layout/theme.liquid (inside <head>):

<script async src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=YOUR_PUBLIC_API_KEY"></script>

2) Edit your product card (collection grid)

Open snippets/card-product.liquid (Grid/Dawn-like themes) and find the block that renders the Quick-Add button.
When the card is OOS, render this button instead of “Sold out”:

{%- assign first_variant = product.variants.first -%}
{%- if first_variant.available == false -%}
  <button
    type="button"
    class="button button--secondary klaviyo-bis-trigger"
    data-klaviyo-bis-trigger
    data-product-id="{{ product.id }}"
    data-variant-id="{{ first_variant.id }}"
    data-product-name="{{ product.title | escape }}"
    data-product-url="{{ product.url | within: collection }}"
    data-product-image="{{ product.featured_image | image_url: width: 800 }}"
    data-sku="{{ first_variant.sku | escape }}"
  >
    Notify me
  </button>
{%- endif -%}

If your card has variant pickers, replace first_variant.id with the currently selected variant id (see step 3).

3) (Optional) Keep variant id in sync with on-card pickers

If your card has a variant selector, update the button’s data-variant-id on change:

<script>
document.addEventListener('change', (e) => {
  const sel = e.target.closest('[data-product-card]')?.querySelector('select[name="id"]');
  if (!sel) return;
  const btn = e.target.closest('[data-product-card]')?.querySelector('.klaviyo-bis-trigger');
  if (btn) btn.dataset.variantId = sel.value;
});
</script>

4) Style like your theme button (optional)

.klaviyo-bis-trigger { width:100%; }

That’s it—when an item is out of stock on the collection card, shoppers get a Klaviyo “Notify me” button and the same BIS popup.
(If a product has multiple variants and no on-card picker, consider sending users to the product page or defaulting to the first oos variant.)

:hammer_and_wrench: You can check out our Shopify Partner profile — we’ve built and shared several free Shopify app solutions to help store owners. Feel free to explore our profile and see how our apps can make your Shopify experience better!

3

I can’t quite work out what I’m supposed to replace in step 2.

1 Like
4

Hi @mikeylew

Ok dear, please share your store URL and collaborator code with me so I can check and provide you with the proper solution.

6

@mikeylew did you add klaviyo app? and did you get the klaviyo code for your website?