Solved

Back In Stock Button & Popup on Shopify Collection Pages

  • 8 April 2021
  • 4 replies
  • 67 views

Badge

Hello! Is it possible to get the Back in Stock button to trigger on a Shopify collection page in addition to the product page? I’ve played around with it a little bit with no luck – I’m guessing a function within onsite.js would need to be modified, but wondering if anyone has experience with doing this before attempting anything.

 

Thanks,

Chris

icon

Best answer by Scott 8 April 2021, 16:47

Hi @chrisnichols 

 

While Klaviyo’s BIS feature was not optimized for collections pages, it is possible with some customization to your theme. Please note, the feature is also only guaranteed to work for the default, free Shopify themes so if you’re using a custom theme it may require further development work to get this working.

 

To enable the feature on collections pages you’ll need to update the snippet in your theme.liquid file. Make sure you include any partial paths to collection pages where you want Klaviyo’s onsite code to add the trigger/button.

klaviyo.init({     
account: "{ACCOUINT_ID}",
platform: "shopify",
collection_urls: ["/collections/"]
});

Additionally, you can update the trigger settings to style the collection BIS button separately from that on a product page.

trigger: {    
collection_page_class: 'btn',
collection_page_text_align: 'center',
collection_page_width: '200px',
collection_page_text: 'Notify Me When Available',
collection_page_padding: 'inherit',
}

Finally, you’ll need to add an element to each item in the product grid on your collection page. Some common theme file locations are: product-grid-item.liquid, product-card-grid.liquid. Klaviyo’s BIS functionality will use this element to inject the “Notify Me” button on out-of-stock items.

<div class='klaviyo-product-container' id='klaviyo-data-handle-{{ product.handle }}' data-klaviyo-handle='{{ product.handle }}'>
<div class="klaviyo-button-container">
</div>
</div>

You’ll want to conditionally add this element to each item in the product grid depending on whether it’s available. This can be done a number of ways and is theme dependent but the most common is to utilize the product.available property.

 

If set up properly the collection page “Notify Me” button will appear as you mouse over an out-of-stock product item. And when clicked the modal will appear as expected. Unfortunately, this functionality does require quite a bit of customization depending on your theme but it can be done. Hopefully this will point you in the right direction.

 

Best,

Scott

View original

4 replies

Userlevel 1
Badge

Hi @chrisnichols 

 

While Klaviyo’s BIS feature was not optimized for collections pages, it is possible with some customization to your theme. Please note, the feature is also only guaranteed to work for the default, free Shopify themes so if you’re using a custom theme it may require further development work to get this working.

 

To enable the feature on collections pages you’ll need to update the snippet in your theme.liquid file. Make sure you include any partial paths to collection pages where you want Klaviyo’s onsite code to add the trigger/button.

klaviyo.init({     
account: "{ACCOUINT_ID}",
platform: "shopify",
collection_urls: ["/collections/"]
});

Additionally, you can update the trigger settings to style the collection BIS button separately from that on a product page.

trigger: {    
collection_page_class: 'btn',
collection_page_text_align: 'center',
collection_page_width: '200px',
collection_page_text: 'Notify Me When Available',
collection_page_padding: 'inherit',
}

Finally, you’ll need to add an element to each item in the product grid on your collection page. Some common theme file locations are: product-grid-item.liquid, product-card-grid.liquid. Klaviyo’s BIS functionality will use this element to inject the “Notify Me” button on out-of-stock items.

<div class='klaviyo-product-container' id='klaviyo-data-handle-{{ product.handle }}' data-klaviyo-handle='{{ product.handle }}'>
<div class="klaviyo-button-container">
</div>
</div>

You’ll want to conditionally add this element to each item in the product grid depending on whether it’s available. This can be done a number of ways and is theme dependent but the most common is to utilize the product.available property.

 

If set up properly the collection page “Notify Me” button will appear as you mouse over an out-of-stock product item. And when clicked the modal will appear as expected. Unfortunately, this functionality does require quite a bit of customization depending on your theme but it can be done. Hopefully this will point you in the right direction.

 

Best,

Scott

Badge

@Scott Thank you very much for the quick response and solution – it’s working perfectly now!

 

I do have a follow-up question: This might be due to the theme we have, but the “Notify Me” button only initializes if the product variant that is out of stock is selected when the page first loads – i.e. if an in-stock variant is the first one viewed, the “Notify Me” button won’t appear when clicking to an out-of-stock variant. Is it possible to have the button initialize when selecting an out-of-stock variant without having to reload the page?

 

Chris

Userlevel 2
Badge +1

Hi @chrisnichols 

 

I would definitely suggest reaching out to Shopify as this sounds like it could be related to your theme. To start the trouble shooting process, I’m including this doc on styling back in stock for free Shopify themes. I’m not sure if you’re using a free theme, but this could help! I would also review the trigger settings to ensure these are set up correctly. That doc also includes this troubleshooting guide

 

I hope this helps!

Marissa

Badge

@marissanunez Thank you for the response – I have previously looked over the links you provided and I wasn’t able to find anything that would solve the issue. I believe it is related to my theme as well, so I may need to reach out to a developer for further customization.

Reply