Skip to main content

Wishlist button styles

Wishlist button styles are shared presets used by wishlist buttons across your storefront.

Open Display > Widgets > Wishlist button styles to edit Style 1, Style 2, Style 3, and Style 4.

Each style can be selected by product page buttons, collection buttons, and custom placement rules.

How styles are used​

Button styles do not place wishlist buttons by themselves. They only control how a selected wishlist button looks.

You can choose a style from:

  • Auto show wishlist button > Product page > Button style
  • Auto show wishlist button > Collection > Button style
  • Auto show wishlist button > Custom placement > Button style

If multiple placements use the same style, editing that style updates all of those buttons.

Style presets​

TValue: Wishlist includes four reusable button style presets. Each preset is one complete set of button settings, including icon, layout, text, border, and tooltip options.

Most stores only need two presets:

  • One preset for the product page wishlist button.
  • One preset for collection page wishlist buttons.

The other presets are useful when a specific placement needs a different visual treatment. For example, you may use a separate preset for a featured product section, quick view, search results, recommendation products, or a custom placement rule in a special collection layout.

This keeps the common buttons consistent while still giving you extra styles for special areas.

Icon settings​

Use Icon settings to control the heart icon inside the button.

You can configure:

  • Show icon: shows or hides the wishlist icon.
  • Icon color: changes the icon color.
  • Icon size: changes the icon size.

Button layout​

Use Button layout settings to control the button container.

You can configure:

  • Background color: changes the button background.
  • Full width: makes the button fill the available width.
  • Height: changes the button height.

Full-width buttons are usually better for product pages. Compact buttons are usually better for collection cards and product grids.

Text settings​

Use Text settings when the button should include visible text such as "Add to wishlist".

You can configure:

  • Show text: shows or hides button text.
  • Text color: changes the text color.
  • Font size: changes the text size.

The button text itself is managed from Display > Translation, not from button styles.

Border settings​

Use Border settings to match the button with your theme.

You can configure:

  • Border radius: controls how rounded the button is.
  • Border width: controls the border thickness.
  • Border color: changes the border color.

Tooltip settings​

Use Tooltip settings to show helper text when shoppers hover over an icon-only wishlist button.

You can configure:

  • Show tooltip on hover
  • Tooltip type: Browser default or Custom tooltip
  • Position: Left, Center, or Right
  • Text color
  • Background color
  • Font size
  • Height
  • Border radius

If you choose Browser default, the browser controls the tooltip appearance and the custom tooltip design settings are disabled.

Start by choosing the preset that is closest to your theme, then adjust only what is needed.

For most stores:

  • Use icon-only styles for collection cards.
  • Use a text button for product pages.
  • Keep tooltip enabled when the button has no visible text.
  • Test the style on desktop and mobile after saving.