How to create a custom Wishlist page?

Using Smart Wishlist, developers can create a custom wishlist page where they can exercise fine customizations and more degree of control over the elements. This can also be extended to display the wishlist on a specific section of any other page of store.

In this example, we shall use Supply theme, but the concept shall remain same for all themes. In fact,for other themes, the only change required is in the code provided below in Step 3.

We shall use the Public API and some Javascript to fetch and display the contents of Wishlist page.

STEPS

1. Log in to Shopify Admin and navigate to to Online Store=> Themes => Edit Code

2. Click “Add a new Template”. Under “Create a new template for” select page and under “called” just enter wishlist.

3. Replace its contents with this code and Save

4. Go to Online Store => Pages => Add Page

5. Enter the title “My Wishlist”. At the right sidebar, you would find a template box. Select page.wishlist under Template Suffix and click Save. Make sure that you leave everything else including the Content box, unlatered.

6. Now open the store and add few items to wishlist. Now come back and click View page. You shall see those items in the newly created Wishlist page.

7. All further customizations have to be made to template/page.wishlist.liquid.

8. You may add a preloader image of your choice so that the users get a visualization of wishlist loading. Download a preloader image (GIF) of your choice and upload it under Assets folder of the theme. Copy the image URL and replace it with the image URL provided in Step 3 above. A sample such image URL is given below.

<p><img src="https://cdn.shopify.com/s/files/1/1702/7393/t/2/assets/preloader.gif?v=1585160368" /> </p>

Leave a Reply

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