Solved

Why the back in stock button is not visible in free shopify template?

  • 27 December 2021
  • 1 reply
  • 878 views

Badge +1

Hello at all,

i’ve tried to install the recommended back in stock solution on my free template venture but it doesn’t work.

  1. i get the following error in the dev console:
    Uncaught TypeError: klaviyo.init is not a function
  2. i’ve tried to fix this with all related help articles, but it’s still doesn’t work.

The Button is not displayed on my product pages. I can see only the “sold out” and dynamic payment button.

I’ve checked by myself if its work, if i disable the dynamic payment buttons, but this was not successful.

I’ve tried to fix this with following recommended functions

  • alternate_anchor
  • display_on_policy_continue: true
  • replace_anchor

Here you will see the added code:

<script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
<script>
var klaviyo = klaviyo || [];
klaviyo.init({
account: "REMOVED",
platform: "shopify"
});
klaviyo.enable("backinstock",{
trigger: {
product_page_text: "Notify Me When Available",
product_page_class: "btn btn--full",
product_page_text_align: "center",
product_page_margin: "0px",
alternate_anchor: "AddToCart-product-template",
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>

I am happy about hints and your help.
Thanks, 
Torben

icon

Best answer by David To 28 December 2021, 16:53

View original

1 reply

Userlevel 7
Badge +60

Hello @Torben,

Thanks for sharing your question with the Klaviyo Community!

You’ll typically receive a console error of Uncaught TypeError: klaviyo.init is not a function when either a value within the back in stock code is entered incorrectly or formatted correctly, the Klaviyo.js code is not fully recognized, or additional code on your website is impacting this functionality.

Since the error is calling out the klaviyo.init part of the code specifically, I would first suggest checking to make sure you’ve entered your Klaviyo Public API Key correctly. I’ve also seen instances of users using a Segment ID versus a static List ID when incorporating the marketing opt-in feature to the klaviyo.init function. 

Another potential cause of this error is the Klaviyo.js is not fully recognized or being initiated. From my experience, this is often times caused by having multiple Klaviyo.js present on your website. I would recommend taking a look and following the steps I outlined in the below Community post which explains this issue further and how to alleviate it.

Shopify default themes follow a standard guideline which allow Klaviyo’s back in stock code to be understood effortlessly, the use of additional codes or additional third party codes may hinder this functionality. Although the Shopify theme follows these guidelines, the same cannot be said for these third party tools and softwares. Some third party tools and resources installed on your site may be impacting either the initiation of the Klaviyo.js or the back in stock code as a whole. To resolve this, I would suggest reviewing any other third party codes or tools you’re using on your site to see how they operate alongside Klaviyo. It may also be a good idea to work with a developer you are familiar with who can further assist you in reviewing your site codes and scope out any impacts or pain points with the introduction of all the codes to the site/theme. I’ve also encountered small instances where either the implementation of additional codes or tools cause a race condition which can potentially cause the klaviyo.init from being accessed before it has been defined. 

I hope this helps!

David

 

Reply