How To Add Wishlist in Shopify [Without APP]

Hello everyone, welcome back to WebSensePro! Today, we’re diving into one of the most requested topics: adding a wishlist feature to your Shopify store without relying on third-party apps. Over the past few months, we’ve received numerous requests for this tutorial, and we’re thrilled to finally bring it to you.

Step 1: Create Template

Create a new template ‘wishlist’ and add the following code:

<!-- -Create template/page.wishlist.liquid- -->

<div class="page-width">
  {% render 'wishlist' %}
</div>

After creating template assign this to page. You can name it Wishlist

Step 2: Create New Snippet

Create a new snippet file called wishlist and add the following code:

<style>
  /* Style for product display can be added based on your design requirements */
  @media only screen and (min-width: 750px) {
      .js-wishlistBlock {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr 1fr;
          column-gap: var(--grid-desktop-horizontal-spacing);
      }
  }

  .c-product {
      cursor: pointer;
      margin-bottom: 20px;
  }

  .c-product img {
      width: 100%;
      max-height: 300px;
      object-fit: cover;
      border-radius: 5px;
      transition: all .5s ease;
  }

  .c-product img:hover {
      transform: scale(1.03);
  }

  .c-product h3.c-product__title {
      margin-top: 10px;
      position: relative;
  }
</style>

<div class="recently-title">
  <h2 class="title inline-richtext h2 scroll-trigger animate--slide-in"><b>Wishlist</b></h2>
</div>
<div class="js-wishlistBlock">
  <!-- Wishlist items will be displayed here -->
</div>


Step 3: Adding Wishlist Button In Product Page

Copy the following code and add in Custom Liquid block of product page template

 {% if settings.enable-wishlist %}
                  <button onclick="toggleWishlist()" class="wishlist_button">
                    <svg width="30px" height="30px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                      <rect x="0" fill="none" width="24" height="24"/>

                      <g>

                      <path d="M16.5 4.5c2.206 0 4 1.794 4 4 0 4.67-5.543 8.94-8.5 11.023C9.043 17.44 3.5 13.17 3.5 8.5c0-2.206 1.794-4 4-4 1.298 0 2.522.638 3.273 1.706L12 7.953l1.227-1.746c.75-1.07 1.975-1.707 3.273-1.707m0-1.5c-1.862 0-3.505.928-4.5 2.344C11.005 3.928 9.362 3 7.5 3 4.462 3 2 5.462 2 8.5c0 5.72 6.5 10.438 10 12.85 3.5-2.412 10-7.13 10-12.85C22 5.462 19.538 3 16.5 3z"/>

                      </g>
                    </svg>
                  </button>
                {% endif %}

Step 4: Add the following code in settings_schema.json

Copy the following code and add in settings_schema.json file below

 {
        "name":"Wishlist",
        "settings":[
          {
            "type": "paragraph",
            "content": "Subscribe our channel [websensepro](https:\/\/youtube.com\/@websensepro?sub_confirmation=1)"
          },
         {
            "type":"checkbox",
            "id":"enable-wishlist",
            "label": "Enable Wishlist",
            "default": false
          },
          {
            "type":"checkbox",
            "id":"wishlist-floating-button-position",
            "label": "Enable Floating Button",
            "default": false
          },
           {
          "type": "select",
          "id": "floating_button-position",
          "options": [
            {
              "value": "middle-left",
              "label": "Middle Left"
            },
            {
              "value": "middle-right",
              "label": "Middle Right"
            },
            {
              "value": "bottom-left",
              "label": "Bottom Left"
            },
            {
              "value": "bottom-center",
              "label": "Bottom Center"
            },
            {
              "value": "bottom-right",
              "label": "Bottom Right"
            }
          ],
          "default": "middle-right",
          "label": "Floating Button Position"
        }
        ]
      },

Step 5: Add Code in Theme.liquid

Add the following code in theme.liquid file below <body> tag

    <script>
   // Wishlist feature: Add or remove the current product from the wishlist
    function toggleWishlist() {
        const pdpData = {
            productTitle: "{{ product.title }}",
            productImg: "{{ product.featured_image | img_url: '' }}",
            productPrice: "{{ product.price | money | remove_first: '' }}",
            productUrl: "{{ product.url }}"
        };

        let wishlistData = JSON.parse(localStorage.getItem('wishlist')) || [];
        const isAlreadyInWishlist = wishlistData.some(item => item.productTitle === pdpData.productTitle);
        const wishlistButton = document.getElementsByClassName('wishlist_button')[0];

        if (!isAlreadyInWishlist) {
            wishlistData.push(pdpData);
            localStorage.setItem('wishlist', JSON.stringify(wishlistData));
            // alert('Product added to wishlist:', pdpData.productTitle);
            wishlistButton.innerHTML = `<svg class="heart-filled" width="35px" height="35px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.3 5.71002C18.841 5.24601 18.2943 4.87797 17.6917 4.62731C17.0891 4.37666 16.4426 4.2484 15.79 4.25002C15.1373 4.2484 14.4909 4.37666 13.8883 4.62731C13.2857 4.87797 12.739 5.24601 12.28 5.71002L12 6.00002L11.72 5.72001C10.7917 4.79182 9.53273 4.27037 8.22 4.27037C6.90726 4.27037 5.64829 4.79182 4.72 5.72001C3.80386 6.65466 3.29071 7.91125 3.29071 9.22002C3.29071 10.5288 3.80386 11.7854 4.72 12.72L11.49 19.51C11.6306 19.6505 11.8212 19.7294 12.02 19.7294C12.2187 19.7294 12.4094 19.6505 12.55 19.51L19.32 12.72C20.2365 11.7823 20.7479 10.5221 20.7442 9.21092C20.7405 7.89973 20.2218 6.64248 19.3 5.71002Z" fill="#000000"/>
</svg>
<p class="wishlist_text">In Your Wishlist</p>
`;
        } else {
            wishlistData = wishlistData.filter(item => item.productTitle !== pdpData.productTitle);
            localStorage.setItem('wishlist', JSON.stringify(wishlistData));
            // alert('Product removed from wishlist:', pdpData.productTitle);
            wishlistButton.innerHTML = `<svg class="heart-outline" width="40px" height="40px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

<rect x="0" fill="none" width="24" height="24"/>

<g>

<path d="M16.5 4.5c2.206 0 4 1.794 4 4 0 4.67-5.543 8.94-8.5 11.023C9.043 17.44 3.5 13.17 3.5 8.5c0-2.206 1.794-4 4-4 1.298 0 2.522.638 3.273 1.706L12 7.953l1.227-1.746c.75-1.07 1.975-1.707 3.273-1.707m0-1.5c-1.862 0-3.505.928-4.5 2.344C11.005 3.928 9.362 3 7.5 3 4.462 3 2 5.462 2 8.5c0 5.72 6.5 10.438 10 12.85 3.5-2.412 10-7.13 10-12.85C22 5.462 19.538 3 16.5 3z"/>

</g>

</svg>
<p class="wishlist_text">Not In Wishlist</p>
`;
        }

        // Update the display after modifying the wishlist
        displayWishlist();
    }


    // Remove the specified product from the wishlist
    function removeFromWishlist(productTitle) {
        let wishlistData = JSON.parse(localStorage.getItem('wishlist')) || [];
        wishlistData = wishlistData.filter(item => item.productTitle !== productTitle);
        localStorage.setItem('wishlist', JSON.stringify(wishlistData));
        // Update the display after removing from the wishlist
        displayWishlist(pdpData);
    }

    // Display wishlist items
    function displayWishlist(pdpData) {
        const wishlistData = JSON.parse(localStorage.getItem('wishlist')) || [];
        
        if (wishlistData.length === 0) {
            console.log('Wishlist is empty');
            return;
        }

        const wishlistHtml = wishlistData.map(item => `
            <div class="wishlist-product__list">
                <div class="c-product">
                <a href="${item.productUrl}">
                    <img src="${item.productImg}" alt="${item.productTitle}">
                    </a>
                    <h3 class="c-product__title card__heading h5">
                        <a class="full-unstyled-link" href="${item.productUrl}">${item.productTitle}</a>
                    </h3>
                    <p>${item.productPrice}</p>
      {% comment %}<button onclick="removeFromWishlist('${item.productTitle}')">Remove</button> {% endcomment %}
                </div>
            </div>
        `).join('');

        const wishlistBlock = document.querySelector('.js-wishlistBlock');

        // Add a check to ensure the element is not null before setting innerHTML
        if (wishlistBlock) {
            wishlistBlock.innerHTML = wishlistHtml;
        } else {
            console.error('Element with class "js-wishlistBlock" not found');
        }
    }

   // Execute this function on DOM content load
document.addEventListener('DOMContentLoaded', function () {
    // Fetch the wishlist data from localStorage
    const wishlistData = JSON.parse(localStorage.getItem('wishlist')) || [];

    // Set the initial button text based on whether the product is in the wishlist or not
    const wishlistButton = document.querySelector('.wishlist_button'); // Use querySelector instead of getElementsByClassName
    const productTitle = "{{ product.title }}";
    
    if (wishlistButton) {
        const isAlreadyInWishlist = wishlistData.some(item => item.productTitle === productTitle);
        wishlistButton.innerHTML = isAlreadyInWishlist ? `<svg class="heart-filled" width="35px" height="35px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.3 5.71002C18.841 5.24601 18.2943 4.87797 17.6917 4.62731C17.0891 4.37666 16.4426 4.2484 15.79 4.25002C15.1373 4.2484 14.4909 4.37666 13.8883 4.62731C13.2857 4.87797 12.739 5.24601 12.28 5.71002L12 6.00002L11.72 5.72001C10.7917 4.79182 9.53273 4.27037 8.22 4.27037C6.90726 4.27037 5.64829 4.79182 4.72 5.72001C3.80386 6.65466 3.29071 7.91125 3.29071 9.22002C3.29071 10.5288 3.80386 11.7854 4.72 12.72L11.49 19.51C11.6306 19.6505 11.8212 19.7294 12.02 19.7294C12.2187 19.7294 12.4094 19.6505 12.55 19.51L19.32 12.72C20.2365 11.7823 20.7479 10.5221 20.7442 9.21092C20.7405 7.89973 20.2218 6.64248 19.3 5.71002Z" fill="#000000"/>
</svg> <p class="wishlist_text">In Your Wishlist</p>` : `<svg width="35px" height="35px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="heart-outline">

<rect x="0" fill="none" width="24" height="24"/>

<g>

<path d="M16.5 4.5c2.206 0 4 1.794 4 4 0 4.67-5.543 8.94-8.5 11.023C9.043 17.44 3.5 13.17 3.5 8.5c0-2.206 1.794-4 4-4 1.298 0 2.522.638 3.273 1.706L12 7.953l1.227-1.746c.75-1.07 1.975-1.707 3.273-1.707m0-1.5c-1.862 0-3.505.928-4.5 2.344C11.005 3.928 9.362 3 7.5 3 4.462 3 2 5.462 2 8.5c0 5.72 6.5 10.438 10 12.85 3.5-2.412 10-7.13 10-12.85C22 5.462 19.538 3 16.5 3z"/>

</g>

</svg>
<p class="wishlist_text">Not In Wishlist</p>
`;
    } else {
        console.error('Element with class "wishlist_button" not found');
    }

    // Display wishlist items
    displayWishlist();
});
    </script>

    {% if settings.wishlist-floating-button-position' %}
      <a href="/pages/wishlist" class="button-floating">
        <svg width="30px" height="30px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <rect x="0" fill="none" width="24" height="24"/>

          <g>

          <path d="M16.5 4.5c2.206 0 4 1.794 4 4 0 4.67-5.543 8.94-8.5 11.023C9.043 17.44 3.5 13.17 3.5 8.5c0-2.206 1.794-4 4-4 1.298 0 2.522.638 3.273 1.706L12 7.953l1.227-1.746c.75-1.07 1.975-1.707 3.273-1.707m0-1.5c-1.862 0-3.505.928-4.5 2.344C11.005 3.928 9.362 3 7.5 3 4.462 3 2 5.462 2 8.5c0 5.72 6.5 10.438 10 12.85 3.5-2.412 10-7.13 10-12.85C22 5.462 19.538 3 16.5 3z"/>

          </g>
        </svg>
        <p class="wishlist_text">Your Wishlist</p>
      </a>
    {% endif %}

Step 6: Add More Code in Theme.liquid

Add the following code above {% endstyle %} in theme.liquid file:

  .wishlist_button{
              background: none;
              border: none;
              display: flex;
              align-items: center;
            }

            .wishlist_button svg{
              border-radius: 50%;
              margin: 10px 0;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
              border: 1px solid #000;
              padding: 5px;
            }

            .heart-filled path{
              fill: red;
            }


                              .button-floating{
                                position: fixed;
                                transform: translateY(-50%);
                                z-index: 1;
                                padding: 8px;
                                display: inline-flex;
                                align-items: center;
                                text-decoration: none;
                                color: #000;
                                background-color: #efefef;
                                border-radius: 6px 0 0 6px;
                                transition: all .5s ease;
                              }

                        .button-floating:hover{
                          background-color: #000;
                        }

                  .button-floating:hover svg, .button-floating:hover .wishlist_text{
                    fill: #fff;
                    color: #fff;
                  }

                        .wishlist_text{
                          margin-left: 7px !important;;
                          margin: 0px;
                          text-decoration: none;
                        }

      {% assign button_position = settings.floating_button-position | default: "middle-right" %}


      {% if button_position == "middle-left" %}
       .button-floating{
         top: 50%;
         transform: translateY(-50%);
         left: 0px;
         width: fit-content;
         border-radius: 0 6px 6px 0;
         z-index: 11;
       }
      {% elsif button_position == "middle-right" %}
       .button-floating{
        top: 50%;
         transform: translateY(-50%);
         right: 0px;
         width: fit-content;
         border-radius: 6px 0 0 6px;
        z-index: 11;
       }
      {% elsif button_position == "bottom-left" %}
        .button-floating{
          bottom: 30px;
         left: 0px;
         width: fit-content;
         border-radius: 0 6px 6px 0;
          z-index: 11;
       }
      {% elsif button_position == "bottom-center" %}
        .button-floating{
          bottom: 30px;
         left: 50%;
          transform: translateX(-50%);
         width: fit-content;
         border-radius: 6px 6px 6px 6px;
        z-index: 11;
       }
      {% elsif button_position == "bottom-right" %}
        .button-floating{
          bottom: 30px;
         right: 0px;
         width: fit-content;
         border-radius: 6px 0 0 6px;
          z-index: 11;
       }
      {% endif %}
5/5 - (13 votes)

About

2 thoughts on “How To Add Wishlist in Shopify [Without APP]”

Leave a Comment

Your email address will not be published. Required fields are marked *