Change the wishlist icon

Change the icon used by Wysh

You can change the icon Wysh uses across your storefront from the Shopify theme editor. This setting is found in the Wysh Wishlist app embed, inside the Header/floating wishlist badge section.

The Wishlist icon setting controls the icon shown wherever the Wysh icon appears, including the header badge or floating badge depending on how your store is configured.

Open the Wishlist icon setting

In Shopify admin, go to Online Store.

On your theme, click Edit Theme.

In the theme editor, click the App embeds icon in the top-left corner.

Find Wysh Wishlist and expand it to open its settings.

Scroll to the Header/floating wishlist badge section. Find the Wishlist icon dropdown.

Select the icon style you want to use: Heart, Star, Bookmark, Gift, or Custom.

Click Save in the theme editor. The selected icon will then be used wherever the Wysh icon appears on your storefront.

Wysh Wishlist app embed showing the Wishlist icon dropdown set to Heart

Available icon options

The Wishlist icon dropdown includes five options:

  • Heart

  • Star

  • Bookmark

  • Gift

  • Custom

If you choose Heart, Star, Bookmark, or Gift, Wysh updates the icon automatically everywhere that icon is displayed in your theme.

Use a custom icon

If you want to use your own design instead of one of the built-in icon styles, choose Custom in the Wishlist icon dropdown.

When Custom is selected, two extra upload fields appear:

  • Empty icon

  • Filled icon

Upload both versions, then save the theme editor. Once saved, your custom icon will appear wherever the Wysh icon is used on your storefront.

Wysh Wishlist app embed showing Custom selected with Empty icon and Filled icon upload fields

To use Custom, upload both an Empty icon and a Filled icon. If one is missing, Wysh falls back to the default heart icon.

When this change applies

The icon choice applies at the theme level in the Shopify theme editor. After saving, the new icon is used wherever the Wysh icon appears in that theme.

What to check after saving

  • The new icon appears in the expected places on your storefront.

  • Your custom uploads, if used, display correctly in both empty and filled states.

  • The icon is clear and readable on both desktop and mobile.

If you are using a custom icon, use simple artwork with a transparent background so it fits neatly across different parts of your theme.