Solved

Back In Stock Button & Popup on Shopify Collection Pages

  • 23 June 2021
  • 1 reply
  • 1310 views

Badge +2

Hello klaviyo

   <script src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script>
<script>
    var klaviyo = klaviyo || [];
    klaviyo.init({
      account: "xxxxx",
      list: 'xxxxx',
      platform: "shopify",
      collection_urls: ["/collections/"]
    });
    klaviyo.enable("backinstock",{ 
    trigger: {
      collection_page_text: "Notify Me When Available",
      collection_page_class: "btn",
      collection_page_text_align: "center",
      collection_page_margin: "0px",
      collection_page_width: "100%",
      alternate_anchor: "AddToCart",
      replace_anchor: false
    },
    modal: {
     headline: "{product_name}",
     body_content: "Register and you'll get an email 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: "#000000",
     close_button_color: "#ccc",
     error_background_color: "#fcd6d7",
     error_text_color: "#C72E2F",
     success_background_color: "#d3efcd",
     success_text_color: "#1B9500"
    }
  });
</script>

I am using narrative theme I have added this script in theme.liquid  
  {% unless product.available %}
  <div class='klaviyo-product-container' id='klaviyo-data-handle-{{ product.handle }}' data-klaviyo-handle='{{ product.handle }}'>
  <div class="klaviyo-button-container" style="opacity:1">
  </div>
</div>
    {% endunless %}

and this code in product-grid.liquid file 

notify me is working only for product without variants on collection pages  it is not working for if variants are not available 
when i hover on out of stock product then only button is showing but I  do not want to show  notify mw when available  button on hover i need the flow same as it is working on product pages it is showing directly on product pages wihout hover or I change variant from dropdown 

 

icon

Best answer by David To 23 June 2021, 19:46

View original

1 reply

Userlevel 7
Badge +60

Hello @guptaanjali538,

Thanks for being a member of the Klaviyo Community!

I would first recommend taking a look at some guidelines provided by @Scott for implementing the Klaviyo back in stock functionality on your collections pages:

If after reviewing that post and you are still having trouble, since this sort of functionality does require custom work on your site and is not an out of the box feature of Klaviyo’s, I would recommend reaching out and working with a developer you are familiar with to further troubleshoot. Alternatively, you can also to out to Klaviyo’s extensive network of agency partners for further assistance.

Have a great day! 

David

Reply