Compatibility:

WebSite X5 Pro since version 2023.3

One of the most popular functions among modern online stores is the wishlist. As the name suggests, it's a virtual list of products users are interested in and may want to buy later.


To make it simple, this function places an "Add to wishlist" button next to the usual "Add to cart" one. By clicking on this button, the product in question is saved in the user's personal wishlist. Users will be able to access their wishlist page at any time to add or remove products, and proceed with the purchase as soon as they want to. 


Wishlists can therefore be useful for online store users for many different reasons, since they enable them to:

  • remember about the products that piqued their interest;
  • carefully plan their purchases over time;
  • easily buy the wished products, while at the same time taking informed purchasing decisions.


Now that you know what a wishlist and its purpose is, let's see how to make it available on your online store. In this guide, we will look at:


#tip - Users don't necessarily have to be logged in to use the Wishlist: in this case, the selected products are locally stored in the browsing session. If users, on the other hand, are logged in, the data related to their Wishlist are saved on their profile: they will then be able to find them even by logging in on a different device. To enable the user registration on your store, see: How to set up customer registration in your online store


How to activate the Wishlist

As you know, the first step to build an e-commerce is to set up the product catalog.


Once you've done this, you have to decide how to present them and, according to your goals and the time you have available, you can choose to use the Product Catalog Object or the Product Search page (for more information, see: How to present the products of your catalog).


Both the Product Catalog Object and the Product Search page present the products using cards or possibly complete Product Sheets. Both are automatically generated by taking up the information available for each product, but you can still work on their layout and graphic style.


Actually, working on the cards and or Product Sheets, you can decide to activate the Wishlist for your e-commerce:

  • Access the settings window:
    • in case you are using the Product Catalog Object: double-click on the Object you just added on the page to open it and access the Settings section;
    •  in case you are using the Product Search Page: go to Step 3 - Sitemap, select E-commerce: Search page, click on Edit and access the Settings section;
    • in case you use the Product Sheet Page: go to Step 3- Sitemap, select E-Commerce: Product Sheet Page, click on Edit and stay in the General section.
  • In any case, use the drop-down menu in the Visible Elements section to select the Wishlist: you will be presented with some options.
  • Select the Visible option to activate it: in this way, the "Add to Wishlist" button will be available next to the "Add to Cart" one.
  • The symbol for the "Add to Wishlist" button is a heart-shaped icon:  define the Color for both the whole heart (active state) and for its border (inactive status).
  • Finally, activate the Add the Product without showing the Wishlist option if you want the customer to add the product to the Wishlist without being redirected to it.


How to define the style for your Wishlist page

When you activate the Wishlist button, WebSite X5 generated the Wishlist page. This will be the page users will find the selected Products on after they added them to the Wishlist using the specific button, and here they will be able to remove them or proceed with the purchase.


The Wishlist page is listed among the other Sitemap Special Pages. It reports a brief introductory text and the list of products that have been added to the wishlist. Each product is displayed with a card that, as always, can be customized:

  • Go to Step 3 - Sitemap, select the E-Commerce: Wishlist special page and click on Edit.
  • First, choose the layout you prefer. For instance, if you select Cover on the left, title and contents on the right, every product card will display the cover image on the left and all the other details on the right. 
  • Use the options available for indicating how many cards must be shown per row, their height, the size of the cover picture and the inner margins.
  • Indicate which items in the cards must be displayed, and their graphic settings (font, color, borders and margins). The elements you can work on are:
    • card background;
    • cover;
    • product name;
    • description;
    • details (like category, amount, availability, price, etc.);
    • "Add to cart" button
    • "Remove from Wishlist" button.
  • Decide if you want to complete the cards with ribbons that highlight the new products or the discounted ones.
  • Finally, if you want to, you can give your users to access the Product Sheet page by clicking on the card image or title. Make sure you have correctly activated the generation of Product Sheets for all your products (see: What's the product page and how to use it), then disable the Enable ShowBox Link over Image option. If this option is still active, the link to the Product Sheet will only be available by clicking on the card title, while a click on the card image will open a ShowBox to display the images you selected for the product.

  

#tip - If you want to, you can edit the Wishlist page introductory text. For more information, see: How to translate text that is entered automatically. The specific Content ID in this case is: 'wishlist_description'. You can find the contents you want to edit by using the search field.


For your customers to be able to access the Wishlist page and see the products they've added, you need to set up the necessary links to this page. You can, for instance, add a textual list or a button on the website header, so to make it always available.


You can set up this link in two different ways.


1st Method:

  • Go to Step 3 -Sitemap, select the E-Commerce: Wishlist page you find among the other Special Pages and drag it upwards in the Menu section. 
  • An Alias of the original page will be generated: rename it and move it so to place it in the most convenient position of the navigation menu according to your needs. The Alias will automatically keep the link to the Wishlist page.

2nd Method:

  • Select the element you want to work on: a text, an image or a menu Level
  • Click on the  button to add a link.
  • In the Link window, select the Website Page option: click on to access the sitemap and select the E-commerce: Wishlist page available among the other Special Pages.