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.

/* 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; }
}

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:

// 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 for the events and functions you can use.

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.