Merchant documentation

Custom CSS

Wishlist Zero renders the product save button as a Web Component with a Shadow DOM. Your theme's CSS cannot reach inside it, so use the Custom CSS field in the Wishlist Zero settings to style the component.

The CSS you add there is scoped to the button and does not affect the rest of your storefront.

Available selectors

Selector	Targets
`:host`	The Wishlist Zero button component itself. Use it for placement, width, and component-level custom properties.
`.wrap`	The wrapper around the button and its confirmation message.
`button`	The product save button.
`.icon`	The heart, star, or bookmark icon inside the button.
`.label`	The `Save` or `Saved` button text.
`.notice`	The confirmation message displayed after a product is saved.
`.notice a`	The View wishlist link in the confirmation message.
`.setup-notice`	The setup message shown in the Theme Editor when the block needs configuration.

Examples

Create a pill-shaped button

button {
  background: #0f172a;
  border: 1px solid #0f172a;
  border-radius: 999px;
  color: #ffffff;
  padding: 0.8rem 1.25rem;
}

button:hover {
  background: #10b981;
  border-color: #10b981;
}

Change the icon and label spacing

.icon {
  height: 1.25rem;
  width: 1.25rem;
}

.label {
  margin-inline-start: 0.5rem;
  font-weight: 600;
}

Style the saved confirmation

.notice {
  background: #ecfdf5;
  border-radius: 0.5rem;
  color: #065f46;
  margin-top: 0.75rem;
  padding: 0.75rem;
}

.notice a {
  color: inherit;
  font-weight: 700;
}

Make the button span its container

:host {
  display: block;
  width: 100%;
}

button {
  justify-content: center;
  width: 100%;
}

Tips

Start with the smallest selector that targets what you want to change.
Use :host when you need to control the component's placement or width in your product layout.
Preview changes in the Theme Editor before publishing them to your storefront.
Custom CSS is for the product save button. It does not style the wishlist drawer.