"Notify Me When Available" button position

[JD88]

Hey Team! 

I'm hoping someone can help me please. I'm a novice, so any help would be great! 

I am trying to add the "Notify Me When Available" button on my product page as I am hoping to start a "back in stock" Klaviyo flow. 

MY PROBLEM: I can't get the correct button style in the correct location. 

I have been following these instructions from Klaviyo - https://help.klaviyo.com/hc/en-us/articles/360001895651

My theme is Sense 12.0.0. 

I've used the below code in the theme.liquid file as per the Klaviyo instructions. 

<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",
      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: '',
     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>

And I got this result - https://itscooltocry.com/products/unisex-teamwork-hoodie?variant=45177745801431 Please also see screenshot below 

RESULT: The button style is correct, but location isn't. I'd like it below the "Sold out" button. 

I then tried to paste the below code into a custom liquid block on the product page (please note I am testing this on a different product page to the above so I can easily compare) and I get this result - https://itscooltocry.com/products/womens-smiley-ish-long-sleeve-t-shirt?variant=44122406256855 Please also see screenshot

<a class="klaviyo-bis-trigger" href="#">Notify Me When Available</a>

 RESULT: Button location is correct, but button style is incorrect. 

MY QUESTION: Can someone please show/tell me how to customise the button so it is the same style as the existing "sold out" button and placed directly underneath the "sold out" button? 

Thanks!

Jack 

[Moeed]

Hey @JD88 

Can you first add that code in a custom liquid block again at the right position then I can help you out with a code?

Best Regards,

Moeed

[JD88]

Hey Moeed! 

It's in the right position now, see below 

https://itscooltocry.com/products/unisex-teamwork-hoodie?variant=45177745801431

[Moeed]

Hey @JD88 

I'm unable to see it on my end.

[JD88]

Updated, please try again mate.

[Moeed]

Hey @JD88 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
a.klaviyo-bis-trigger {
    background: #985ABB !important;
    color: white !important;
    padding: 15px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[JD88]

Mate, that's awesome! Thanks so much. 

Can you please let me know how to make the new button the same width as the existing? 

Also slightly different question Is it possible to change the "Sold out" to "Notify me when available"? 

[Moeed]

Hey @JD88 

Remove the previous code and add this new code with the same steps mentioned above.

<style>
a.klaviyo-bis-trigger {
    background: #985ABB !important;
    color: white !important;
    padding: 10px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    width: 74% !important;
    display: block !important;
    text-align: -webkit-center !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[JD88]

Hi Moeed, 

Thanks. 

Question 1) however the buttons still don't line up with each other? I noticed it may or may not line up depending on the width of the window. 

How can I fix this? 

Question 2) I have also noticed that the "notify me when available" button is visible even when a product variant has stock. 

How can I make the "notify me when available" button only visible for out of stock variants?

Both can be seen in screenshot below

[JD88]

Hi Moeed, 

Thanks. 

Question 1) however the buttons still don't line up with each other? I noticed it may or may not line up depending on the width of the window. 

Please let me know how I can fix this? 

Question 2) I have also noticed that the "notify me when available" button is visible even when a product variant has stock. 

How can I make the "notify me when available" button only visible for out of stock variants?

Both can be seen in screenshot below

[Rahul_dhiman]

Hello @JD88 

Go to online store ----> themes ----> actions ----> edit code ----> assets ---->section-main-product.css

add this code at the end of the file and save.

a.klaviyo-bis-trigger {
    width: 44rem !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[JD88]

Hi Rahul_dhiman, 

I tried this, but it didn't work. 

Have you got any other ways to help make the "notify me when available" the same size as the "sold out/add to cart" button no matter what screen size or device? 

Thanks!

Jack

[JD88]

Hey Moeed!

It's in the right position now, see below

https://itscooltocry.com/products/unisex-teamwork-hoodie?variant=45177745801431

[image: image.png]