Adding and Customizing Wishlist Header Link
Adding the Wishlist Header Link to the Header
- Go to your Shopify theme editor
- Open the Header section
-
Add the Header Link block from the app to display it in your store's header
Important! The icon will only be visible if the link to the Wishlist page has been filled in within the block settings.
Customising the Header Link
Once the block is added, you can fully customise how it looks and behaves using the settings panel in the theme editor. The settings are organized into several groups.
General Settings
| Setting | Description |
|---|---|
| Link Text | The text label displayed on or next to the button when text is visible. |
| Link URL | The URL the button links to — typically your Wishlist page. The button won't appear if this is left empty. |
| View | Controls what is displayed: icon and text together, icon only, or text only. |
Layout
| Setting | Description |
|---|---|
| Content Alignment | Aligns the button content horizontally — left, center, or right. |
| Icon & Text Spacing | Sets the gap (in px) between the icon and the text label. Only available when the View is set to "Icon and Text". |
| Max Width | Limits the maximum width of the button in pixels. Set to 0 to disable the limit and allow the button to expand naturally. |
Icon
| Setting | Description |
|---|---|
| Icon Type | Choose a built-in icon shape: Heart, Star, or Bookmark — or select Custom to upload your own images. Visible only when the View includes an icon. |
| Custom Icon (Empty State) | Upload an image to use as the icon when the wishlist is empty. Appears only when Icon Type is set to Custom. |
| Custom Icon (Filled State) | Upload an image to use as the icon when the wishlist contains items. Appears only when Icon Type is set to Custom. |
| Icon Color | Sets the color of the built-in icon. Not applied to custom images. Visible when the View includes an icon. |
| Icon Size (Desktop) | Controls the icon size on desktop devices, from 8px to 64px. |
| Icon Size (Mobile) | Controls the icon size on mobile devices, from 8px to 40px. |
Text
| Setting | Description |
|---|---|
| Text Color | Sets the color of the link text label. Visible when the View includes text. |
| Text Size (Desktop) | Controls the font size of the label on desktop, from 8px to 48px. |
| Text Size (Mobile) | Controls the font size of the label on mobile, from 8px to 36px. |
Counter
The counter displays the number of items currently saved to the wishlist, directly on or next to the button.
| Setting | Description |
|---|---|
| Show Counter | Enables or disables the item count badge on the button. |
| Counter Position | Sets where the counter appears: to the left of the button, to the right, or overlaid on top of the icon. |
| Hide Counter When Empty | When enabled, the counter badge is hidden if the wishlist has no items. |
| Counter Background Color | Sets the background color of the counter badge. |
| Counter Text Color | Sets the text color of the number inside the counter badge. |
| Counter Size (Desktop) | Controls the font size of the counter on desktop, from 8px to 32px. |
| Counter Size (Mobile) | Controls the font size of the counter on mobile, from 8px to 28px. |
Spacing
Use these settings to add space around the button to separate it from adjacent elements in the header.
| Setting | Description |
|---|---|
| Margin Top | Adds space above the button, from 0px to 80px. |
| Margin Bottom | Adds space below the button, from 0px to 80px. |
| Margin Left | Adds space to the left of the button, from 0px to 80px. |
| Margin Right | Adds space to the right of the button, from 0px to 80px. |
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.