Shopify Online Store 2.0 (Dawn) - Back In Stock documentation

  • 20 February 2024
  • 3 replies
  • 260 views

Userlevel 1
Badge

As a company we create premium themes and lead engineering for kosas.com, and frequently customers will reach out about instructions on how to add Klaviyo’s Back in Stock button to Shopify’s Online Store 2.0 themes (free, premium and custom).  Klaviyo does have documentation for “free Shopify themes”, however all of the themes on their list like Debut, Venture, Narrative, etc were deprecated and removed in 2022.  All of Shopify’s current free OS 2.0 themes like Dawn, Refresh, Craft, etc do not work with Klaviyo’s current documentation or take advantage of the features like Custom Liquid blocks so that you don’t have to edit theme code.

 

Here are detailed steps on how to add Back In Stock on any of Shopify’s new free themes:

  1. In the Shopify Admin under Online Store > Themes click Customize on the theme you want to add the Back In Stock button to.
  2. In the preview window of the theme editor browse to any product or in the dropdown at the top change the template view to Products > Default product
    If you have multiple product templates set up you might need to go through the steps for each one.
  3. In the Product information (or Product details) section click Add block and find the Custom Liquid block to add.  This block allows you to add in custom Liquid or HTML without editing the theme’s code and disability the theme’s auto-update feature.
  4. In the Custom liquid section this is where you would add the HTML snippet for the Back In Stock button following Klaviyo’s guide.  You will need to add a <div> container with a unique id and the trigger’s alternate_anchor parameter to tell Klaviyo where to add the button.  Make sure you replace PUBLIC_API_KEY with your Klaviyo public API key. Learn how to find your account's public API key.

     

<div id="back-in-stock-block"></div>

<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: {
alternate_anchor: 'back-in-stock-block',
product_page_text: 'Notify Me When Available',
product_page_class: 'button button--full-width',
product_page_text_align: 'center',
product_page_margin: '0px',
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: '',
drop_background_color: '#000',
background_color: '#fff',
text_color: '#222',
button_text_color: '#fff',
button_background_color: '#000000',
close_button_color: '#ccc',
error_background_color: '#fcd6d7',
error_text_color: '#C72E2F',
success_background_color: '#d3efcd',
success_text_color: '#1B9500',
},
});
</script>
  1. Drag and drop where you want the button to appear—above the buy buttons, below the price, etc.  Then save the changes.

With the product_page_class added this will properly style the Notify Me When Available button with a full width, solid button style in all Shopify OS 2.0 free themes:

  • Dawn
  • Spotlight
  • Refresh
  • Craft
  • Sense
  • Origin
  • Ride
  • Taste
  • Studio
  • Publish
  • Crave
  • Colorblock

 


3 replies

Badge

Super helpful. Thank you!

Badge

@jonathanmoore This is so very helpful! Thank you 🥰

 

We use the Empire theme from Pixel Union and the link is just showing as Blue underlined text. Any insight in what might need to be edited to turn it into a button? I’ve looked at our CSS code and it does also use “button” for CSS so I’m wondering what might be conflicting in the code that isn’t styling it as a button. 

Any help we could get would be greatly appreciated, thank you in advance!

 

Badge

Hello,

 

thank you so much for that information, it was very useful. I have two questions after installing the code:

 

  1. How can I translate it? I can’t find that in the translation app.
  2. How could I change the color of the bottom where it says “ Notify me...”

 

Thanks

Reply