0 - WA Wishlists - WEV Agency

Setup

Please follow the following steps for the initial setup of the app.

Blocks

Once the application is installed, the first step is to configure the add/remove button for products on the theme. To do this, we will use the block editor in Shopify’s theme customization tool.

Add and remove button

To insert the add/remove button block into your theme, go to the Shopify theme editor, which you will find in the left navigation bar under “Sales channels” -> “Online Store.” Then press the “Customize” button next to the name of your store’s theme.

Locate the product page template and add a WA Wishlist Button block by clicking the “Add Block” button in the left block scheme. In the dropdown, select the “Apps” tab and then the “Wishlist Button” option.

Once inserted, the button should appear in the preview theme window.

Wishlist Template

To allow your customers to see the products they have added to their wishlists, we will insert a new option into the store’s menu.

Still within the Shopify theme editor, in the top dropdown menu, locate the “Pages” section and click on “Create template.” Give the template a name. In our example, we will call it “Wishlist Template.”

Next, let’s add the block that displays customers’ wishlists to this template. Press the “Add block” button in the left menu, under the “Template” section, sub-option “Apps”.

Again, just as you did with the button, in the dropdown menu, select the “Apps” tab and then click on “Wishlist List”.

Once inserted, a message should appear in the theme preview indicating that there are no products in the wishlist.

We have finished with the theme editor. Save the changes by clicking the “Save” button at the top right.

Now we will create a “Wishlist” page that we will later link to a menu option in the store. To do this, go to the “Pages” submenu found under the “Online Store” option in your store’s admin panel.

Add a new page by clicking the “Add page” button at the top right of the screen. Name the page, in our example we will call it “Wishlists”, select the just created template in the dropdown and save it by pressing the button at the bottom right.

Great! Now that we have created the page, let’s create a new option in the store’s menu and link it to the newly created page.

Navigate to the “Navigation” submenu found under the Online Store option in your store’s admin panel and click “Add menu item”. A panel will appear on the right. Give the menu item a name, in our example we will call it Wishlists, and select “pages” from the dropdown menu below. Select the name of the page we created earlier, in our example “Wishlist”.

That’s it! You have finished the app setup.

Block Settings

Now that you have the blocks inserted, it’s a good time to configure the settings. Go back to the Shopify theme editor and look for the “Wishlist Button” block in the product template.

Once you select the block, a panel will appear on the left where you will find the following options:

“Use custom design”: Select this option if you want to customize the button using CSS classes. More information can be found in the “Custom design” section of this documentation.

“Show button for guests”: Check this option if you want guests (non-logged-in users) to be able to add products to wishlists. Please note that guests can only have one wishlist (called “Default”).

On the other hand, if you select the “Wishlist List” block from the template we created earlier on the “Wishlists” page in our example, the available options will be as follows:

“Use custom design”: Select this option if you want to customize the appearance of wishlists using CSS classes. More information can be found in the “Custom design” section of this documentation.

“Allow guests”: If you check this option, guest users (non-logged-in users) will be able to view your wishlist. Otherwise, a message will appear inviting the user to register.

“Allow multiple wishlists”: If this option is checked, it allows registered users only to have multiple wishlists. For example, if a user uses their account for the entire family, they can have a wishlist for each family member. If you uncheck this option, users will only have access to the default wishlist named “Default.”

General

Dashboard

Once the application is installed, you can access the dashboard through your store’s administrative panel. For example, if your store is called “store,” you can access the panel at this address: https://store.myshopify.com/admin

Select WA Wishlist from the left navigation bar under the Apps section.

If you can’t see the application, click the “>” button next to the Apps option to select it from the installed apps in your store.

The Dashboard provides an overview of wishlists activity in your store. Monitor customer wishlists, track popular products, and access valuable insights to inform your business decisions.

At the top of the dashboard, you will find a summary of the users who are using wishlists, the number of products that have been added to the lists, and the number of unique products.

You will also see what percentage of the plan you are using. Please make sure not to exceed 100% of the plan to avoid service interruptions. If you need more capacity, you can upgrade to a higher plan

in the Plans menu. For more information, please refer to the Plans section of the documentation.

At the bottom, you will see a list of the most wished-for products and how many times each has been added to a wishlist.

Wishlists

You can view all your customers’ wishlists in the Wishlists panel found in the left menu. Here, you will have a list of the wishlists your customers have created, the names they have given to the wishlists, and the number of items they have added.

A single customer can have more than one wishlist if the multi-list option is enabled. For more details, refer to the Block section of the documentation.

From this panel, you can directly access your customer’s profile by clicking on the customer number or view the products contained in a wishlist by clicking on the wishlist name. You can also see the last time a product was added to a wishlist.

If you wish, you can delete customer wishlists. This can be very useful if your plan is nearing its capacity limit. For example, you can delete wishlists from customers who no longer visit your store, customers who abuse the wishlist system, or wishlists that are abandoned.

You can remove one or more wishlists by selecting the checkbox on the left side of each row and pressing the “Delete” button. These changes cannot be undone.

Items in wishlist

If you click on a customer’s wishlist name, you will be taken to a screen where you can view the products contained in that wishlist.

From here, you can directly access the product details by clicking on the product name.

Just like in the customer’s wishlist panel, you can remove products from a wishlist by selecting the checkbox on the left side of each row and pressing the “Delete” button. These changes cannot be undone.

Custom design

This section is for advanced users. Ideal for theme developers or those wishing to customize the theme. CSS knowledge is required.

Button design

To customize the add/remove product button for the wishlist, activate the “Use custom design” option in the button block. You can learn how to do this in the “Block settings” section of this documentation.

Once this option is activated, the button will disappear. You must then define where and how you want to display the button.

The button consists of several sections: the loading section (while verifying if the product is already added to the wishlist), the selection section where the customer can choose which wishlist to add the product to (for registered users with the “Allow multiple wishlists” option activated), and finally, the two states of the button, “Add” and “Remove” from the wishlist.

To define the appearance of the button when it is verifying whether the product is added to the wishlist or not, create a <div> with the name “wawl-searching” and replace class with your custom classname:

<div class="user-custom-classname" name="wawl-searching">
  <p>Loading</p>
</div>

Next, define the multiple wishlists selector. Again, use your own classnames if needed:


<div class="wawl-wishlist-button__select" name="wawl-listname-select" style="display:none;">
  <select id="wawl-listname" name="wawl-listname"></select>
</div>

Now define add to wishlist button:


<button class="wawl-wishlist-button__btn btn--add wawl-btn" name="wawl-additem" style="display:none;">
  <p>{{ 'Add_to_wishlist' | t }}</p>

  <svg class="icon" id="Capa_2" data-name="Capa 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 22">
    <g id="Capa_1-2" data-name="Capa 1">
      <g id="icons">
        <path d="M18.58.04c-.23-.02-.47-.04-.71-.04-2.42,0-4.64,1.3-5.88,3.38-1.24-2.08-3.45-3.38-5.88-3.38-.24,0-.48.01-.71.04C3.69.22,2.18,1.13,1.17,2.61.06,4.24-.29,6.37.24,8.28c.25.9.76,1.79,1.52,2.63l9.86,10.92c.1.11.23.17.37.17s.28-.06.37-.17l9.86-10.92c.76-.84,1.27-1.73,1.52-2.63.53-1.92.18-4.04-.93-5.67C21.82,1.13,20.31.22,18.58.04ZM22.79,8.02c-.21.76-.65,1.51-1.3,2.23l-9.49,10.51L2.51,10.25c-.65-.73-1.09-1.48-1.3-2.23-.45-1.64-.16-3.45.79-4.84.84-1.23,2.09-1.99,3.52-2.14.2-.02.4-.03.6-.03,2.36,0,4.48,1.45,5.42,3.68.15.37.77.37.92,0,.94-2.24,3.06-3.68,5.42-3.68.2,0,.4.01.6.03,1.43.15,2.68.91,3.52,2.14.95,1.39,1.24,3.2.79,4.84Z"/>
      </g>
    </g>
  </svg>
</button>

And finally, define remove from wishlist button:


<button class="wawl-wishlist-button__btn btn--remove wawl-btn" name="wawl-removeitem" style="display:none;">
  <p>{{ 'Remove_from_wishlist' | t }}</p>

  <svg
    class="icon"
    id="Capa_2"
    data-name="Capa 2"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    viewBox="0 0 24 22"
  >
    <g id="Capa_1-2" data-name="Capa 1-2">
      <g id="icons">
        <path d="M18.6,0C18.4,0,18.1,0,17.9,0,15.5,0,13.2,1.3,12,3.4,10.8,1.3,8.5,0,6.1,0s-.5,0-.7,0C3.7.2,2.2,1.1,1.2,2.6,0,4.2-.3,6.4.2,8.3c.3.9.8,1.8,1.5,2.6l9.9,10.9c.1.1.2.2.4.2s.3,0,.4-.2l9.9-10.9c.8-.8,1.3-1.7,1.5-2.6.5-1.9.2-4-.9-5.7-1-1.5-2.5-2.4-4.2-2.6Z"/>
      </g>
    </g>
  </svg>
</button>

And that’s it! You now have a customized button. Remember to use your own classes and text translations where needed.

Customer wishlist design

If you want to customize the list of products displayed to the customer, follow these steps:

Multiple wishlists support

For multiple wishlists option enable, we need to define all the user interface elements, specifically wishlist selector and popups that appear when adding, removing or renaming wishlists.

Begin creating a selector for multiple wishlists. Change class names to your own and translations where needed:

<div name="wawl-listname-selector" style="display:none;">
  <input class="wawl-btn" name="wawl-listname-create" type="button" value="{{ 'Common.create_wishlist' | t }}">

  <div class="divider"></div>

  <select class="wawl-select" name="wawl-listname"></select>

  <div class="btn-controls">
    <input
      class="wawl-btn"
      name="wawl-listname-rename"
      type="button"
      value="{{ 'Common.rename_wishlist' | t }}"
      disabled
    >

    <input
      class="wawl-btn"
      name="wawl-listname-delete"
      type="button"
      value="{{ 'Common.delete_wishlist' | t }}"
      disabled
    >
  </div>
</div>

Next create all the popups for the create, remove and rename:

{% comment %} POP-UPs {% endcomment %}
<div class="wawl-popup" name="wawl-wishlist-create-popup" style="display:none;">
  <div class="wawl-popup__close" name="wawl-close-popup">
    <img src="{{ 'icon--close.svg' | asset_url }}" width="18" height="18" alt="Close">
  </div>

  <label for="listname">
    <span>{{ 'Common.create_name' | t }}</span>
    <input class="wawl-popup__input" name="wawl-create-listname" value="">
  </label>

  <input
    class="wawl-popup__btn wawl-btn"
    name="wawl-create-submit"
    type="button"
    value="{{ 'Common.create_wishlist' | t }}"
  >
</div>

<div class="wawl-popup" name="wawl-wishlist-rename-popup" style="display:none;">
  <div class="wawl-popup__close" name="wawl-close-popup">
    <img src="{{ 'icon--close.svg' | asset_url }}" width="18" height="18" alt="Close">
  </div>

  <label for="listname">
    <span>{{ 'Common.rename_to_name' | t }}</span>
    <input class="wawl-popup__input" name="wawl-rename-listname" value="">
  </label>

  <input
    class="wawl-popup__btn wawl-btn"
    name="wawl-rename-submit"
    type="button"
    value="{{ 'Common.rename_wishlist' | t }}"
  >
</div>

<div class="wawl-popup" name="wawl-wishlist-delete-popup" style="display:none;">
  <div class="wawl-popup__close" name="wawl-close-popup">
    <img src="{{ 'icon--close.svg' | asset_url }}" width="18" height="18" alt="Close">
  </div>
  <div>{{ 'Common.delete_wishlist_confirm' | t }}</div>

  <div class="wawl-popup__btn-group">
    <input class="wawl-popup__btn wawl-btn" name="wawl-delete-yes" type="button" value="{{ 'Common.yes' | t }}">
    <input class="wawl-popup__btn wawl-btn" name="wawl-delete-no" type="button" value="{{ 'Common.no' | t }}">
  </div>
</div>
{% comment %} END POP-UPs {% endcomment %}

That’s all we need for multiple wishlist support.

Product list

Create a product grid, empty wishlist message, and loading message.

<div class="wawl-list">
<div class="wawl-list-inner" name="wawl-list" style="display: none;"></div>
</div>

<div name="wawl-empty" class="wawl-empty">
<p>{{ 'Common.empty' | t }}</p>
</div>

<div name="wawl-loading">
<p>{{ 'Common.loading' | t }}</p>
</div>

Also create the template that will be used for each product in the wishlist.

<template id="wawl-item-template">
  <div name="wawl-item" style="display: none;">
    <div class="wawl-item__img" name="wawl-item-link">
      <div name="wawl-item-remove">
        <span class="icon icon--remove">
          <svg
            class="icon"
            id="Capa_2"
            data-name="Capa 2"
            xmlns="http://www.w3.org/2000/svg"
            version="1.1"
            viewBox="0 0 24 22"
          >
            <defs>
              <style>
                .cls-1 {
                  fill: #1d1d1b;
                  stroke-width: 0px;
                }
              </style>
            </defs>
            <g id="Capa_1-2" data-name="Capa 1-2">
              <g id="icons">
                <path class="cls-1" d="M18.6,0C18.4,0,18.1,0,17.9,0,15.5,0,13.2,1.3,12,3.4,10.8,1.3,8.5,0,6.1,0s-.5,0-.7,0C3.7.2,2.2,1.1,1.2,2.6,0,4.2-.3,6.4.2,8.3c.3.9.8,1.8,1.5,2.6l9.9,10.9c.1.1.2.2.4.2s.3,0,.4-.2l9.9-10.9c.8-.8,1.3-1.7,1.5-2.6.5-1.9.2-4-.9-5.7-1-1.5-2.5-2.4-4.2-2.6Z"/>
              </g>
            </g>
          </svg>
        </span>

        <span class="icon icon--add">
          <svg class="icon" id="Capa_2" data-name="Capa 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 22">
            <defs>
              <style>
                .cls-1 {
                  fill: #1d1d1b;
                  stroke-width: 0px;
                }
              </style>
            </defs>
            <g id="Capa_1-2" data-name="Capa 1">
              <g id="icons">
                <path class="cls-1" d="M18.58.04c-.23-.02-.47-.04-.71-.04-2.42,0-4.64,1.3-5.88,3.38-1.24-2.08-3.45-3.38-5.88-3.38-.24,0-.48.01-.71.04C3.69.22,2.18,1.13,1.17,2.61.06,4.24-.29,6.37.24,8.28c.25.9.76,1.79,1.52,2.63l9.86,10.92c.1.11.23.17.37.17s.28-.06.37-.17l9.86-10.92c.76-.84,1.27-1.73,1.52-2.63.53-1.92.18-4.04-.93-5.67C21.82,1.13,20.31.22,18.58.04ZM22.79,8.02c-.21.76-.65,1.51-1.3,2.23l-9.49,10.51L2.51,10.25c-.65-.73-1.09-1.48-1.3-2.23-.45-1.64-.16-3.45.79-4.84.84-1.23,2.09-1.99,3.52-2.14.2-.02.4-.03.6-.03,2.36,0,4.48,1.45,5.42,3.68.15.37.77.37.92,0,.94-2.24,3.06-3.68,5.42-3.68.2,0,.4.01.6.03,1.43.15,2.68.91,3.52,2.14.95,1.39,1.24,3.2.79,4.84Z"/>
              </g>
            </g>
          </svg>
        </span>
      </div>

      <a class="link-img" name="wawl-item-link">
        <img name="wawl-item-img" width="100" height="100" loading="lazy">
      </a>
    </div>

    <div class="wawl-prod-info">
      <a class="link-title" name="wawl-item-link">
        <p name="wawl-item-title"></p>
        <p name="wawl-item-variant"></p>
        <p name="wawl-item-not-available" style="display: none;">{{ 'Common.not_available' | t }}</p>
      </a>

      <div class="wawl-price">
        <p class="wawl-compare-at-price" name="wawl-item-compare-price"></p>

        <p name="wawl-item-price"></p>
      </div>
    </div>

    <div name="wawl-add-cart" style="display:none;">
      <input class="wawl-btn" type="submit" value="{{ 'Common.add_to_cart' | t }}">
    </div>
  </div>
</template>

name=”wawl-item” – Required: The item container
name=”wawl-item-link” – Optional: Inserts the href anchor link to each child of this container
name=”wawl-item-remove” – Optional: Button to remove an item from the wishlist
name=”wawl-item-title” – Optional: Product title
name=”wawl-item-variant” – Optional: Variant title
name=”wawl-item-not-available” – Not available message
name=”wawl-price” – Optional: Used as price elements container
name=”wawl-item-compare-price” – Optional: Compare price, original price for discount products
name=”wawl-item-price” – Optional: Current product price
name=”wawl-add-cart” – Optional: button to add product to cart

Closing

Thank you for using our WA Wishlist app. We hope this guide has been helpful. If you have any questions or need further assistance, please don’t hesitate to contact our support team. Good luck with your Shopify store!

WA Wishlists