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 Edit theme 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 section 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 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 seven sections: Block visibility, Layout, Login Banner, Header, Products layout, Clear confirmation window, and Empty State.
Block visibility
These settings control who can see the wishlist page on your storefront.
| Setting | Description |
|---|---|
| Show to | Who can see this page on the live storefront. Options: Guests and customers — visible to all visitors; Logged in customers only — hidden for guests. Default: Guests and customers. |
Layout
These settings control the outer spacing around the wishlist page block.
| Setting | Description |
|---|---|
| Vertical global spacing | Space above and below the page block. Range: 0–80px. Default: 0px. |
| Horizontal global spacing | Space to the left and right of the page block. Range: 0–80px. Default: 0px. |
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 banner for guests | Shows a login banner when the customer is not logged in. Options: On — banner is shown; Off — banner and related settings are hidden. Default: On. |
| Banner message | Text shown inside the banner asking guests to log in. Default: Log in to save your favourites and access them anytime, anywhere. |
| Banner background |
Background colour of the banner. Default:
#f2f2f2 .
|
| Banner text colour | Colour of the banner text. Default: #000000 . |
| Banner font size (Desktop) | Banner text size on desktop. Range: 8–32px. Default: 15px. |
| Banner font size (Mobile) | Banner text size on mobile. Range: 8–24px. Default: 14px. |
| Banner border width | Thickness of the banner border. Range: 0–10px. Default: 0px. |
| Banner border colour | Colour of the banner border. Default: #000000 . Visible when Banner border width is greater than 0. |
| Button label | Text on the login button inside the banner. Default: Log in . |
| Button background | Background colour of the login button. Default: #000000 . |
| Button text colour | Text colour of the login button. Default: #ffffff . |
| Button font size (Desktop) |
Login button text size on desktop. Range: 8–24px. Default: 14px.
|
| Button font size (Mobile) | Login button text size on mobile. Range: 8–18px. Default: 13px. |
| Button icon size (Desktop) | Login button icon size on desktop. Range: 12–48px. Default: 16px. |
| Button icon size (Mobile) | Login button icon size on mobile. Range: 12–32px. Default: 14px. |
| Button border width |
Thickness of the login button border. Range: 0–10px. Default: 0px.
|
| Button border colour | Colour of the login button border. Default: #000000 . Visible when Button border width is greater than 0. |
Header
These settings control the title at the top of the wishlist page and the share and clear actions.
| Setting | Description |
|---|---|
| Title | Heading at the top of the wishlist page. Default: Wishlist . |
| Title colour | Colour of the page title. Default: #000000 . |
| Title font size (Desktop) | Title size on desktop. Range: 8–60px. Default: 42px. |
| Title font size (Mobile) | Title size on mobile. Range: 8–32px. Default: 28px. |
| Share wishlist | Shows a share button in the toolbar. Options: On — share button is shown; Off — share button is hidden. Default: Off. |
| Display style | How share and clear actions are displayed. Options: Icon and label — icon and text; Icon only — icon only; Label only — text only. Default: Icon and label. |
| Gap between icon and text | Space between the icon and the label. Range: 0–32px. Default: 4px. Visible when Display style is Icon and label. |
| Share label | Text on the share button. Default: Share wishlist . Visible when Share wishlist is On. |
| Copied label | Text shown after the share link is copied. Default: Copied . Visible when Share wishlist is On. |
| Clear all label | Text on the clear button. Default: Clear all . |
| Text and icon colour | Colour of share and clear icons and labels. Default: #000000 . |
| Label font size (Desktop) | Size of share and clear labels on desktop. Range: 8–32px. Default: 16px. Hidden when Display style is Icon only. |
| Label font size (Mobile) | Size of share and clear labels on mobile. Range: 8–22px. Default: 14px. Hidden when Display style is Icon only. |
| Icon size (Desktop) | Size of share and clear icons on desktop. Range: 12–48px. Default: 20px. Hidden when Display style is Label only. |
| Icon size (Mobile) | Size of share and clear icons on mobile. Range: 8–34px. Default: 16px. Hidden when Display style is Label only. |
Products Layout
These settings control how wishlist items are displayed — layout, product cards, stock badges, and the Add to Cart button.
| Setting | Description |
|---|---|
| Product layout style |
How products are displayed. Options: Cards — grid of cards; Rows — one product per row; Table — table layout. Default: Cards.
|
| Gap between product cards | Space between products. Range: 0–64px. Default: 20px. Visible when Product layout style is Cards or Rows. |
| Product card vertical padding | Inner space at the top and bottom of each product card. Range: 0–48px. Default: 16px. |
| Product card horizontal padding | Inner space at the left and right of each product card. Range: 0–48px. Default: 16px. |
| Product card background | Background colour of each product card. Default: #ffffff . |
| Product card text | Text colour inside each product card. Default: #111111 . |
| Product card border width | Thickness of the product card border. Range: 0–10px. Default: 1px. |
| Product card corner radius |
Corner rounding of product cards. Range: 0–32px. Default: 8px. Visible when Product layout style is Cards or Rows.
|
| Product card border colour | Colour of the product card border. Default: #e5e5e5 . Visible when Product card border width is greater than 0. |
| Product image aspect ratio | Shape of the product image. Options: Square (1:1); Portrait (3:4); Landscape (4:3); Wide (16:9). Default: Square (1:1). |
| Product image fit | How the image fills its container. Options: Contain — full image is visible; Cover — image fills the frame and may be cropped. Default: Cover. |
| Product image corner radius | Corner rounding of product images. Range: 0–32px. Default: 4px. |
| Show stock status badge | Shows an In stock / Out of stock badge on each product. Options: On — badge is shown; Off — badge and related settings are hidden. Default: On. |
| In stock badge background | Background colour of the in-stock badge. Default: #e8f5e9 . Visible when Show stock status badge is On. |
| In stock badge text colour | Text colour of the in-stock badge. Default: #2e7d32 . Visible when Show stock status badge is On. |
| Out of stock badge background | Background colour of the out-of-stock badge. Default: #ffebee . Visible when Show stock status badge is On. |
| Out of stock badge text colour | Text colour of the out-of-stock badge. Default: #c62828 . Visible when Show stock status badge is On. |
| Stock badge corner radius | Corner rounding of stock badges. Range: 0–24px. Default: 5px. Visible when Show stock status badge is On. |
| CTA Label (available) | Add to Cart button text when the product is available. Default: Add to cart . |
| CTA Label (after add to cart) |
Add to Cart button text after a successful add. Default:
Added to cart .
|
| CTA Label (out of stock) | Button text when the product is unavailable. Default: Out of stock . |
| CTA background | Background colour of the Add to Cart button. Default: #000000 . |
| CTA text colour | Text colour of the Add to Cart button. Default: #ffffff . |
| CTA border width | Thickness of the Add to Cart button border. Range: 0–10px. Default: 0px. |
| CTA corner radius | Corner rounding of the Add to Cart button. Range: 0–24px. Default: 4px. |
| CTA border colour |
Colour of the Add to Cart button border. Default:
#000000 . Visible when CTA border width is greater than 0.
|
Clear Confirmation Window
When a customer clicks Clear all, a confirmation modal appears. These settings control its text.
| Setting | Description |
|---|---|
| Clear confirmation message | Message asking the customer to confirm clearing the wishlist. Default: Are you sure you want to remove all items from your wishlist? |
| Clear confirm button label | Text on the button that clears the wishlist. Default: Yes, remove . |
| Clear cancel button label | Text on the button that closes the modal without clearing. Default: No, back to list . |
Empty State
When the wishlist is empty, a placeholder screen is shown. These settings control its content and the continue shopping link.
| Setting | Description |
|---|---|
| Show empty state image | Shows an image in the empty state. Options: On — image is shown; Off — image is hidden. Default: On. |
| Empty state title | Heading shown when there are no products. Default: Looks like your wishlist is empty . |
| Empty state description | Supporting text under the empty state title. Default: Wishlist helps you keep track of your favourite products across all your devices. Everything you like stays saved and easy to find in one place. |
| Continue shopping button text |
Text on the empty-state button. Default:
Continue shopping .
|
| Continue shopping button link | URL for the empty-state button. If left blank, the button is hidden. Usually set to the homepage or a collection. |
Customising the Floating Wishlist
The Floating Wishlist embed comes with a rich set of customization options, organized into seven sections: Block visibility, Layout, Button, Text, Icon, Counter, and Window.
Block visibility
These settings control who can see the floating wishlist button and panel on the live storefront. In the theme editor, the embed stays visible for preview.
| Setting | Description |
|---|---|
| Show to | Who can see this embed on the live storefront. Options: Guests and customers — visible to all visitors; Logged in customers only — hidden for guests. Default: Guests and customers. |
Layout
These settings control where the floating button appears on the screen and how its content is displayed.
| Setting | Description |
|---|---|
| Button position | Corner of the screen where the button appears. Options: Bottom-left, Bottom-right, Top-left, Top-right. Default: Bottom-right. |
| Offset (vertical edge) | Distance from the button to the nearest vertical edge of the screen. Range: 0–100px. Default: 24px. |
| Offset (horizontal edge) | Distance from the button to the nearest horizontal edge of the screen. Range: 0–100px. Default: 24px. |
| Display style | How the floating button content is displayed. Options: Icon and label — icon and text; Icon only — icon only; Label only — text only. Default: Icon and label. |
| Gap between icon and text | Space between the icon and the label. Range: 0–32px. Default: 6px. Visible when Display style is Icon and label. |
Button
These settings control the size, colour, and shape of the floating action button.
| Setting | Description |
|---|---|
| Button size (Desktop) |
Size of the floating button on desktop. Range: 40–96px. Default: 56px.
|
| Button size (Mobile) | Size of the floating button on mobile. Range: 40–88px. Default: 52px. |
| Button vertical padding | Space above and below the button content. Range: 0–40px. Default: 10px. |
| Button horizontal padding | Space to the left and right of the button content. Range: 0–40px. Default: 10px. |
| Button background | Background colour of the floating button. Default: #111111 . |
| Button border width | Thickness of the floating button border. Range: 0–10px. Default: 0px. |
| Button corner radius | Corner rounding of the floating button. Range: 0–100px. Default: 100px. |
| Button border colour | Colour of the floating button border. Default: #111111 . Visible when Button border width is greater than 0. |
| Button shadow | Shows a drop shadow on the floating button. Options: On — shadow is shown; Off — shadow is hidden. Default: On. |
| Button shadow colour | Colour of the drop shadow. Default: #000000 . Visible when Button shadow is On. |
Text
These settings control the optional text label shown on the floating button.
| Setting | Description |
|---|---|
| Button label | Text label displayed on the floating button. Default: Wishlist . Hidden when Display style is Icon only. |
| Font size (Desktop) | Label text size on desktop. Range: 10–20px. Default: 13px. Hidden when Display style is Icon only. |
| Font size (Mobile) | Label text size on mobile. Range: 10–18px. Default: 12px. Hidden when Display style is Icon only. |
| Text colour | Colour of the label text. Default: #ffffff . Hidden when Display style is Icon only. |
Icon
These settings control the icon displayed on the floating button.
| Setting | Description |
|---|---|
| Icon | Icon shown on the floating button. Options: List; Heart; Star; Bookmark; Custom. Default: List. Hidden when Display style is Label only. |
| Custom icon |
Upload a custom image to use as the icon. Recommended: 48x48 px (square, PNG/SVG). Visible when Icon is Custom and Display style is not Label only.
|
| Icon size (Desktop) | Icon size on desktop. Range: 12–64px. Default: 32px. Hidden when Display style is Label only. |
| Icon size (Mobile) | Icon size on mobile. Range: 12–52px. Default: 30px. Hidden when Display style is Label only. |
| Icon colour | Colour of the icon. Default: #ffffff . Hidden when Display style is Label only. |
Counter
These settings control the item count badge that appears on the floating button.
| Setting | Description |
|---|---|
| Show counter | Shows the item count badge on the floating button. Options: On — badge is shown; Off — badge and related settings are hidden. Default: On. |
| Hide when empty | Hides the badge when the wishlist has no items. Options: On — badge is hidden at 0 items; Off — badge stays visible. Default: Off. Visible when Show counter is On. |
| Counter size (Desktop) | Size of the counter badge on desktop. Controls badge diameter and number size together. Range: 10–40px. Default: 18px. Visible when Show counter is On. |
| Counter size (Mobile) | Size of the counter badge on mobile. Controls badge diameter and number size together. Range: 10–32px. Default: 16px. Visible when Show counter is On. |
| Background colour | Background colour of the counter badge. Default: #ffffff . Visible when Show counter is On. |
| Text colour |
Text colour of the number inside the badge. Default:
#000000 . Visible when Show counter is On.
|
| Border width | Thickness of the counter badge border. Range: 0–4px. Default: 1px. Visible when Show counter is On. |
| Border colour |
Colour of the counter badge border. Default:
#000000 . Visible when Show counter is On and Border width is greater than 0.
|
Window
These settings control the wishlist panel that opens when the floating button is clicked — including the panel look, share and clear actions, Add to Cart button, and empty state.
| Setting | Description |
|---|---|
| Window position | Where the panel opens on the screen. Options: Left; Center; Right. Default: Right. |
| Window corner radius | Corner rounding of the panel. Range: 0–24px. Default: 12px. |
| Window background | Background colour of the panel. Default: #ffffff . |
| Window text colour | Text colour inside the panel. Default: #111111 . |
| Window title | Heading at the top of the wishlist panel. Default: Wishlist . |
| Title alignment | Alignment of the panel title. Options: Left; Center; Right. Default: Left. |
| Share wishlist | Shows a share button in the panel toolbar. Options: On — share button is shown; Off — share button is hidden. Default: Off. |
| Display style | How share and clear actions are displayed. Options: Icon and label — icon and text; Icon only — icon only; Label only — text only. Default: Icon and label. |
| Gap between icon and text | Space between the icon and the label. Range: 0–32px. Default: 4px. Visible when Display style is Icon and label. |
| Share label | Text on the share button. Default: Share wishlist . Visible when Share wishlist is On. |
| Copied label | Text shown after the share link is copied. Default: Copied . Visible when Share wishlist is On. |
| Clear all label | Text on the clear button. Default: Clear all . |
| Text and icon colour | Colour of share and clear icons and labels. Default: #000000 . |
| Label font size (Desktop) | Size of share and clear labels on desktop. Range: 8–32px. Default: 16px. Hidden when Display style is Icon only. |
| Label font size (Mobile) | Size of share and clear labels on mobile. Range: 8–22px. Default: 14px. Hidden when Display style is Icon only. |
| Icon size (Desktop) | Size of share and clear icons on desktop. Range: 12–48px. Default: 20px. Hidden when Display style is Label only. |
| Icon size (Mobile) | Size of share and clear icons on mobile. Range: 8–34px. Default: 16px. Hidden when Display style is Label only. |
| CTA background | Background colour of the Add to Cart button. Default: #000000 . |
| CTA text colour | Text colour of the Add to Cart button. Default: #ffffff . |
| CTA border width | Thickness of the Add to Cart button border. Range: 0–10px. Default: 0px. |
| CTA corner radius | Corner rounding of the Add to Cart button. Range: 0–24px. Default: 4px. |
| CTA border colour | Colour of the Add to Cart button border. Default: #000000 . Visible when CTA border width is greater than 0. |
| Show empty state image | Shows an image in the empty state. Options: On — image is shown; Off — image is hidden. Default: On. |
| Empty state title | Heading shown when there are no products. Default: Looks like your wishlist is empty . |
| Empty state description | Supporting text under the empty state title. Default: Wishlist helps you keep track of your favourite products across all your devices. Everything you like stays saved and easy to find in one place. |
| Continue shopping button text | Text on the empty-state button. Default: Continue shopping . |
| Continue shopping button link | URL for the empty-state button. If left blank, the button is hidden. Usually set to the homepage or a collection. |
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.