Appearance
Customization: Buttons
A guide to the shared button-styling options used across the product grid, product page, and floating wishlist buttons.
Overview
The app has three distinct wishlist buttons — product grid, product page, and floating — each with its own settings screen, but they share the same underlying customization concepts: placement, sizing, spacing, and animation. This page explains those shared concepts; see each feature's own page for its exact setting list.
Benefits
- Understand button customization once, apply it confidently across every button
- Keep a consistent visual language across all wishlist touchpoints
- Fine-tune placement without needing to edit any theme code
Where to Find It
Apps ↓ BRIX: Wishlist Plus ↓ Settings ↓ Buttons tab ↓ Any button feature → Customize
How to Use
- Open Settings → Buttons tab.
- Choose a button to customize: Product grid, Product page, or Floating.
- Adjust placement, size, padding, and border radius.
- Preview using the device toggle.
- Save.
Available Settings
Placement patterns
| Button | Placement Options |
|---|---|
| Product grid | 9 corner/edge positions on the product image, or a custom pixel offset |
| Product page | Automatic (near Add to cart), or manual anchor + Above/Below position |
| Floating | 4 corner positions, or a custom pixel offset |
Sizing & spacing
All three buttons support sliders for icon size, and most support padding and border radius sliders to control the button's shape — from a sharp square to a full circle.
Width (product page only)
The product page button additionally supports Full width or Fixed width with alignment, since it sits inline with page content rather than floating or overlaying an image.
Best Practices
- Keep icon sizes visually consistent across the three buttons (for example, all around 18–24px) so the wishlist feels like one cohesive feature rather than three unrelated ones.
- Use "Custom position" pixel offsets sparingly — the preset corner options are usually enough and adapt better across screen sizes.
- Test border radius settings on both the grid and product page buttons together; a rounded product-page button paired with a square grid button can look inconsistent.
Notes
- Each button's exact setting list differs slightly since they serve different contexts — see each feature page for the full table.
- Changes to one button (e.g. product grid) do not affect the others; each is configured independently.
Troubleshooting
My three buttons look inconsistent with each other. Open each button's settings screen and align icon size, color, and border radius values manually — there's currently no "apply to all buttons" shortcut.
A button's position doesn't look right on mobile. Switch the live preview to Mobile and adjust placement or custom offsets specifically with mobile in mind.