fbpx
Klaviyo Notify Me When Available button in a Shopify store

Configure Klaviyo Back-in-Stock Notifications for Shopify Dawn

Klaviyo is an email marketing platform with a strong Shopify integration. Of the many features it offers, including personalized recommended products in email campaigns and customer behavior tracking, it can be set up to allow customers to sign up to know when a product on your Shopify store is coming back in stock.

Out of the box, Klaviyo’s back in stock notification system “just works” with Shopify’s default themes, including themes like Debut.

Shopify Theme 2.0 Breaks Klaviyo’s Back in Stock Integration

But in summer 2021, Shopify announced a new theme initiative for creating highly customizable shops called Theme 2.0. This update allows users to drag-and-drop a variety of blocks that theme authors make available to make their store look just like they want it, including on the product description page. With Theme 2.0, Shopify launched a new default theme called Dawn to showcase these features.

Dawn is a great new default theme. Just like Debut before it, Dawn is full of highly-converting defaults that allow you to set a logo, colors and fonts, and then stop worrying about the rest of your site’s aesthetic and focus on marketing instead. This is extremely important for small shop owners, who often get distracted by over-customizing their web store.

But Theme 2.0 changes some of the existing product page markup, and depending on how you’ve arranged your blocks, Klaviyo’s default Shopify configuration may no longer find the correct spot to insert the “Notify Me When Available” button onto the page when a product or variant is not in stock. It may insert it into the wrong spot, or not at all.

The “Notify Me When Available” button appearing below the price instead of with the Add to Cart button. It also looks like an inline link instead of a button.

Fixing Klaviyo’s Back in Stock Integration for Shopify Theme 2.0

Fortunately, it only takes a little customization of Dawn to get Klaviyo’s Back in Stock notification system back up and running.

This tutorial assumes you’ve already set up a Back in Stock flow on Klaviyo

Add the Default Klaviyo Back in Stock Snippet

First, head over to the Klaviyo documentation and find the default snippet they provide for the old-school default Shopify themes. Normally, you would insert this at the bottom of the theme.liquid file in your theme. You can still do this, but you can also simply add a “Custom Liquid” block to the bottom of your Default Product template in the Theme 2.0 customizer and paste the code in there.

Paste the code where the HTML comment is in this screenshot, above the closing body tag (</body>)
Or add it to a new Custom Liquid block at the bottom of the Default Product template

Now we have to make some slight changes to the snippet. The full snippet is below with the changed lines highlighted:

<script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
<script>
    var klaviyo = klaviyo || [];
    klaviyo.init({
      account: "PUBLIC_API_KEY",
      platform: "shopify"
    });
    klaviyo.enable("backinstock",{ 
    trigger: {
      product_page_text: "Notify Me When Available",
      product_page_class: "button button--full-width button--primary", // changed
      product_page_text_align: "center",
      product_page_margin: "0px",
      alternate_anchor: 'dawn-AddToCart' // new
      replace_anchor: false
    },
    modal: {
     headline: "{product_name}",
     body_content: "Register to receive a notification when this item comes back in stock.",
     email_field_label: "Email",
     button_label: "Notify me when available",
     subscription_success_label: "You're in! We'll let you know when it's back.",
     footer_content: '',
     additional_styles: "@import url('https://fonts.googleapis.com/css?family=Helvetica+Neue');",
     drop_background_color: "#000",
     background_color: "#fff",
     text_color: "#222",
     button_text_color: "#fff",
     button_background_color: "#439fdb",
     close_button_color: "#ccc",
     error_background_color: "#fcd6d7",
     error_text_color: "#C72E2F",
     success_background_color: "#d3efcd",
     success_text_color: "#1B9500"
    }
  });
</script>
Code language: HTML, XML (xml)

On line 14, you can see where we’re giving Klaviyo the ID of the element that it should be inserting the “Notify Me When Available” button after, and on line 11, we’re simply swapping in Shopify Dawn’s default button classes to make sure the button looks like other buttons on the site.

Reference Klaviyos’ documentation for other stylistic customization you might want to make to the modal or button trigger. This tutorial will focus strictly on getting it functional and using the default theme classes.

Add an ID to Shopify Dawn’s Buy Buttons Block

Shopify Dawn doesn’t add any HTML IDs to its Buy Buttons by default, so we need to change or our above code won’t work at all. For this part, you will have to edit Dawn’s code.

From your Shopify dashboard, go to the Online Store sales channel, click “Themes”, and in the “Actions” dropdown by your active theme, you should see the “Edit Code” option. Click that.

In the code editor, open up Sections > main-product.liquid. Around line 276, look for the line {%- when 'buy_buttons' -%}. This is a conditional within the code that runs for every block you add to the product page. When the block is the “Buy Buttons” block, this code runs and creates the Add to Cart buttons.

Shortly after this line, look for the line <div class="product-form__buttons">. This is a container wrapping all the different Add to Cart buttons that Shopify might add, and it’s the container we want Klaviyo to insert its “Notify Me When Available” button into.

Change that line to:

<div class="product-form__buttons" id="dawn-AddToCart">Code language: JavaScript (javascript)

That’s it. Now click “Save” in the top right.

To test that Klaviyo’s Back in Stock button is now working, visit your online store and view a product that is currently out of stock. You should now see the Klaviyo Back in Stock button appear below the disabled “Out of Stock” button.


Comments

5 responses to “Configure Klaviyo Back-in-Stock Notifications for Shopify Dawn”

  1. Hi!
    This was just what I was looking for! However it’s not working… I’m on the DAWN 7.0.1 theme, has there been any changes since you posted this? Kindest, Sara

    1. Ethan Clevenger Avatar
      Ethan Clevenger

      Hey Sara – I just reviewed our setup, which is also Dawn 7.0.1, and it’s still working.

      Can you verify if you went the custom liquid route, or are you editing the theme file to add the new Klaviyo JS? Also – you have the Klaviyo Shopify app installed, right?

      1. I actually tried both the custom liquid route and the theme editing (one at a time) but just kept seeing the Sold Out button and nothing more. Yes I have the Klaviyo app installed and other Klaviyo integrations are working fine. The only thing that differed from your set up was that I did not find the {%- when ‘buy_buttons’ -%} line until about row 600. Also my theme is not live and published yet if that has something to do with it? Thankful for your input! Kindest, Sara

        1. Ethan Clevenger Avatar
          Ethan Clevenger

          Yeah, code changes frequently and that got moved down a lot. I do see that change on my end.

          It’s very possible this won’t work until the theme is live. Much of Klaviyo’s Javascript might not work on a test domain. I can’t swear to that, but that’s a significant difference for sure.

          1. Theme published but still not working unfortunately… Any other tips?

Leave a Reply

Your email address will not be published. Required fields are marked *