> ## Documentation Index
> Fetch the complete documentation index at: https://codebeans-wishlyst.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom CSS & JavaScript

> Add your own CSS and JavaScript to the storefront wishlist without editing the theme.

**Where:** **Wishlist Settings → Custom Code**

Use this page for small adjustments that settings cannot make: hiding an element, changing a font, moving a button on one template.

## Custom CSS

Your CSS is inserted into a `<style id="cb-wishlist-custom-css">` tag on every page where the wishlist loads.

```css theme={null}
/* Round the product-page button and give it more space */
.cb-wishlist-btn {
  border-radius: 999px !important;
  margin-top: 12px;
}

/* Hide the floating button on mobile */
@media (max-width: 749px) {
  #cb-floating-wishlist { display: none !important; }
}
```

> [!TIP]
>
> The app injects its own styles after yours, so you may need `!important` to win.

## Custom JavaScript

Your script runs once per page, after the wishlist settings load, so `window.widgetSettings` is available. The wishlist builds parts of the page after that, so wait for the elements you need:

```js theme={null}
// Add a tracking call whenever a wishlist changes
document.addEventListener('cb:wishlists-changed', function (e) {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({ event: 'wishlist_change', source: e.detail.source });
});

// Wait for the floating button before changing it
new MutationObserver(function (_, observer) {
  var btn = document.getElementById('cb-floating-wishlist');
  if (btn) {
    btn.setAttribute('aria-label', 'Open my wishlist');
    observer.disconnect();
  }
}).observe(document.body, { childList: true, subtree: true });
```

See [JavaScript API & events](https://codebeans-wishlyst.mintlify.site/developers/javascript-api.md) for the events and functions you can use.

> [!WARNING]
>
> Custom JavaScript runs on your live storefront, outside any sandbox, and can read the logged-in customer's details. Only paste code you trust, and test on a development theme first.

## Limits

Each field holds up to 20,000 characters.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.