Help On Klaviyo's Back In Stock Button Position - Hoxton Theme

Help On Klaviyo's Back In Stock Button Position - Hoxton Theme

ikhlaspirzada6
Shopify Partner
4 0 0

I'm using Klaviyo's back-in-stock feature, and I've added the code provided by Klaviyo to the `theme.liquid` file as instructed. The "Notify Me" button is currently appearing below the price, but I would like it to be placed either above or below the "Sold Out" button.

I have tried various CSS methods and also placed the code in the `main.product.liquid` file. While some of these methods work, they sometimes display the button even on products that are in stock. Other times, the button appears correctly above the "Sold Out" button for some products but remains in the original position for others.

Below is the code I used. Could you please provide a solution that ensures the "Notify Me" button is consistently placed either above or below the "Sold Out" button for all products?

I have also attached the screen shot of the current preview as it's a draft theme.

Thank you.

 

<script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
<script>
(function() {
// Ensure Klaviyo object is initialized
window.klaviyo = window.klaviyo || [];
klaviyo.init({
account: "KkU9JV",
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/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');",
drop_background_color: "#000",
background_color: "#fff",
text_color: "#222",
button_text_color: "#fff",
button_background_color: "#000",
close_button_color: "#000",
error_background_color: "#fcd6d7",
error_text_color: "#C72E2F",
success_background_color: "#d3efcd",
success_text_color: "#1B9500"
}
});
})();
</script>

 

ikhlaspirzada6_0-1719962064061.png

 

Reply 1 (1)

vm-web
Shopify Partner
29 1 4

@ikhlaspirzada6 

Please share your "main.product.liquid" file code. I will check and get back.

Thanks!

If helpful then please Like and Accept Solution.