Klaviyo Notify Button in place of Add-to-cart

[INFRA]

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!

[shahrozbabar5]

@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:

🔧 Steps (Product Template):

1. Go to Online Store > Themes > Edit code.

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

3. Locate the section where the "Add to cart" button is.

4. 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.

[Ninthony]

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: