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 stick to Debut theme, but the concept and most of the steps shall remain same for other themes as well.

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 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. Replace the <p>Loading … </p> with <p><img src=”{{your image URL}}” /></p>. For e.g.

<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 *