Klaviyo Notify Button in place of Add-to-cart

Topic summary

A user wants to replace the “Add to Cart” button with a “Notify me when in stock” button when products are out of stock, specifically for their Klaviyo integration.

Two solutions proposed:

  1. Custom Liquid code approach: Modify the product template (main-product.liquid or product-form.liquid) to conditionally display buttons based on stock availability using {% if product.available %} logic. This method requires manual theme editing and can integrate with back-in-stock apps like Klaviyo or Appikon.

  2. Klaviyo built-in feature: Use Klaviyo’s existing “replace_anchor” parameter in the JavaScript snippet. Setting this to true should automatically swap the button without custom coding.

The second solution appears simpler and leverages Klaviyo’s native functionality, avoiding manual theme modifications. The discussion remains open with no confirmation of which approach the original poster will implement.

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

Hi there,

I would like to have the "notify me when in stock’ button in place of the add to cart, when the stock is 0 on this product template.

How can I best achieve this?

Website (size XL is sold out)

thanks!

2 Likes

@INFRA

You can absolutely achieve this by conditionally hiding the Add to Cart button and showing a “Notify me when available” button when the product is out of stock.

Here’s a general method using Shopify Liquid:

:wrench: Steps (Product Template):1. Go to Online Store > Themes > Edit code.

  1. Open your main-product.liquid or product-form.liquid (varies by theme).

  2. Locate the section where the “Add to cart” button is.

  3. Replace it with this logic:

{% if product.available %}
  <button type="submit" class="product-form__submit button button--full-width">
    {{ 'products.product.add_to_cart' | t }}
  </button>
{% else %}
  <button type="button" class="button button--full-width notify-me-btn">
    Notify me when available
  </button>
{% endif %}

Optional: You can link this button to a [Back in Stock] app like Shopify’s “Back in Stock Notifications”, Klaviyo, or Appikon to make it functional.


I’ll fix this at no cost and ensure it’s styled perfectly — just share your store URL and theme name/code access.

You shouldn’t need to so much coding yourself here, Klaviyo has an option in the javascript it had you paste for “replace_anchor” – you should be able to set that to true: