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

1. Go to Online Store > Themes in your Shopify admin
2. Click Customize on your active theme
3. Navigate to the page where you want to add Listify
4. Click Add block or Add section
5. 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.

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 > Registry Modal. The page has two parts: a preview of the registry drawer on a sample store, and the settings rail beside it (below it on narrower screens). These settings are stored against your shop rather than your theme, so they follow you if you switch themes. Nothing reaches your storefront until you save.

The preview. It runs the real storefront widget, and every change in the rail shows in it as you make it. The bar above it holds:

• Page selector — show the drawer over a sample Homepage, Product page or Collection page.
• Mobile, Desktop and Full width — the device to preview on. Full width widens the preview over the settings navigation, and is only offered on wide screens.
• Zoom — on Desktop and Full width, zoom out, back to the default (click the percentage) or in. Pinching on a trackpad, or scrolling with Ctrl held, zooms too.
• Screens — jump the preview to any screen of the widget (Home, Create, Manage, Sign in, Shop, Wishlist and the steps inside them) instead of clicking through it.
• More actions (…) — View opens your storefront in a new tab with the registry drawer open, showing your saved design on the theme you have selected in the app. If that theme's Listify app embed is not switched on, or the app has not checked the theme yet, it opens the app's own registry page instead. While you have unsaved changes the item reads Preview instead: it opens your storefront with the registry drawer open, showing your unsaved design. The preview lasts for that one page (reloading it shows your saved design) and its link expires after 30 minutes. Nothing is saved, and a Preview label at the top of the drawer marks it. It needs the Listify app embed switched on in the selected theme; if it is off, use Turn on the app embed in the same menu. Save when you are happy to make the changes live. The same menu links to this page, lists the keyboard shortcuts and opens support.

The settings, in the order the rail shows them:

• Cover image — the default image at the top of the registry drawer and behind the registry section's hero. PNG or JPG; 1920 × 720 pixels is recommended, with the subject kept centred.
• Slide-in side — whether the drawer slides in from the Left or the Right. Preview opening replays the slide-in in the preview.
• Colors — Primary color drives buttons, the active card border and links; Accent color adds a secondary tone for icons and subtle backgrounds. 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 preset — Soft, Sharp, Bold, Playful or Minimal. This sets corner rounding and border thickness across the drawer.
• 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 drawer to match your theme's type. The preview cannot show your theme's font, because your theme isn't loaded in the Shopify admin; check it on your live storefront.
• Custom CSS — your own CSS for the drawer, up to 5,000 characters. It applies inside the registry drawer only, not to the rest of your store or to the buttons in your theme (for those, see Custom CSS). Select an element lets you click anything in the preview and starts a rule for it in the editor; Insert template adds a ready-made starting point for headings, buttons, product cards, the drawer's width and corners, the overlay or inputs.

Keyboard shortcuts. On a Mac, use ⌘ for Ctrl and ⌥ for Alt.

Save works wherever you are on the page. The others are ignored while you type in a field or in the CSS editor, and the zoom keys act only while the pointer is over the preview on Desktop or Full width; elsewhere they zoom the browser as usual.

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

Widget not showing

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

Styles not applying

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