# Wishlist & Wishlist Page

## Overview

* The **"Wishlist"** section in "Smind sections" app allows customers to save products they’re interested in **"Wishlist page"**.
* Helps users easily keep track of their favorite products, making their experience better.

## How To Install ?

{% embed url="<https://youtu.be/tTI5-aKOmsU>" %}

To use the **"Wishlist"** section, you also need to install the "**Wishlist Page"** section. Please follow the steps and images below."

1. From our app, click **Library**.
2. In the **Sections** tab, search for the keyword **Wishlist**.
3. Click the **Install"** button to install the **Wishlist"** and **Wishlist Page** sections.

{% hint style="danger" %}
Note: These section is **only compatible** with Smind's section. To ensure it works well, please use section of Smind
{% endhint %}

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FWmFFo8CCSAKUjvKdG2RR%2FWishlist%201.jpg?alt=media&#x26;token=7eb5fb03-facf-4a9f-bb6d-f8ffea2f3d93" alt=""><figcaption></figcaption></figure>

4. From the Shopify Editor sidebar, click **Add Section** in the **Global** tab.
5. Search for **Wishlist** section and click on it

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FvDqILUlBPIcihiT1bmfz%2FWishlist%202.jpg?alt=media&#x26;token=5519877a-9802-4fe0-a7c7-5be259f598fb" alt=""><figcaption></figcaption></figure>

6. Create a new template.
7. Enter the name of new template. For example: **Wishlist.** Click **Create Template.**

{% hint style="info" %}
You can name the new template anything you like, suitable for its intended use.
{% endhint %}

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FM0RkpNPFJefnj8Ye2T6I%2FWishlist%203%20(1).jpg?alt=media&#x26;token=8c2cb97d-b195-46da-9f0d-57dc3ebe6aea" alt=""><figcaption></figcaption></figure>

8. From new template you've just created, click **Add Section.**
9. Search for **Wishlist Page** and click on it

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FDRkjlulDDDEyNpELhQZk%2FWishlist%204.jpg?alt=media&#x26;token=d88a9c3b-fc0c-4a69-b175-956513ebce9c" alt=""><figcaption></figcaption></figure>

10. Go back to your Shopify admin, click **Page.**
11. Click **Add Page.**

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FjnRplxoRGPYqycygbR6i%2FWishlist%205.jpg?alt=media&#x26;token=8fb130bc-daf0-4577-9008-69842bb89e1e" alt=""><figcaption></figcaption></figure>

12. Enter the title of the page. For example: **Wishlist** page
13. Choose a template you've just created. For example: **Wishlist** template
14. Under the Visibility, select the **Visible** for the page. Click **Save**

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2Fwd98mmXcTofmo3Z9OjMf%2FWishlist%206.jpg?alt=media&#x26;token=ec035ce3-07ea-4b45-9642-9253c8120bb5" alt=""><figcaption></figcaption></figure>

15. Go to Shopify Editor sidebar, click on **Wishlist** section under the Global section.
16. Choose a page you've just created for the wishlist page. For example: **Wishlist** page

Once the setup is complete, you will see the products you favor on the **Wishlist page**.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FyxMHjDLgna0WKbyaArzi%2FWishlist%207.jpg?alt=media&#x26;token=166b3994-8545-4ff1-80ca-7afd2379c185" alt=""><figcaption></figcaption></figure>

## How To Use ?

After adding the **"Wishlist"** section to your theme,  the **Wishlist** heart icon will appear on the product.  When you click on the **Wishlist icon**, the product will be automatically added to your favorites list on the **Wishlist** page.

{% hint style="warning" %}
The 'Wishlist' is only displayed on our section. If you are not using our sections, it will not be visible.
{% endhint %}

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2Fg03cniWuhx7Ado6uzbDH%2FWishlist%208.jpg?alt=media&#x26;token=99f48292-bdd0-4293-9fa8-99b0048edce4" alt=""><figcaption></figcaption></figure>

If you click the **Wishlist** icon again, two cases may occur (depending on your settings).&#x20;

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2Fabk6E4kDmlithusvQRdr%2FWishlist%209.jpg?alt=media&#x26;token=d0d0be8e-dff0-456d-9493-bab451408150" alt=""><figcaption></figcaption></figure>

Case 1:  The product will be removed from the **Wishlist page.**

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FLI3qbTvAWUKwduDnD2LE%2FWishlist%2010.jpg?alt=media&#x26;token=c423467a-c03d-4169-b545-89d098f7ef98" alt=""><figcaption></figcaption></figure>

Case 2: The other is that it will take you to the page **Wishlist page .**

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FArwQe5fQSQ8DMtJOTHAY%2FWishlist%2011.jpg?alt=media&#x26;token=8e27fb32-5ab0-494a-a090-138059f7cead" alt=""><figcaption></figcaption></figure>

When you access the **"Wishlist page"**,  you can view the list of your favorite products and remove items from this page.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FV0lEoO1DtVUlua49F1gf%2FWishlist%2012.jpg?alt=media&#x26;token=1922d89c-62c7-4204-9956-201cc565d624" alt=""><figcaption></figcaption></figure>

## Display Locations of the Wishlist

The **wishlist** can be displayed on both desktop and mobile in the following locations.

1. **Header**

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F0s4GNvjkBFoSrkYJCXiN%2FWishlist%2013.jpg?alt=media&#x26;token=3d93c253-20b9-4d1e-9347-3a9969411ee3" alt=""><figcaption></figcaption></figure>

2. **Product card**

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FKXl9W3pV3Zb0mfCeoeTJ%2FWishlist%2014.jpg?alt=media&#x26;token=6ce5400b-c092-40c6-825f-403cad91021c" alt=""><figcaption></figcaption></figure>

3. **Product detail**

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FwbqaAzvDwz4G7xtxzUUe%2FWishlist%2015.jpg?alt=media&#x26;token=0f7b2b19-d29e-4f01-bc72-7c58537273d1" alt=""><figcaption></figcaption></figure>

4. **Quick view**

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FPKSMBKd3kMFeQSt0PXGA%2FWishlist%2016.jpg?alt=media&#x26;token=3332a80e-2c7b-45c7-95ef-edb20e0f4f0f" alt=""><figcaption></figcaption></figure>

5. **Customer account**

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FvZhTrnYGuq3Qpky1ZEv1%2Fimage.png?alt=media&#x26;token=17f90713-1d7e-4fca-90a3-e0072467fb03" alt=""><figcaption></figcaption></figure>
