Theme Customization

Listify's storefront widget is built as a Shopify theme extension, making it easy to customize and integrate with any theme.

Adding Listify Blocks

Via Theme Editor

Go to Online Store > Themes in your Shopify admin
Click Customize on your active theme
Navigate to the page where you want to add Listify
Click Add block or Add section
Look for Listify blocks under Apps

Available Blocks

Gift Registry is an app embed rather than a section, and it is the one block that is not optional. Every other block on this list depends on the scripts it loads, so turn it on first: in the theme editor, open the App embeds panel in the left sidebar and switch it on.

Block	Type	What it does
Gift Registry	App embed	Required. Loads Listify and provides the registry and wishlist panel that opens over your storefront.
Gift Registry Page	Section	A full-page registry experience on a page template of its own. See Registry Page.
Registry Viewer	Section	Displays a single registry inline within one of your own pages.
Registry Button	Section	The Add to Registry button for product pages.
Wishlist Button	Section	The Add to Wishlist button for product pages (All plans).

Prefer to place the buttons in your theme's Liquid by hand? See Integration Guides.

Styling Options

Appearance is split across two places. The look of the registry and wishlist panel is set in the Listify app; the buttons you place in your theme are styled per block in the theme editor.

In the app: Registry Appearance

Go to Settings > Registry Appearance > Branding. A live preview sits beside the settings, running the real storefront widget. These settings are stored against your shop rather than your theme, so they follow you if you switch themes.

Primary colour and Accent colour — pick from the presets or enter your own hex. Each one expands into a full range of shades automatically, so you set two colours rather than twenty.
Style — Soft, Sharp, Bold, Playful or Minimal. This controls corner rounding and border thickness across the panel.
Font — either Match store theme, which picks up your storefront's body font at runtime, or System default. New stores start on System default, so switch it over if you want the panel to match your theme's type.
Cover image — the default image shown at the top of a registry. Around 800 x 300px works best.

The preview needs a desktop-width screen, and it cannot show your theme's font because your theme isn't loaded in the Shopify admin. Check the font on your live storefront.

In the theme editor: per-block settings

Each block you place carries its own settings. Between them they cover:

Registry Button and Wishlist Button — style (button or icon), background colour, text colour, corner radius, maximum width, top and bottom margin, and the button text.
Gift Registry (the app embed) — how the floating button appears (side badge, icon button, button or hidden), where it sits on screen, its distance from the screen edge and its text, plus which side the panel opens from. The button uses your Listify brand colour, with a text colour picked automatically for contrast, and sits above everything in your theme but below the registry panel. With the Icon Button style, on desktop the button widens on hover and keyboard focus to show its label: "Gift Registry", or your own text if you have set one.
Gift Registry Page — page background, hero image, hero background, hero width (full or contained), your own title and subtitle, and a Custom CSS field.

Block settings live in your theme, not in your Listify account. If you switch to a different theme, or duplicate one, you will need to set them again on the new theme.

What is not adjustable

So you do not go looking: there is no font family picker, no padding or spacing control, no shadow setting, and no background or text colour for the panel itself. The panel's surface is a fixed light neutral. If you need to go further than the settings above, the Custom CSS hook is the supported route.

CSS Isolation

Listify uses Shadow DOM to prevent CSS conflicts between the widget and your theme. This means:

Your theme's CSS won't affect the Listify widget by accident
The Listify widget's CSS won't leak into your theme
When the settings don't cover what you need, add your own rules through the dedicated hook — see Custom CSS

Responsive Design

All Listify blocks are mobile-responsive out of the box:

Desktop — Full-featured layout with grid views
Tablet — Adjusted grid columns and spacing
Mobile — Single-column stacked layout with touch-friendly targets

Troubleshooting

Verify the block is added in your theme editor
Check that the Listify app is installed and active
Try previewing in a different browser (check for ad blockers)

Styles not applying

Clear your browser cache
Verify color values are valid hex codes
Check the theme editor preview for real-time updates