Hide the bell until the notifications are loaded

Dev Updated by Dev

To avoid the frustrations of a temporarily "unclickable bell", it is a good practice to hide the notification bell icon until the notifications are loaded. This is especially true if you use a solution like Cookieyes that deactivates marketing apps when cookies are refused by visitors.

Hiding the bell when the notifications are not loaded yet can be achieved by adding custom styles to the bell button. When the notifications finish to load, we add a custom HTML class to the bell: wisp_ready. This class can be used to show / hide the element at this moment.

Examples

  1. Hide the bell then show it when the notifications are ready:
<style>
  .wisp:not(.wisp_ready) {
    display: none;
  }
</style>

This code is expected to be added to your HTML's head tag.

  1. Hide the bell then show it when the notifications are ready with a fade in animation:
<style>
  .wisp {
    opacity: 0;
    transition: opacity 0.2s ease-out;
  }
  .wisp_ready {
    opacity: 1;
  }
</style>

This code is expected to be added to your HTML's head tag.

Add the notification feed with Shopify

Contact