Product Wishlist

Our built-in Product Wishlist extension is designed to provide a seamless wishlist experience without relying on third-party apps.

Available on:

• Single Product Page
• Product Grid & Collection Product Elements

With EComposer Wishlist, customers can:

• Log in to add products to their wishlist
• Save their wishlist without registration or login

Notice: You can use this extension on EComposer Pro and Premium plans. Upgrade now to unlock

1. How to install the Product Wishlist extension?

Step 1: From your EComposer dashboard, go to CRO Extensions from the left sidebar menu.
Step 2: Search for the Product Wishlist extension.
Step 3: Click Details and install the extension on your store.

This function requires your Customer’s information. Kindly click the Update button to agree that you share with us Customer Information.

2. Config extension settings

Wishlist Page Settings: Customize the appearance and layout of your Wishlist page with the following options

• Items per Row: Set the number of products displayed per row.
• Column Gap: Adjust the spacing between product columns.
• Row Gap: Adjust the spacing between product rows.
• Page Heading/Product Title/Product Price/Compare-at Price/Add to Cart Button: Mainly, these settings allow you to customize their appearance, including Typography, Color, and other design options.

Content: Provides fields to enter and customize the content that will be displayed in the Wishlist.

• There are two tabs Products and Empty at the bottom-right. These tabs let you switch between the two states to preview the configure the Wishlist design when it contains products and when the Wishlist is empty.

• You can edit the text for Add to Cart, View More, Sold Out, and Remove Product directly in the corresponding fields.

• You also can edit the Title, Description, and Shop Now button text when the Wishlist is empty.

3. How to use the Product Wishlist extension

3.1. How to add the Product Wishlist extension to your Product template

Inside the EComposer editor, open the Extensions tab from the left sidebar, then find the Product Wishlist extension from the installed extensions list and drag it into your desired position on the Product template.

Normally, you should add it to the Product detail section. After adding it successfully, you can start customizing the extension settings and style.

• Content: Customize the wishlist button’s text and appearance in its Normal (before clicking) and Added to Wishlist (after clicking) states.
  • Label: Set the button text for each state, such as “Add to Wishlist” and “Added to Wishlist.”
  • Icon: Choose an icon to display on the button.
  • Tooltip content: Add a helpful hint, such as “Add this item to your wishlist.”

• Design: Customize the appearance of the Wishlist button, icon, and tooltip using the following settings:
  • Tooltip: Customize the tooltip’s font styles, width, and height for the Normal and Hover states. The tooltip displays helpful text when customers hover over the Wishlist button.
  • Button: Customize the icon’s color, size, and alignment, as well as the text typography. Adjust the button’s width and height for the Normal, Hover, and Active states.

3.2. How to add the Product Wishlist extension to your Collection template

The Collection Product element supports the Wishlist icon through the Wishlist Button option. To enable it:

Step 1: Content setting
Step 2: Wishlist button tab
Step 3: Tick on the Use Wishlist extension by EComposer option

• Visibility: Controls when the Wishlist button is displayed on collection product elements.
  • Always: The Wishlist button is always visible.
  • When Hover: The button appears when customers hover over the product.
  • When Hover and When Active: The button appears when customers hover over the product or when it is active (selected/added to the wishlist).
• Label: Set the button text for each state, such as “Add to Wishlist” and “Added to Wishlist.”
• Icon: Choose an icon to display on the button.
• Tooltip content: Add a helpful hint, such as “Add this item to your wishlist.”

• Horizontal Align: Set the Wishlist button’s horizontal position within the product element.
• Vertical Align: Set the Wishlist button’s vertical position within the product element.
• Hide Wishlist Button on Mobile: Enable this option to hide the Wishlist button on mobile devices.

To customize the Wishlist button, go to the Design tab. You can adjust the icon’s color and size, customize the Typography for the Wishlist text, and set the Width and Height for the Normal, Hover, and Active states.

4. How to set up the appearance of the Wishlist’s details page?

4.1. Set up the detail page when not logging in

Under the Settings tab, open General -> Access permission -> Guest

Now you go back to a Product page to see how this Wishlist button works without registration. Or you can access this page via this default URL:

your_store_domain/apps/ecomposer-visual-page-builder/wishlist

4.2 Set up the detail page when login is required

Under the Settings tab, open General -> Access permission -> Login require

After clicking to the Wishlist buttot, you’re mandatorily redirected to the Login page. Or you can access this page via this default URL:

your_store_domain/account/login