What does the Wishlist Header Icon block do?

The Wishlist Header Icon block adds a wishlist icon to your store header. Shoppers click it to open the wishlist. This page documents every setting in the block and what each one changes.

How the block works

The block renders a link with the #hero-wishlist anchor and the accessible label “Open Wishlist”. The anchor opens the wishlist popup or page, depending on your display mode: Wishlist display modes
You pick the icon style, heart, star, or bookmark, in the app admin settings, not in this block
The block renders only when the header icon is enabled in the app admin settings
The app detects your theme and applies matching container classes and icon sizes from a built-in preset table, so the icon lines up with the icons around it

Settings reference

Setting	Setting ID	Type	Default
Theme styling preset	`customThemeName`	Select	Auto Detected / default
Use Custom icon color	`useCustomHeaderColor`	Checkbox	Off
Custom icon color	`customHeaderColor`	Color	Empty
Use Custom icon size	`useCustomHeaderSize`	Checkbox	Off
Custom icon size	`customHeaderIconSize`	Range, 10 to 40 px	22
Additional Icon CSS Class	`additionalIconCssClassNames`	Text	Empty
Additional Icon Style	`additionalIconStyle`	Text	Empty
Additional Icon Container CSS Class	`additionalContainerClasses`	Text	Empty
Additional Icon Container Style	`additionalContainerStyle`	Text	Empty
Use only CSS classes above	`replaceExistingClasses`	Checkbox	Off

Theme styling preset

Overrides the detected theme name this block uses to pick its container classes and default icon sizes. The setting is separate from the App Configuration preset and affects this block only.

Use Custom icon color

Shows the Custom icon color picker below it. Leave it off unless the icon doesn’t match your header, because the icon inherits your theme’s color by default.

Custom icon color

Applied as the fill of the icon’s SVG (Scalable Vector Graphics) markup. Only visible when Use Custom icon color is on.

Use Custom icon size

Shows the Custom icon size slider below it.

Custom icon size

Applied as font-size with !important on the icon, so the glyph scales past the theme default. The range runs from 10 to 40 px in steps of 1, with 22 px as the default. Only visible when Use Custom icon size is on.

Additional Icon CSS Class

Class names added to the icon’s <svg> element. Use them to target the icon from your own CSS.

Additional Icon Style

Inline styles added to the icon’s <svg> element, for example margin-top: 2px .

Additional Icon Container CSS Class

Class names added to the link that wraps the icon. Add your theme’s header icon classes here so spacing, hover states, and focus styles match the icons around it.

Additional Icon Container Style

Inline styles added to the wrapper link, next to the class names above.

Use only CSS classes above

When on, the container drops the auto-detected theme classes and keeps only wishlist-hero-header-icon plus the classes you added. Use it when the detected classes conflict with your theme’s layout.