Help on Klaviyo's back in stock button design & position - Dawn theme

Hi everyone,

I have set up Klaviyo’s “notify me when available” button on my product pages with the bellow code.

But the button is positioned in a weird location on my page and I don’t like the style. Here is what I would like :

  1. have it centered between the “SOLD OUT” and the “BUT IT NOW” button, or under the “BUT IT NOW” button.

  2. black font, capital letters

  3. black outline of the button with same length thane the “BUT IT NOW” button, if possible

Theme: Dawn 6.0.2

Preview link: https://h78186m8xvkh47hp-66207744226.shopifypreview.com

Screenshot of current situation:

Current code added in theme.liquid:

<script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
<script>
    var klaviyo = klaviyo || [];
    klaviyo.init({
      account: "my account number",
      platform: "shopify"
    });
    klaviyo.enable("backinstock",{ 
    trigger: {
      product_page_text: "Notify Me When Available",
      product_page_class: "btn",
      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>
2 Likes

Hi @contactdaiquiri

In your case, you can follow these steps:

  • Go to Online Store → Theme → Edit code → main-product.liquid and add code at this position:

We prepared two styles of buttons for you; I hope you like them:

  • Type 1:
NOTIFY ME WHEN AVAILABLE
                

  • Type 2:
NOTIFY ME WHEN AVAILABLE
                

I hope that you find my answer useful.

1 Like

Hi @BSS-Commerce ,

Wow, thank you so much. Just one thing, I am using style 1, can the length be the same than the buy now button ? Right now it’s larger :slightly_smiling_face:

1 Like

Hi @contactdaiquiri

I saw the problem; you only need to add a code line after “margin-top: 10px” like this:

NOTIFY ME WHEN AVAILABLE
                

Let me know if it works for you by giving us a like or marking it as a solution.

3 Likes

THANK YOU !! Amazing.

1 Like

Hey @BSS-Commerce , do you know if it’s possible to set up different texts for the bellow code parts, according to the language used? (I use english and french)

Right now I only have the english version.

product_page_text: "Notify Me When Available",
body_content: "Register to receive a notification when this item comes back in stock.",
button_label: "Notify me when available",
subscription_success_label: "You're in! We'll let you know when it's back.",

Thank you!

Hi @contactdaiquiri

It’s a pity that your embed code from a third party is not supported to change language automatically, so you must manually change them into French by pasting other code.

And this is the French version:

  • Code 1:
PRÉVENEZ-MOI LORSQUE DISPONIBLE

  • Code 2:
product_page_text: "Prévenez-moi lorsque disponible",

body_content: "Inscrivez-vous pour recevoir une notification lorsque cet article sera de nouveau en stock",

button_label: "Avertissez-moi lorsque disponible",

subscription_success_label: "Vous y êtes! Nous vous ferons savoir quand il sera de retour.",

I hope that it will work for you.

Hi !

So if I understand well, I have to choose between the 2 languages, I can’t have them both active correct ?

hello dear @BSS-Commerce ,

I just noticed that on mobile version there is an issue, it does not display large enough. How can we fix this ? :disappointed_face: Thank you so much for helping!

Preview: https://fshotpl7obi0sj7l-66207744226.shopifypreview.com

Hi @contactdaiquiri

Can you kindly provide me with a new link preview? Your above link was expired. Looking forward to seeing your information.

Hi @BSS-Commerce ,

Of course, here you go & thanks again :

https://d99f8r0juxdydirz-66207744226.shopifypreview.com

Hi @contactdaiquiri

I see it still works properly on mobile. I tested on a lot of devices.

Could you kindly check it again?

Actually it’s back to normal.. Idk what happened, but thanks a lot for checking!

Hi! Thank you for this solution, it worked for me too! However the “notify me..” button now appears on all products, not only on the sold out products. Is there a way to hide it for the products in stock?

1 Like

Same here, anyone got any solutions for this?

Hi @BSS-Commerce , i have the same problem on my product page, but i don’t see where to enter your code snippet. Could you please have a look at my case? That would be incredibly helpful. Thank you in advance! https://community.shopify.com/c/shopify-design/reposition-and-style-klaviyo-s-back-in-stock-button-differently/td-p/1965071

1 Like

Hi @BSS-Commerce ,

I got the same problem. I’m working with the Symmetry theme. Where can I put this code? Can you help me with this one, please? :slightly_smiling_face: The notify button needs to be under the sold out button with the same size.

Where should I add this code? I am also looking forward to adjusting the button size of the Default “notify me available” button from Klaviyo.

Hi @devanshdhall

I already solved my problem, but you need to change the code in the product page and add a “custom liquid”. I’ve copied my code, so you can change it into your style :slightly_smiling_face:

{%- unless product.available -%}
NOTIFY ME WHEN AVAILABLE ‌‌‌‌
                
{%- endunless -%}
1 Like