Commmerce Docs
← Web Components

Web Components · Header

<mmm-header-wishlist>

A wishlist icon link in the header. Visually mirrors <mmm-header-cart> but without a live count badge — it's a simple navigation anchor to the wishlist page.

Overview

A theme-aware anchor button. Renders as a circular icon by default, or as an icon+label pair when label is provided. Hover styling pulls from CommmerceThemeSettings.themeColour.button.

When to use

  • Inside <mmm-header> alongside cart and account icons.
  • For stores that expose a wishlist feature.
  • Pair with hide-on-mobile to keep mobile headers minimal.

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<mmm-header-wishlist href="/wishlist"></mmm-header-wishlist>

Attributes

AttributeTypeDefaultDescription
iconstringsample-store / heart iconIcon image URL.
icon-widthnumber17Icon width (px).
icon-heightnumber17Icon height (px).
button-sizenumber38Width & height of the round button (px).
border-colorstringtheme / #e5e7ebBorder around the icon button.
background-colorstring#fffBackground colour of the icon button.
hover-background-colorstringtheme / #333Background on hover.
hover-border-colorstringtheme / #e5e7ebBorder colour on hover.
hrefstring/wishlistAnchor href the icon wraps.
targetstring_selfAnchor target.
hide-on-mobilebooleanfalseHide the wishlist icon below 1032px viewport width.
show-circular-backgroundbooleantrueShow the round button background; set false for a flat icon.
show-iconbooleantrueWhether the icon image renders.
labelstring—Optional label text rendered next to the icon.
label-colorstring#111111Label text colour.
label-font-sizestring0.75remLabel font size.
label-font-weightstring600Label font weight.
label-letter-spacingstring0.18emLabel letter-spacing.

Events

No custom events. The element is a plain anchor — clicks navigate via href.

Live preview

store sample-store tag <mmm-header-wishlist>

Examples

1. Default circular icon

<mmm-header-wishlist href="/wishlist"></mmm-header-wishlist>

2. Hidden on mobile

<mmm-header-wishlist
  href="/wishlist"
  hide-on-mobile="true"></mmm-header-wishlist>

3. Flat icon + label

<mmm-header-wishlist
  href="/wishlist"
  show-circular-background="false"
  label="Saved"
  label-color="#fff"></mmm-header-wishlist>