Help On Klaviyo's Back In Stock Button Design & Position - Flow Theme

Store Design
1

Hi All,

I have set-up Klaviyo’s back in stock snippet/button on my product pages. I used the Flow theme.

I have 2 problems:-

1 - The Button for some reason is not anchoring/or below/near to the “Sold Out/Add To Cart” Button.
2 - Button would need to be the same width as the “Sold Out/Add To Cart” button & match it in terms of rounded edges etc

I have attached the screenshot below:-

Shop Comm 1.jpg
Shop Comm 1.jpg1925×932 139 KB

And I have also attached the code attached in theme.liquid I used:-

<script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
<script>
    var klaviyo = klaviyo || [];
    klaviyo.init({
      account: "------",
      platform: "shopify"
    });
    klaviyo.enable("backinstock",{ 
    trigger: {
      product_page_text: "Email 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: "Get notified 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=Karla');",
     drop_background_color: "#000",
     background_color: "#fff",
     text_color: "#222",
     button_text_color: "#fff",
     button_background_color: "#00A88E",
     close_button_color: "#ccc",
     error_background_color: "#fcd6d7",
     error_text_color: "#C72E2F",
     success_background_color: "#d3efcd",
     success_text_color: "#1B9500"
    }
  });
</script>

Would appreciate any help on this

2

@Drazdauskas - can you share this page link? usually klaviyo button is automatically added under add to cart button, button this page it is coming son button, and may be that is why it is been shown after description

3

This is the “Sold Out” button but I have changed the language under the theme content, below:-

Drazdauskas_0-1690822959377.png
Drazdauskas_0-1690822959377.png1625×448 19.1 KB

URL is https://outshinegaming.com/collections/gaming-desks/products/echo-gaming-desk

4

@Drazdauskas - klaviyo automatically have added the button just before the end of form tag and description is part of form hence it is coming after description… so if you can edit the code and check if you can take accordion out of form tag and add it after then button can go up.. this will need code editing but can work

5

Where would I find this tag?

Had a quick look but I cannot see where this is…

6

@Drazdauskas - please check product template page, you will need to have little coding knowledge

7

I know only a little in terms of coding.

I am in the product page template but I am not sure how to proceed from here.

Am I right in assuming that if we were using multiple product templates that I would need to make these changes in all templates?

8

@Drazdauskas - will this work for you?

suyash1_0-1690824885608.png
suyash1_0-1690824885608.png1366×768 140 KB

9

Possibly yes,

However I think that a cleaner solution which also may be easy for you to solve.

I have changed the below line:-

replace_anchor: true

If we could just get it to display like our default button now in terms of rounded edges and also the width being the same - then I think that would be ideal!

Really appreciate your help with this :folded_hands:

10

@Drazdauskas - add this css to the very end of your theme.min.css file and check

.klaviyo-bis-trigger{border-radius: 10px;}
11

That’s looking better as a button but 2 more changes needed.

A little padding or spacing, 5 or 10px beneath as its currently sitting on the accordion.

And it needs to be full width as per our normal add to cart button(s)

Thanks