Appearance
Product Grid Wishlist Button
A heart icon that appears on product cards across your collection pages, search results, and home page — letting shoppers save products without leaving the grid.
Overview
This button is added automatically to product cards on your store — the small image tiles shown on collection pages, search results, and (in most themes) your home page and related-product sections. Customers click the icon to add or remove a product from their wishlist without opening the product page.
The app detects your theme's product card layout automatically, so no code changes are required on most Online Store 2.0 themes.
Benefits
- Let shoppers save products while browsing, without slowing them down
- Works across collection pages, search results, and paginated or infinite-scroll grids
- Keeps wishlist status in sync — a product saved from a grid shows as saved on its product page too
- Fully brandable to match your store's design
Where to Find It
Apps ↓ BRIX: Wishlist Plus ↓ Settings ↓ Buttons tab ↓ Product grid wishlist button ↓ Customize
How to Use
- Open the app and go to Settings.
- Find Product grid wishlist button under the Buttons tab (enabled by default).
- Click Customize to open the settings screen.
- Choose an icon, colors, size, and placement.
- Use the live preview (with Desktop / Tablet / Mobile toggle) to check your changes.
- Click Save.
Available Settings
Icon
| Setting | Description |
|---|---|
| Icon style | Heart, Star, Bookmark, or a Custom SVG you upload (default: Heart) |
| Custom icon | Upload your own SVG (max 100 KB), shown only when Icon style is set to Custom |
| Icon animation | Choose from 12 animation styles: None, Fill, Cross fade, Scale swap, Rotate swap, Flip 3D, Slide left, Radial, Wipe right, Swing, Bounce, Flip (default: Fill) |
| Icon color | Color of the icon when not saved (default: red) |
| Icon color (active) | Color of the icon when the product is saved (default: white) |
| Icon size | 16–96px slider (default: 20px) |
Appearance
| Setting | Description |
|---|---|
| Background color | Button background when not saved (default: white) |
| Background color (active) | Button background when the product is saved (default: red) |
| Border radius | 0–100% slider — controls how rounded the button is (default: 69%, i.e. a circle) |
| Padding (vertical / horizontal) | 0–60px sliders controlling inner spacing |
Position
| Setting | Description |
|---|---|
| Placement | One of 9 corner/edge positions (Top left, Top center, Top right, Middle left, Middle center, Middle right, Bottom left, Bottom center, Bottom right) or Custom position (default: Top right) |
| Horizontal / vertical offset | Pixel offsets, only used when Placement is set to Custom |
Behavior
| Setting | Description |
|---|---|
| Show on hover | Only display the button when a shopper hovers over the product card (desktop only). Off by default. |
Best Practices
- Use a placement that doesn't overlap sale badges or other icons your theme already shows on product cards.
- Keep the "active" color distinct from your primary brand color so shoppers can clearly tell a product is already saved.
- Enable "Show on hover" for a cleaner grid look on desktop, but keep it visible by default on mobile (hover doesn't apply to touch devices).
Notes
- If your theme uses very unusual or heavily customized product card markup, the button may not appear on every card. See Troubleshooting.
- For multi-variant products, this button saves the product itself by default. To let shoppers pick a specific variant from the grid, enable Add wishlist by variant — see Multiple Wishlists and the Features tab in Settings.
- Works with infinite scroll and "load more" pagination — newly loaded products automatically get the wishlist button.
Troubleshooting
The button doesn't appear on some product cards. This usually happens on custom themes with non-standard card markup. Try a different theme section, or contact support with a link to the page.
The button appears in the wrong position on the card. Try a different Placement option, or use Custom position with pixel offsets to fine-tune it.
Clicking the button does nothing. Confirm the theme app embed is turned on — see Installation.