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 two 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:

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.

The floating button

The floating Gift Registry button comes from the app embed, under App embeds > Gift Registry > Floating Button in the theme editor. Its settings cover style, alignment, screen offset and the label text. Two CSS variables position it, and your theme's own CSS can change them, per breakpoint if you need to, with no hook at all:

Set them on body, not :root. Listify writes its own :root offset after your theme's stylesheet, so a :root offset of yours loses; one on body wins wherever it is written.

To tuck the button under a mobile menu that sits at z-index: 100, on phones only:

@media (max-width: 749px) {
  body { --lx-trigger-z: 90; }
}

To move it further from the screen edge:

body { --lx-trigger-offset: 24px; }

A CSS offset moves the button only. The small chip that brings back a dismissed cart bar sits in the same corner and keeps following the Screen offset setting.

Classes: listify-registry-trigger (the button, in every style), listify-registry-trigger__label (the label track on the Icon Button style, which opens on hover and keyboard focus). These go in the hook, like any other class.

To keep the Icon Button's label permanently open:

.listify-registry-trigger__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.