Customization

The storefront components render inside Shadow DOM, so theme CSS can't break them by accident. You can still style them in five ways, from simplest to most control.

CSS variables

Custom properties pass through the shadow boundary. Set them on :root or on any container.

:root {
  --wl-accent: #e11d48;
  --wl-radius: 999px;
}

Variable	What it changes
`--wl-accent`	Main color for icons, buttons and badges
`--wl-radius`	Corner radius of buttons and the drawer
`--wl-size`	Size of icon buttons (32px, 40px or 48px for the small, medium and large settings)

Fonts and text color are inherited from your theme.

Parts and state attributes

Each component exposes named parts that you can style with ::part(). The host element carries state attributes.

wl-button[active]::part(icon) {
  fill: #e11d48;
}
wl-button[loading]::part(button) {
  opacity: 0.6;
}
wl-count:not([active])::part(count) {
  display: none;
}

Element	Parts
`wl-button`, `wl-card-button`	`button`, `icon`, `label`, `count`
`wl-count`, `wl-launcher`	`button`, `icon`, `count`
`wl-toast`	`toasts`, `toast`, `toast-action`
`wl-drawer`	`overlay`, `panel`, plus the list parts below
`wl-drawer`, `wl-page` (list)	`list`, `title`, `items`, `item`, `item-title`, `price`, `add-to-cart`, `remove`, `empty`

State attributes: active (the product is saved), loading (a request is in flight) and disabled. These names, the part names and the class names are a public contract and stay stable across versions.

Custom CSS in the app

Under Appearance → Advanced → Custom CSS, add CSS that is loaded inside every component's shadow root. It can target internal classes directly.

.wl-label {
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

Slots

Replace the icon or the label with your own markup.

<wl-button>
  <svg slot="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
  <span slot="label">Save for later</span>
</wl-button>

Headless buttons

Use your theme's own markup and skip the components entirely. The app handles clicks and keeps the state in sync.

<button type="button" data-wishlist-toggle="{{ product.id }}">
  Save
</button>

When the product is in the wishlist, the app sets data-wishlist-active on the element so you can style it:

[data-wishlist-toggle][data-wishlist-active] {
  color: #e11d48;
}

Add data-wishlist-variant="{{ variant.id }}" next to data-wishlist-toggle to save a specific variant.

Selectors

The app recognizes many popular themes and fills in their selectors for you; Appearance → Advanced shows the theme it detected. If your theme uses non-standard markup, set the selectors the app uses to find product cards, images, prices and the add-to-cart button under Appearance → Advanced. Selectors you change there override the detected ones, and Reset goes back to them. Header icon position picks where the wishlist count goes next to the header selector.