Build your own wishlist page
- Go to your “Shopify Admin” -> “Online Store” -> “Themes” -> “Actions” -> “Edit Code”
- Create a new JS asset by going to “Assets” -> “Add a new asset” and called “custom-wishlist.js” and hit save
- Create a new template by going to “Template”-> “Add a new template”.
- Pick “Page” in the drop down and create a new template called “custom-wishlist”. Hit Save.
- Include asset url in “templates/custom-wishlist” to the “custom-wishlist.js”
- Include the code snippets as needed with logic and required styling. ( Check the SDK guide below)
- Navigate to “Pages” > “Add Page”
- Enter a name for the page “My Awesome Wishlist”
- Choose template suffix “page.custom-wishlist” and Save
- Your page is ready.
You can then expose the page in the navigation as you would do for any other page
- Navigate to “Navigation” > Choose a menu > “Main menu”
- Click on “Add menu item”
- Enter “My Awesome Wishlist” as Name (this will be your menu item that opens the Wishlist UI)
- Choose “Page” as Link and choose “My Awesome Wishlist” in the next dropdown
- Hit save
Navigate to your store and your custom Wishlist page is ready to use!
For a more detailed walkthrough of how to build a custom wishlist page, check this video.
It has the code snippets that you can use on your store.