Adding and Customizing the Wishlist Button on the Product Page
Add the wishlist button block to your product page so customers can save items to their wishlist directly from the product page. If your theme doesn't support app blocks, use the floating button embed instead.
Adding the Wishlist Button (as App Block)
- Go to your Shopify theme editor.
- Open the Product page template.
-
In the Product information section, click Add block and select Add to Wishlist Button from the app blocks list.
- Click Save.
Adding the Floating Wishlist Button (for themes without app block support)
If your theme doesn't support app blocks, you can add the wishlist button as a floating button that appears across your store.
- Go to your Shopify theme editor.
- Navigate to App embeds (the puzzle piece icon in the left sidebar).
-
Find Floating Wishlist Button and toggle it on.
- Click Save.
Customizing the Wishlist Button (App Block)
Once the block is added, you can configure it using the settings panel on the left. The settings are grouped into several sections.
Button Text
These settings let you control the labels shown on the button depending on the wishlist state.
| Setting | Description |
|---|---|
| Add text | The label displayed when the product has not yet been added to the wishlist. Hidden when the view is set to "Icon only". |
| Remove text | The label displayed when the product is already in the wishlist. Hidden when the view is set to "Icon only". |
View Mode
| Setting | Description |
|---|---|
| View | Determines what the button displays. Choose between Icon and text (both icon and label), Icon only (no text), or Text only (no icon). |
Layout
| Setting | Description |
|---|---|
| Content alignment | Sets the horizontal alignment of the button content — left, center, or right. |
| Icon and text spacing | Controls the gap in pixels between the icon and the text label. Only visible when the view is set to "Icon and text". |
| Max width | Sets a maximum width for the button in pixels. Set to 0 to let the button size naturally. |
Icon
These settings are available when the view includes an icon (Icon and text or Icon only).
| Setting | Description |
|---|---|
| Icon type | Choose the icon style: Heart, Star, Bookmark, or Custom (upload your own image). |
| Custom icon — Add state | Upload a custom image to use as the icon when the product is not yet wishlisted. Visible only when "Custom" icon type is selected. |
| Custom icon — Added state | Upload a custom image to use as the icon when the product is already wishlisted. Visible only when "Custom" icon type is selected. |
| Icon color | Sets the color of the icon. |
| Icon size (desktop) | Controls the icon size in pixels on desktop devices. |
| Icon size (mobile) | Controls the icon size in pixels on mobile devices. |
Text
These settings are available when the view includes text (Icon and text or Text only).
| Setting | Description |
|---|---|
| Text color | Sets the color of the button label. |
| Text size (desktop) | Controls the font size in pixels on desktop devices. |
| Text size (mobile) | Controls the font size in pixels on mobile devices. |
Spacing
Use these settings to add space around the button and position it within the product information section.
| Setting | Description |
|---|---|
| Margin top | Adds space above the button (0–80 px). |
| Margin bottom | Adds space below the button (0–80 px). |
| Margin left | Adds space to the left of the button (0–80 px). |
| Margin right | Adds space to the right of the button (0–80 px). |
Popup
When enabled, a small confirmation popup appears after the customer clicks the button. This popup can include a message and a link — useful for directing customers to their wishlist page.
| Setting | Description |
|---|---|
| Show popup | Enables or disables the confirmation popup. |
| Info text | The message displayed inside the popup after the item is added. |
| Popup position | Sets where the popup appears relative to the button: bottom-left, bottom-right, top-left, or top-right. |
| Background color | The background color of the popup. |
| Text color | The color of the message text inside the popup. |
| Font size (desktop) | Font size of the popup text on desktop. |
| Font size (mobile) | Font size of the popup text on mobile. |
| Horizontal padding | Left and right inner spacing of the popup. |
| Vertical padding | Top and bottom inner spacing of the popup. |
| Border radius | Rounds the corners of the popup. |
| Close button color | Sets the color of the × close button. |
| Close button size (desktop) | Size of the close button on desktop. |
| Close button size (mobile) | Size of the close button on mobile. |
| Link URL | A URL the popup button will navigate to — typically your wishlist page. |
| Link text | The label for the link button inside the popup (e.g., "View wishlist"). |
| Button background color | Background color of the link button inside the popup. |
| Button text color | Text color of the link button inside the popup. |
| Button font size (desktop) | Font size of the link button text on desktop. |
| Button font size (mobile) | Font size of the link button text on mobile. |
| Button border radius | Rounds the corners of the link button. |
| Button horizontal padding | Left and right inner spacing of the link button. |
| Button vertical padding | Top and bottom inner spacing of the link button. |
Customizing the Floating Wishlist Button
Once enabled, click the Floating Wishlist Button embed to open its settings panel. The settings are organized into the following sections.
Position
These settings control where the floating button appears on the screen.
| Setting | Description |
|---|---|
| Button position | Sets the corner of the screen where the button is anchored. Choose from bottom-left, bottom-right, top-left, or top-right. |
| Vertical offset | Distance in pixels between the button and the top or bottom edge of the screen (0–100 px). |
| Horizontal offset | Distance in pixels between the button and the left or right edge of the screen (0–100 px). |
Button
These settings control the size and appearance of the button itself.
| Setting | Description |
|---|---|
| Button size (desktop) | Sets the button size in pixels on desktop devices (36–96 px). Default: 56 px. |
| Button size (mobile) | Sets the button size in pixels on mobile devices (36–88 px). Default: 52 px. |
| Background color | The fill color of the button. Default: #111111 . |
| Border width | Thickness of the button border in pixels (0–10 px). Set to 0 for no border. |
| Border color | Color of the button border. |
| Border radius | Rounds the corners of the button (0–100 px). Set to 100 for a fully circular button. |
| Horizontal padding | Left and right inner spacing of the button (0–40 px). |
| Vertical padding | Top and bottom inner spacing of the button (0–40 px). |
| Show shadow | Enables or disables a drop shadow beneath the button. |
| Shadow color | Color of the drop shadow. Only visible when Show shadow is enabled. |
Icon
These settings control the icon displayed inside the floating button.
| Setting | Description |
|---|---|
| Icon type | Choose the icon style: Heart, Star, Bookmark, or Custom (upload your own image). |
| Custom icon — Add state | Upload a custom image to use as the icon when the product has not yet been wishlisted. Visible only when Custom icon type is selected. |
| Custom icon — Added state | Upload a custom image to use as the icon when the product is already wishlisted. Visible only when Custom icon type is selected. |
| Icon size (desktop) | Controls the icon size in pixels on desktop devices (12–64 px). Default: 22 px. |
| Icon size (mobile) | Controls the icon size in pixels on mobile devices (10–52 px). Default: 20 px. |
| Icon color | Sets the color of the icon. Default: #ffffff . |
Having trouble adding our app blocks to your store? The R+ Wishlist development team is happy to help you get everything set up quickly and smoothly. Check this article.
Do you need help?
If you have any questions or run into issues, please contact us — we’re happy to help.