Adding and Customising the Wishlist Page
Add the wishlist page block to your theme so customers can view and manage all their saved items in one place. If your theme doesn't support app blocks, use the floating panel embed instead.
To use wishlist page functionality you need to add the block to a page template and optionally configure its appearance.
Adding the Wishlist Page (as App Block)
Add the Wishlist Page to a Page Template
Step 1: Create a page template
- Go to Online Store → Themes and click Customise on your active theme.
- Open the page selector at the top, then go to Pages and click Create template.
- Enter the template name (for example, Wishlist) and click Create template.
Step 2: Add the Wishlist Page block
- In the template editor, click Add block in the left sidebar.
- Find and select Wishlist Page from the list of available blocks.
- Click Save.
Step 3: Create a page using this template
- Go to Online Store → Pages and click Add page in the top-right corner.
- Enter the page name (for example, Wishlist).
- Set the page visibility to Visible.
- Under Theme template, choose the Wishlist template you created earlier.
-
Click Save.
Add the Wishlist Page Block
- Create the Wishlist page through your Shopify admin.
-
Open it in the Theme Editor (Customize) and add the Wishlist Page block to the page.
- Press Save.
Add the Floating Wishlist (for themes without app block support)
If your theme doesn't support app blocks, you can add the floating wishlist as a modal 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 window and toggle it on.
- Click Save.
Customising the Wishlist Page (App Block)
The Wishlist Page block comes with a rich set of customization options, organized into five sections: Login Banner, Header, Products, Clear Wishlist Modal, and Empty State.
Login Banner
These settings control the banner shown to guests who are not logged in. The banner encourages visitors to sign in so their wishlist is saved to their account.
| Setting | Description |
|---|---|
| Show login banner | Toggles the entire login banner on or off. When disabled, all other login banner settings are hidden. |
| Banner text | The message displayed inside the banner to prompt the user to log in. |
| Background color | The background color of the banner block. Default: #f2f2f2 . |
| Text color | The color of the banner message text. Default: #000000 . |
| Font size (desktop) | Font size of the banner text on desktop. Range: 8–32px. Default: 15px. |
| Font size (mobile) | Font size of the banner text on mobile. Range: 8–24px. Default: 14px. |
| Vertical padding | Space above and below the banner text (inside the banner). Range: 0–80px. Default: 16px. |
| Horizontal padding | Space to the left and right of the banner text (inside the banner). Range: 0–80px. Default: 20px. |
| Vertical margin | Space above and below the banner block (outside). Range: 0–80px. Default: 24px. |
| Horizontal margin | Space to the left and right of the banner block (outside). Range: 0–80px. Default: 0px. |
| Border width | Width of the banner border. Range: 0–10px. Default: 0px. |
| Border color | Color of the banner border. Default: #000000 . |
| Button text | Label on the login button inside the banner. |
| Button background color | Background color of the login button. Default: #000000 . |
| Button text color | Text color of the login button. Default: #ffffff . |
| Button font size (desktop) | Font size of the button label on desktop. Range: 8–24px. Default: 14px. |
| Button font size (mobile) | Font size of the button label on mobile. Range: 8–18px. Default: 13px. |
| Button icon size (desktop) | Size of the icon inside the button on desktop. Range: 12–48px. Default: 16px. |
| Button icon size (mobile) | Size of the icon inside the button on mobile. Range: 12–32px. Default: 14px. |
| Button vertical padding | Space above and below the button label (inside the button). Range: 0–32px. Default: 8px. |
| Button horizontal padding | Space to the left and right of the button label (inside the button). Range: 0–32px. Default: 16px. |
| Button border width | Width of the button border. Range: 0–10px. Default: 0px. |
| Button border color | Color of the button border. Default: #000000 . |
Header
These settings control the title area at the top of the wishlist page — the heading text, optional icon, and spacing.
| Setting | Description |
|---|---|
| Icon | Choose an icon to display next to the page title. Options: None, Heart, Star, Bookmark, or Custom. |
| Custom icon image | Upload a custom image to use as the icon. Only visible when "Custom" is selected. |
| Icon size (desktop) | Size of the header icon on desktop. Range: 12–64px. Default: 36px. Visible when an icon is selected. |
| Icon size (mobile) | Size of the header icon on mobile. Range: 12–48px. Default: 28px. Visible when an icon is selected. |
| Title text | The heading displayed at the top of the wishlist page. |
| Title size (desktop) | Font size of the heading on desktop. Range: 8–60px. Default: 42px. |
| Title size (mobile) | Font size of the heading on mobile. Range: 8–32px. Default: 28px. |
| Title color | Color of the heading text. Default: #000000 . |
| Icon gap | Space between the icon and the title text. Range: 0–32px. Default: 12px. Visible when an icon is selected. |
| Vertical margin | Space above and below the header block. Range: 0–80px. Default: 24px. |
| Horizontal margin | Space to the left and right of the header block. Range: 0–80px. Default: 0px. |
| Clear wishlist label | The text label for the "Clear wishlist" button that appears in the header area. |
| Show clear icon | Toggles whether a trash/clear icon appears next to the "Clear wishlist" label. |
| Clear label font size (desktop) | Font size of the clear button label on desktop. Range: 8–32px. Default: 15px. |
| Clear label font size (mobile) | Font size of the clear button label on mobile. Range: 8–20px. Default: 14px. |
| Clear icon size (desktop) | Size of the clear icon on desktop. Range: 12–48px. Default: 24px. Visible when the icon is enabled. |
| Clear icon size (mobile) | Size of the clear icon on mobile. Range: 12–24px. Default: 20px. Visible when the icon is enabled. |
| Clear button color | Color of the clear button label and icon. Default: #000000 . |
Products
These settings control how wishlist items are displayed — layout, product card appearance, stock badges, and the Add to Cart button.
| Setting | Description |
|---|---|
| Layout style | Choose how products are displayed: Cards (grid), Row (horizontal list), or Table. |
| Products gap | Space between product cards or rows. Range: 0–64px. Default: 20px. Not available in Table layout. |
| Product background color | Background color of each product card. Default: #ffffff . |
| Product border width | Width of the border around each product card. Range: 0–10px. Default: 1px. |
| Product border color | Color of the border around each product card. Default: #e5e5e5 . |
| Product border radius | Corner rounding of product cards. Range: 0–32px. Default: 8px. Not available in Table layout. |
| Product vertical padding | Space above and below the content inside each product card. Range: 0–48px. Default: 16px. |
| Product horizontal padding | Space to the left and right of the content inside each product card. Range: 0–48px. Default: 16px. |
| Image ratio | Aspect ratio of product images. Options: Square (1:1), Portrait (3:4), Landscape (4:3), Wide (16:9), Auto. |
| Image fit | How the product image fills its container. Contain keeps the full image visible; Cover crops it to fill the space. |
| Image border radius | Corner rounding applied to product images. Range: 0–32px. Default: 4px. |
| Show stock status | Toggles the in-stock / out-of-stock badge on product cards. |
| In-stock badge background | Background color of the "in stock" badge. Default: #e8f5e9 . |
| In-stock badge text color | Text color of the "in stock" badge. Default: #2e7d32 . |
| Out-of-stock badge background | Background color of the "out of stock" badge. Default: #ffebee . |
| Out-of-stock badge text color | Text color of the "out of stock" badge. Default: #c62828 . |
| Stock badge border radius | Corner rounding of stock badges. Range: 0–24px. Default: 5px. |
| Add to Cart button text | Label shown on the Add to Cart button for available products. |
| Unavailable button text | Label shown instead of the Add to Cart button when a product is out of stock or unavailable. |
| ATC button background color | Background color of the Add to Cart button. Default: #000000 . |
| ATC button text color | Text color of the Add to Cart button label. Default: #ffffff . |
| ATC button border width | Width of the Add to Cart button border. Range: 0–10px. Default: 0px. |
| ATC button border color | Color of the Add to Cart button border. Default: #000000 . |
| ATC button border radius | Corner rounding of the Add to Cart button. Range: 0–24px. Default: 4px. |
| ATC button vertical padding | Space above and below the Add to Cart button label. Range: 0–32px. Default: 12px. |
| ATC button horizontal padding | Space to the left and right of the Add to Cart button label. Range: 0–32px. Default: 16px. |
Clear Wishlist Modal
When a customer clicks the "Clear wishlist" button, a confirmation modal appears. These settings let you customize its text.
| Setting | Description |
|---|---|
| Modal message text | The confirmation message shown in the modal asking the user to confirm clearing their wishlist. |
| Confirm button text | Label on the button that confirms and clears the wishlist. |
| Cancel button text | Label on the button that dismisses the modal without clearing the wishlist. |
Empty State
When the wishlist is empty, a placeholder screen is shown. These settings control its content and the link to redirect customers to continue shopping.
| Setting | Description |
|---|---|
| Redirect URL | The URL the "Start shopping" button links to. If left blank, the button may not appear. Typically set to your collections or homepage URL. |
| Empty state heading | The main heading shown when the wishlist is empty. |
| Empty state description | A short description or message shown below the heading when the wishlist is empty. |
| Button text | The label on the call-to-action button that directs customers to start shopping. |
Customising the Floating Wishlist
The Floating Wishlist embed comes with a set of customization options, organized into six sections: Position, Button, Text, Icon, Counter, and Window.
Position
These settings control where the floating button appears on the screen.
| Setting | Description |
|---|---|
| Button position | Corner of the screen where the button appears. Options: Bottom-left, Bottom-right, Top-left, Top-right. Default: Bottom-right. |
| Vertical offset | Distance from the button to the nearest vertical edge of the screen. Range: 0–100px. Default: 24px. |
| Horizontal offset | Distance from the button to the nearest horizontal edge of the screen. Range: 0–100px. Default: 24px. |
Button
These settings control the size, color, and shape of the floating action button.
| Setting | Description |
|---|---|
| Button size (desktop) | Size of the button on desktop. Range: 40–96px. Default: 56px. |
| Button size (mobile) | Size of the button on mobile. Range: 40–88px. Default: 52px. |
| Background color | Background color of the button. Default: #111111 . |
| Border width | Width of the button border. Range: 0–10px. Default: 0px. |
| Border color | Color of the button border. Default: #111111 . |
| Border radius | Corner rounding of the button. Range: 0–100px. Default: 100px. |
| Horizontal padding | Space to the left and right of the button content. Range: 0–40px. Default: 10px. |
| Vertical padding | Space above and below the button content. Range: 0–40px. Default: 10px. |
| Show shadow | Toggles a drop shadow on the button. Default: on. |
| Shadow color | Color of the drop shadow. Default: rgba(0, 0, 0, 0.2). Visible only when shadow is enabled. |
Text
These settings control the optional text label shown on the floating button.
| Setting | Description |
|---|---|
| Button label | Optional text label displayed on the button. Leave blank to show only the icon. |
| Icon and text gap | Space between the icon and the label text. Range: 0–32px. Default: 6px. Visible only when both a label and icon are set. |
| Label font size (desktop) | Font size of the label on desktop. Range: 10–20px. Default: 13px. |
| Label font size (mobile) | Font size of the label on mobile. Range: 10–18px. Default: 12px. |
| Label color | Color of the label text. Default: #ffffff . |
Icon
These settings control the icon displayed on the floating button.
| Setting | Description |
|---|---|
| Icon | Choose an icon to display on the button. Options: None, List, Heart, Star, Bookmark, or Custom. Default: List. |
| Custom icon image | Upload a custom image to use as the icon. Only visible when "Custom" is selected. |
| Icon size (desktop) | Size of the icon on desktop. Range: 12–64px. Default: 32px. Visible when an icon is selected. |
| Icon size (mobile) | Size of the icon on mobile. Range: 12–52px. Default: 30px. Visible when an icon is selected. |
| Icon color | Color of the icon. Default: #ffffff . Visible when an icon is selected. |
Counter
These settings control the item count badge that appears on the floating button.
| Setting | Description |
|---|---|
| Show counter | Toggles the item count badge on the button. Default: on. |
| Hide counter when empty | Hides the badge when the wishlist has no items. Default: on. Visible only when the counter is enabled. |
| Counter size (desktop) | Size of the counter badge on desktop. Range: 12–40px. Default: 18px. |
| Counter size (mobile) | Size of the counter badge on mobile. Range: 10–32px. Default: 18px. |
| Counter font size (desktop) | Font size of the number inside the badge on desktop. Range: 8–24px. Default: 10px. |
| Counter font size (mobile) | Font size of the number inside the badge on mobile. Range: 8–22px. Default: 10px. |
| Counter background color | Background color of the counter badge. Default: #ffffff . |
| Counter text color | Text color of the number inside the badge. Default: #111111 . |
Window
These settings control the wishlist panel that opens when the button is clicked.
| Setting | Description |
|---|---|
| Panel title | The heading displayed at the top of the wishlist panel. |
| Empty state text | The message shown inside the panel when the wishlist has no items. |
| Panel position | How the panel opens. Options: Center (modal), Slide from left, Slide from right. Default: Slide from right. |
| Border radius | Corner rounding of the panel. Range: 0–24px. Default: 12px. |
| Background color | Background color of the panel. Default: #ffffff . |
| Text color | Text color inside the panel. Default: #111111 . |
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.