Appearance
Customization Overview
How the app's customization system works — the shared tools and patterns used across every settings screen.
Overview
Every visual part of the wishlist — buttons, icons, colors, layouts, and text — is customizable directly from the app, with no coding required. Each settings screen shares the same set of tools, so once you're familiar with one, you'll recognize the pattern everywhere.
Benefits
- Consistent, predictable settings screens across every feature
- Live preview means you never have to save-and-check on your live store to see a change
- No developer needed for standard visual changes
Where to Find It
Apps ↓ BRIX: Wishlist Plus ↓ Settings ↓ Any feature row with a "Customize" button
How to Use
- Open the app and go to Settings.
- Click Customize on any feature row (for example, Product page wishlist button).
- Adjust settings in the panel on the left.
- Watch the live preview on the right update as you make changes.
- Use the Desktop / Tablet / Mobile toggle to check how it looks on different screen sizes.
- If the screen has a translate icon, use it to localize any customer-facing text.
- Click Save in the save bar once you're happy with your changes — nothing is applied to your live store until you save.
Available Settings
Customization screens share these common building blocks:
| Tool | What It Does |
|---|---|
| Save bar | Appears at the top only when you have unsaved changes; lets you Save or Discard |
| Live preview | A mock storefront preview that updates instantly as you adjust settings |
| Device toggle | Switches the live preview between Desktop, Tablet, and Mobile views |
| Preview animation button | Replays the configured animation (buttons, notifications) on demand |
| Translate icon | Opens a modal to edit or auto-translate customer-facing text into your store's other languages |
| Icon picker | Choose from Heart, Star, Bookmark, or upload a Custom SVG icon |
| Color picker | Choose colors via a visual picker or by typing a hex/RGBA value, with a reset option |
| Sliders | Fine-tune sizes, spacing, and positions within a defined range |
Best Practices
- Always check the live preview on Mobile before saving — most of your traffic is likely mobile.
- Save each screen individually as you go, rather than making changes across many screens before saving any of them.
- If you're trying to match your theme's exact colors, open your theme editor in another tab to copy exact hex values.
Notes
- If you try to navigate away from a settings screen with unsaved changes (for example, by clicking Customize on a different feature), the app will prompt you to save or discard first.
- Settings are applied shop-wide and affect all shoppers immediately after saving — there is no separate "draft" vs. "live" state for wishlist settings the way there is for themes.
Troubleshooting
My changes aren't showing on the storefront after saving. Hard refresh your storefront page to clear any cached version. If it still doesn't reflect your change, confirm the relevant feature toggle is turned on.
The live preview looks different from my actual storefront. The preview is a simplified mockup meant to show your settings accurately — small layout differences from your specific theme are expected. Always spot-check your live store after saving significant changes.