Appearance
Product Page Wishlist Button
The main wishlist button shown on individual product pages, placed near your Add to cart button.
Overview
This button gives shoppers a clear way to save the exact product — and variant — they're viewing on a product detail page. It can show as an icon with a text label or an icon alone, and is placed automatically relative to your Add to cart button, Buy button, product description, or product image.
Benefits
- Gives every product page a clear, on-brand "save for later" action
- Automatically saves the exact variant a shopper has selected
- Supports quick style presets so you can match your theme in one click
- Works alongside multiple wishlists, letting shoppers choose which list to save into
Where to Find It
Apps ↓ BRIX: Wishlist Plus ↓ Settings ↓ Buttons tab ↓ Product page wishlist button ↓ Customize
How to Use
- Open the app and go to Settings.
- Find Product page wishlist button under the Buttons tab (enabled by default).
- Click Customize.
- Optionally click Change style to start from one of 13 built-in color presets.
- Adjust general layout, background, border, text, and icon settings as needed.
- Translate the button's text if your store supports multiple languages.
- Review the live preview, then click Save.
Available Settings
Style presets
A "Change style" picker offers 13 ready-made color combinations (outline or filled, in red, green, blue, orange, purple, teal, pink, navy, and black). Selecting one instantly applies matching background, border, text, and icon colors. Default: Outline red.
General
| Setting | Description |
|---|---|
| Button style | Icon only, or With text (default: With text) |
| Auto placement | When on, the app places the button automatically. Turn off to set placement manually. (default: on) |
| Anchor element (manual placement only) | Add to cart button, Buy button, Product description, or Product image (default: Add to cart button) |
| Position (manual placement only) | Above or Below the anchor element (default: Above) |
| Show wishlist count | Display the shopper's total number of wishlisted products on the button (default: off) |
Layout
| Setting | Description |
|---|---|
| Button width | Full width or Fixed width (default: Full width) |
| Fixed width / alignment | Pixel width and Left/Center/Right alignment, shown only when Fixed width is selected |
| Padding (vertical / horizontal) | Sliders controlling inner spacing (default: 12px / 20px) |
Background (can be turned off to inherit your theme's own button background)
| Setting | Description |
|---|---|
| Background color | Default state color |
| Background color (active) | Color once the product is saved |
Border (can be turned off to inherit your theme's own border)
| Setting | Description |
|---|---|
| Border color | Default: red |
| Border width | 0–6px slider (default: 1.5px) |
| Border radius | 0–40px slider (default: 8px) |
Text (shown only when Button style is "With text"; can be turned off to inherit your theme's own font)
| Setting | Description |
|---|---|
| Font size | 10–22px slider (default: 14px) |
| Font weight | Regular, Medium, Semibold, Bold (default: Semibold) |
| Text color | Default state and active state colors |
Icon
| Setting | Description |
|---|---|
| Icon style | Heart, Star, Bookmark, or Custom SVG upload (max 100 KB) |
| Icon animation | Same 12 animation options as the product grid button (default: Fill) |
| Icon color | Default state and active state colors |
| Icon size | 12–40px slider (default: 18px) |
Translatable text
| Field | Default |
|---|---|
| Before add to wishlist text | "Add to wishlist" |
| After add to wishlist text | "Remove from wishlist" |
| Loading text | "Loading..." |
Best Practices
- Keep "Auto placement" on unless your theme has an unusual layout — it saves you from manually testing anchor points.
- If your product page shows both a "With text" button and you have limited horizontal space on mobile, consider switching to "Icon only" for smaller screens by testing the Mobile preview.
- Turn off Background, Border, or Text sections individually if you'd rather the button visually match your theme's native buttons exactly.
Notes
- If a product has multiple variants and no variant is selected yet, clicking the button shows a message asking the shopper to choose an option first.
- Once a variant is selected, that specific variant — not just the product — is what gets saved.
- If Multiple wishlists is enabled and the shopper already has more than one list, adding a new item opens a quick picker so they can choose which wishlist to save it to.
Troubleshooting
The button appears in an odd spot on my product page. Turn off Auto placement and manually choose an anchor element and position (Above/Below).
The button text isn't translated even though my store has other languages. Open the Translate button text modal and confirm you've entered translations for each secondary language — the app doesn't auto-translate storefront languages you haven't configured. See Storefront Translations.
Clicking the button shows "Please select an option" even though I see one variant. This means your theme hasn't communicated the selected variant to the page yet — try selecting the option again directly in your theme's variant picker.