Skip to main content

Wishlist header button

The Wishlist header button adds a wishlist entry point to your store header so shoppers can open their saved products from anywhere on the storefront.

Open Display > Widgets > Wishlist header button to manage header placement, icon appearance, and badge count.

Automatic header placement​

Enable Auto show on header to let TValue: Wishlist place the header button automatically.

Header placement depends on your theme structure. If the current theme is not supported yet, the app shows a warning banner in this section.

This does not mean the header button feature is broken. TValue records the theme and starts preparing support. You can also use Chat with us from the banner if you want to contact us directly.

Icon settings​

Use Icon settings to match the header wishlist icon with your theme header.

You can configure:

  • Icon color
  • Icon size
  • Icon stroke width

Badge count​

The header button can show a badge count so shoppers know how many items are saved.

You can configure:

  • Show badge count
  • Hide badge when count is 0
  • Text color
  • Background color
  • Offset right
  • Offset bottom

Use the offset settings when the badge needs a small position adjustment around the heart icon.

Custom placement​

Use Custom placement only when the automatic header placement does not cover the exact header location you need.

Header custom placement rules can configure:

  • Enable: turns a custom rule on or off.
  • Inject target: the header element where the wishlist icon should be inserted.
  • Icon injection position: places the icon inside, before, after, or at a child index inside the target.
  • Custom CSS: adds CSS for this placement rule when needed.

Most merchants should wait for theme support instead of configuring custom placement manually.

For detailed steps, see Custom placement.