Custom CSS

Listify renders inside a Shadow DOM, so your theme's stylesheet cannot reach it and Listify's cannot leak into your theme. Most looks are covered by settings — colours, corner radius, margins, icon size and background — and those are the right first stop. When you need something the settings don't offer, Listify gives you one CSS hook.

The hook: one style block in theme.liquid

Add exactly one <style data-listify-overrides> block to layout/theme.liquid, anywhere inside <head> or <body>:

<style data-listify-overrides>
  .listify-add-button { letter-spacing: 0.02em; }
</style>

Listify copies the block's CSS into every Listify component on the page, after its own styles, so a rule of yours at equal specificity wins. No !important needed. Edits made in the theme editor apply live.

Three rules keep it working:

One block, in theme.liquid. The CSS is global to every Listify element on the page. A block inside a product-card snippet is processed once per card, which on a large collection page means hundreds of times for no benefit.
Target the listify-* classes only. They are a stable API and the ones you need are listed below. Any other class you see in the inspector is internal and may change with any release.
Prefer a setting or variable where one exists. The --lx-* custom properties (colours, radius, margins) are set in your theme's own CSS per button and need no hook at all.

Where a button can come from

Registry and wishlist buttons reach your storefront in three ways, and each has its own settings and hooks.

1. Product page app block

Added in the theme editor (Registry Button / Wishlist Button under Apps). Its settings cover background and text colour, border radius, maximum width, top and bottom margin, button or icon style, and the label text. They are written as CSS variables scoped to that one block:

Variable	What it sets
`--lx-color-trigger-bg`	Button background (the icon pill's fill)
`--lx-color-trigger-text`	Button text and icon colour
`--lx-trigger-radius`	Corner radius (button style)
`--lx-trigger-margin-top` / `--lx-trigger-margin-bottom`	Outer spacing

Classes: listify-add-button (registry), listify-wishlist-button (wishlist), listify-add-button__label (the label track on the icon-style pill).

To scope a rule to app blocks only:

:host([data-style-id^="template--"]) .listify-add-button { width: 100%; }

2. Manual Liquid snippet

Generated in the app under Settings > Theme blocks & buttons and pasted into your theme — see Integration Guides. The colours, radius and style you chose in the generator are baked into the snippet as the same --lx-* variables, scoped to [data-style-id="{{ product.id }}-listify-snippet"] (registry) or {{ product.id }}-listify-wishlist (wishlist), so you can edit them directly in the snippet file. The classes are the same as the app block's.

To scope a rule to snippet-installed buttons only:

:host([data-style-id*="listify-snippet"]) .listify-add-button { height: 38px; }
:host([data-style-id$="-listify-wishlist"]) .listify-wishlist-button { opacity: 0.9; }

Snippets generated before August 2026 include an empty <style data-listify-overrides></style> line. Delete it: your CSS belongs in the single theme.liquid block, and a copy per product card only slows the page down.

3. Product card buttons

The Wishlist icon on cards and Registry button on cards app embeds place buttons on product cards automatically, across collection pages, search results and carousels. Their look is controlled in the theme editor: icon colour, background (with opacity), label size (registry), position and size per card layout, and which devices show them. These values are applied directly to the button, not through the --lx-* variables.

Classes: listify-card-icon on the injected container (plus listify-card-icon--wishlist or listify-card-icon--registry), listify-card-wishlist-button and listify-card-registry-button on the buttons themselves, and listify-add-button__label on the registry pill's label track.

These are deliberately different classes from the product-page buttons, so CSS you write for listify-add-button never changes every card, and the other way round.

/* Card pills only */
.listify-card-registry-button { box-shadow: 0 1px 3px rgb(0 0 0 / 0.2); }

/* Keep the registry pill permanently open on cards */
:host(.listify-card-icon--registry) .listify-add-button__label { grid-template-columns: 1fr; }

Beyond buttons

The same hook reaches the registry panel and every other Listify component, all of which carry listify-* classes of their own. If the class you need isn't there, contact support: adding a stable class is a small change, and we would rather do that than have your theme depend on an internal one.

When a rule doesn't apply

The block is in theme.liquid and the attribute is spelled data-listify-overrides.
The selector uses a listify-* class; internal classes are not stable and may not match.
For a per-surface rule, the :host(...) part matches that surface's data-style-id or class as shown above.
For colours, radius and margins, check the block's settings first: saving the block rewrites its variables.