Sometimes, even after adding the Smart Wishlist Code snippet to the product.liquid or any other relevant file, the Wishlist (Heart) icon is not displayed.
This can happen due to two reasons. 1. Javascript Conflict 2. CSS Conflict.
Javascript Conflict
Open the Javascript Console of your browser and check if there are any errors present (marked in red). Often Smart Wishlist app gets loaded despite presence of JS errors, but sometimes the javascript prevent it from loading.
To open Javascript Console on Google Chrome, press Ctrl + Shift + J (Windows / Linux) or Cmd + Opt + J (Mac).
If you are familiar with Javascript, you can easily ascertain the cause of errors and fix them. If you are not, there is no need to worry. You can contact us to diagnose it.
CSS Conflict
This happens due to the conflict of store’s CSS with App’s CSS styles. This happens due to mismatch of z-index or opacity of elements. If the z-index of elements around ‘Add to Cart’ button is higher than the z-index of wishlist icon, the latter gets hidden.
Our experience tells that 60% of such cases happens on stores which use tooltip. Such stores set the default z-index of tooltip lower than other elements and programatically change it when tooltip is needed to display. Since the app also employs tooltip, the entire wishlist icon gets hidden due to the default z-index of tooltip.
Sometimes the opacity of tooltip is set to 0, which renders the element transparent and fully hidden from the screen.
However, this can happen due to other reasons also.
How to fix it?
The easiest way to fix it is to set the z-index of #bookmarkit element to any higher value (say 10).
#bookmarkit {z-index:10 !important}
If the issue is due to opacity, it can be fixed by the following code
#bookmarkit {opacity:1 !important}
If your store employs tooltip, then setting the z-index,opacity of tooltip can also fix the issue
.tooltip{
z-index:10 !important;
opacity:1 !important;
}
If you are familar with CSS debugging,then you can set the z-index/opacity of other related elements to see if that works for you.
If the issue doesn’t get resolved by employing any of the above methods, please contact us.