Solved

Klaviyo Waitlist Button

  • 27 April 2023
  • 3 replies
  • 669 views

Badge +2

Hi,

 

I am using Klaviyo and I have installed their code into my store so when an item appears as 'sold out' the 'join the waitlist' button appears.

 

However, it is currently appearing sitting underneath the 'sold out' button and I would like to replace the 'sold out' button with the Klaviyo 'join the waitlist button'.

 

Screenshot 2023-04-20 at 4.57.32 pm.png

So instead of the out-of-stock button appearing, the notify me when available appears.

 

I have the code for the notify me when the available button to work, I would just like it to have the same appearance as the sold-out button and act in the same way.

 

Thank you!

icon

Best answer by Brian Turcotte 28 April 2023, 05:28

View original

3 replies

Userlevel 7
Badge +36

Hi @emorgannn!
 

May I ask what theme of Shopify you’re using? Also, would you mind sharing the code you implemented (with all sensitive information redacted)?

This will help myself and other Community members obtain some more insight into the issue.

 

In the meantime, here are some other threads you might find helpful:

 

Thanks for using the Community!

- Brian

Badge +2

Hi!

 

We are using the Showcase theme.

 

The code for the waitlist button: 

 

 <script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
<script>
  var klaviyo = klaviyo || [];
  klaviyo.init({
    account: "Public ID Key - Redatched for this Thread",
    platform: "shopify"
  });
  klaviyo.enable("backinstock", { 
    trigger: {
      product_page_text: "Notify Me When Available",
      product_page_class: "button button--full-width",
      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",
      button_styles: {
        font_size: "16px", 
        font_family: "Helvetica Neue",
        background_color: "#439fdb",
        color: "#fff", 
        padding: "12px 24px",
        border_radius: "4px",
        margin_top: "10px",
        margin_bottom: "10px"
      }

 

I would love love for it to have the same appearance as our Sold Out Button - half width and white and act the same way as the sold out button. Rather than Sold Out appearing - join the waitlist appears in its place!

 

Thank you so so much!
    }
  });
</script>

Userlevel 5
Badge +29

Hi @emorgannn

To continue troubleshooting the code for the appearance of the button, we recommend working with your developer or reaching out to one of our partners to help meet your goal. They would be able to find the exact solution you are looking for! 

~Chloe

Reply