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
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
Widget not showing
- 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