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

Registry Search — A search widget for finding public registries
Registry Quick View — Displays a registry with product grid
Wishlist Button — Add-to-wishlist button for product pages (Pro plan)

Styling Options

Colors

All Listify blocks support custom colors:

Primary color — Used for buttons, links, and accents
Background color — Widget background
Text color — Primary text color
Border color — Widget borders and dividers

Layout

Configure the widget layout:

Width — Full width or contained
Padding — Inner spacing
Border radius — Corner rounding
Shadow — Optional box shadow

Typography

The widget inherits your theme's font by default. You can override:

Font family — Match your brand typography
Font size — Adjust text sizes

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
The Listify widget's CSS won't leak into your theme
Custom styling requires using the Listify configuration options

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