Wishlist: Configuring Style Settings – SHOPLINE Help Center

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.

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 configure how the Wishlist is displayed on the product detail page, including the icon style, button color, button text, and display position.

Note: Supported settings may vary slightly depending on your store’s theme version. Please configure the settings based on the theme version you are currently using.

Applicable to OS 2.1 and Earlier Themes

Button icon style: The system provides three icon styles to choose from.
Button color: You can separately set the button color before and after a customer adds a product to the Wishlist.
Display button text: When selected, the button text set below will be displayed next to the icon. If not selected, only the Wishlist icon will be shown.
Display number of users who added to Wishlist: When selected, the number of users who have added the product to their Wishlist will be displayed.
Display position on desktop: The position where customers see the button on desktop. You can choose between Below the add-to-cart button and On top of the product image.
Display position on mobile: The position where customers see the button on mobile devices. You can choose between Below the add-to-cart button and On top of the product image.

Note: If the PC or mobile display position is set to On top of the product image, the button text cannot be displayed.

Applicable to OS 3.0 Themes

The available settings are generally the same as those for OS 2.1 and earlier themes. However, OS 3.0 themes provide more flexible customization options for the button display position. See the details below:

Button icon style: The system provides three icon styles to choose from.
Button color: You can separately set the button color before and after a customer adds a product to the Wishlist.
Display button text: When selected, the button text set below will be displayed next to the icon. If not selected, only the Wishlist icon will be shown.
Display number of users who added to Wishlist: When selected, the number of users who have added the product to their Wishlist will be displayed.

Display settings: Under Display settings > Mode, you can choose one of the following options:

Note: The system automatically detects the theme version. This option is only available when using an OS 3.0 theme. If you are not using an OS 3.0 theme, you can only set the PC / mobile display position.

Automatic: The Wishlist will be displayed on the product detail page based on the app’s default rules, with no additional setup required.

Note: If the PC or mobile display position is set to On top of the product image, the button text cannot be displayed.
- Display position on desktop: The position where customers see the button on desktop. You can choose between Below the add-to-cart button and On top of the product image.
- Display position on mobile: The position where customers see the button on mobile devices. You can choose between Below the add-to-cart button and On top of the product image.

Custom: When selected, you must go to the Theme editor and manually add the Add wishlist button App Block to the Product detail page to customize the Wishlist’s position and layout.

Note: If you select Custom but do not add the corresponding App Block in the theme editor, the Wishlist feature will not display properly.

Recommended Custom Display Positions for OS 3.0 Themes

When you select Custom in the app, you can flexibly place the Wishlist button in different locations on the product detail page using the OS 3.0 theme editor. Below are three common and recommended display methods with setup instructions.

Display Above the Product Image Layer

In the theme editor, go to the product detail page and navigate to Product > Product media files > Product file overlay, then add the Add wishlist button App Block.
Click the added Add wishlist button App Block to choose how the button appears on the product image, including Button style or Icon style.

Display Below the Purchase Button

In the theme editor, go to the product detail page and navigate to Product > Product information.
Hover below the Purchase button component, click the ＋ icon, select Apps, then find and add the Add wishlist button App Block.

Display Next to the Product Title or Price

As the theme editor currently does not support side-by-side layouts for components, you need to use the Content container component to place the title or price next to the Wishlist button. Follow these steps:

Note: The OS 3.0 Bottle theme does not currently support the Content container component. As a result, side-by-side layouts cannot be implemented using a content container. For more information about how to use the Content container, refer to "Enabling Flexible Horizontal Layouts within the Product Detail Page."

In the theme editor, go to the product detail page and navigate to Product > Product information. Hover over the component, click the ＋ icon, and select Theme > Content containers.
Under the Content container, click ＋ Add content, select Theme, and add either the Title or Price component as needed.
Hover over the Content container again, click the ＋ icon, select Apps, then find and add the Add wishlist button App Block. You will now have a combined container that includes the Title + Wishlist button or the Price + Wishlist button.
Click the Content container and configure the Layout direction in the settings panel. Select a horizontal layout to display the components side by side. You can also adjust alignment, spacing, and other style settings as needed.

Note: If you have already added the Title or Price component separately in the Product information section and also added the same component inside a Content container, make sure to remove or hide the standalone component to avoid duplicate titles or prices on the page.

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.

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