Dynamically Hide the “Share Wishlist” Button When Your Wishlist is Empty

Many online stores offer the ability to create wishlists, and the Smart Wishlist app provides a robust solution for this functionality for stores hosted on Shopify. It’s a great way to keep track of items you might want to purchase in the future. The “Share Wishlist” button allows you to send your wishlist to friends and family. In this article, we’ll show you how to enhance the user experience of the Smart Wishlist app by hiding the “Share Wishlist” button whenever there are no items on the list.

Understanding the Problem

A visible “Share Wishlist” button in an empty wishlist serves no purpose and can be a bit confusing. Ideally, we only want the button to display when the wishlist actually contains items.

The Solution: A Little Bit of JavaScript

Here’s a JavaScript code snippet that will automatically hide and show the share button based on the contents of your wishlist:

JavaScript

<script>
  function checkAndHideShareButton() {
  // Check if the element with class "empty-wishlist" exists
  if (document.querySelector('.empty-wishlist')) {
    const shareButton = document.querySelector('.sharebutton');
    if (shareButton) {
      shareButton.style.display = 'none';
    }
  }
}

// Call the function initially to check on page load
checkAndHideShareButton();

// Set up periodic checking using setInterval (e.g., every 2 seconds)
setInterval(checkAndHideShareButton, 2000); 
</script>  

Implementing the Code

1. Create the Snippet File: In your Shopify theme, navigate to the “Snippets” section and create a new snippet file named wishlist-enhancements.liquid.
2. Paste the Code: Paste the provided JavaScript code into your new wishlist-enhancements.liquid file.
3. Include the Snippet: In your theme’s layout file layout/theme.liquid , include the snippet like this:

{% unless template %}
{% include 'wishlist-enhancements' %}
{% endunless %}