Create a custom wishlist page

To show the wishlist on a page of your own, or anywhere else in your store, paste the code below in that place. The whole content of the wishlist page then shows there.

Add the code

1. Open the HTML or Liquid code of the place where the wishlist should show.

2. Paste this code there:

   <div class="wishlist-page">
      <div style="text-align: center">
         <svg width="60px" height="60px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ripple">
            <rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect>
            <g>
               <animate attributeName="opacity" dur="2s" repeatCount="indefinite" begin="-1s" keyTimes="0;0.33;1" values="1;1;0"></animate>
               <circle cx="50" cy="50" r="41.2637" stroke="#000" fill="none" stroke-width="6" stroke-linecap="round">
                  <animate attributeName="r" dur="2s" repeatCount="indefinite" begin="-1s" keyTimes="0;0.33;1" values="0;22;44"></animate>
               </circle>
            </g>
            <g>
               <animate attributeName="opacity" dur="2s" repeatCount="indefinite" begin="0s" keyTimes="0;0.33;1" values="1;1;0"></animate>
               <circle cx="50" cy="50" r="24.8458" stroke="#000000" fill="none" stroke-width="6" stroke-linecap="round">
                  <animate attributeName="r" dur="2s" repeatCount="indefinite" begin="0s" keyTimes="0;0.33;1" values="0;22;44"></animate>
               </circle>
            </g>
         </svg>
      </div>
   </div>
   <script>
      var wishlistPageLoad = true;
   </script>

3. Save your changes.

Link to your page

• In your store menu: see Add a Wishlist link to your menu.
• In new customer accounts: see Show the wishlist in new customer accounts.