• Topic 主题 トピック Topic Topic
  • Sign in

Wishlist: Style Settings

 

In the Wishlist app, you can customize the appearance of the Wishlist button for great display effect in your online store. This article will walk you through this app and its settings.

 

In This Article

 


 

Customizing the Appearance of the Wishlist

Go to Wishlist > Style settings > Wishlist.
1-1 Wishlist Style Settings.png

 

Navigation Bar Display

You can customize the style of the wishlist icon that will be displayed in the navigation bar. The following settings are available:

  • Icon style: There are three icon styles to choose from.
  • Display icon name: If checked, the name information will be displayed next to the wishlist icon.
  • Name display position: You can choose to display the name on the right side or below the icon.
  • Display total number of products in the wish list: If checked, the total number of products in the wishlist will be displayed next to the wishlist icon.
Note: If the navigation bar is already crowded with other menu items, pay attention to the potential overlap between the menu and the icon. 

 

1-2 navi bar.png

 

 

Product List Display

You can customize the icon’s style, color, and position that will be displayed on the product list. The following settings are available:

  • Show wishlist button: If disabled, the wishlist icon will not be displayed on the product list page.
  • Icon style: There are three icon styles to choose from.
  • Icon color: Set the color of the icon before and after a customer adds a product to their wishlist.
  • Display position: Click to switch the display position where the icon will be overlaid on the product images (upper left, lower left, upper right, lower right) in the product list.
Note: This display only takes effect in the product list created in your admin panel. If the product list is generated by a third-party app (such as the Product Recommendation app), the wishlist button will not be displayed.

 

1-3 product list.png

 

 

Product Page Display 

You can customize the icon’s style, button color, and button text that will be displayed on the product details page. The following settings are available:

  • Icon style: There are three icon styles to choose from.
  • Button color: Set the color of the button before and after a customer adds the product to their wishlist.
  • Show button text: If unchecked, only the icon for the wishlist will be displayed.
  • Display a count of how many users have added this product to their wishlist: If unchecked, the number of users who added this product to their wishlist won’t be shown.
  • Display position on desktop: The button style that customers see when viewing the product detail page on a desktop.
  • Display position on mobile: The button style that customers see when viewing the product details page on a mobile device.
Note: If the display position for desktop and mobile is set to On top of the product image, the button text won’t be displayed.

 

1-4 product page.png

 

 

 Wishlist display

You can customize the quick view button and its text that will be displayed within the wishlist of your customers. The following settings are available:

  • Quick view: When enabled, your customers can quickly view product details and make a direct purchase from their wishlist. Note that this feature may not be supported in certain themes such as Seed, Charm, and Modern.
  • Quick view button text: The text displayed on the quick view button for your customers.

1-6 Wishlist.png

 


 

Sharing Wishlists

Go to Wishlist > Settings > Share settings.
2-1 share settings.png

 

You can choose to let customers share their wishlist via Facebook, X, or email.
2-2 platforms.png


 

Once set up, customers can share their wishlist using these channels when they view their wishlist.
2-3 storefront.png


 

Important: When designing your store, please do not delete the Wishlist (DO NOT DELETE) page (customers see “Wishlist” on the storefront). Otherwise, customers won’t be able to use the Wishlist feature properly, and the page can’t be restored after deletion.
2-4 do not delete.png

Have more questions? Submit a request

Comments