Adding and Customising 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
Press Save

Important! The icon will only be visible if the link to the Wishlist page has been filled in within the block settings. If you haven't created Wishlist page yet, please, check this article.

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 Header Link block comes with a rich set of customization options, organized into four sections: Block visibility, Layout, Icon, and Counter.

Important! The icon will only be visible if the Link URL has been filled in within the block settings.

General Settings

Setting	Description
Show to	Who can see this block on the live storefront. Options: Guests and customers — visible to all visitors; Logged in customers only — hidden for guests. Default: Guests and customers.
Link URL	The URL the button links to — typically your Wishlist page. If left blank, the button is hidden on the live storefront.

Layout

These settings control the space around the header link.

Setting	Description
Top spacing	Space above the button. Range: 0–80px. Default: 0px.
Bottom spacing	Space below the button. Range: 0–80px. Default: 0px.
Left spacing	Space to the left of the button. Range: 0–80px. Default: 0px.
Right spacing	Space to the right of the button. Range: 0–80px. Default: 0px.

Icon

These settings control the icon displayed in the header link.

Setting	Description
Icon	Icon shown on the button. Options: Heart; Star; Bookmark; Custom. Default: Heart.
Custom Icon (Default state icon)	Upload an image to use as the icon when the wishlist is empty. Recommended: 48x48 px (square, PNG/SVG). Visible when Icon is Custom.
Custom Icon (Active state icon)	Upload an image to use as the icon when the wishlist contains items. Recommended: 48x48 px (square, PNG/SVG). Visible when Icon is Custom.
Icon size (Desktop)	Icon size on desktop. Range: 8–64px. Default: 24px.
Icon size (Mobile)	Icon size on mobile. Range: 8–40px. Default: 22px.
Icon colour	Colour of the built-in icon. Default: `#000000` . Not applied to custom images.

Counter

These settings control the item count badge that appears on or next to the header link.

Setting	Description
Show counter	EShows the item count badge on the 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.
Position	Where the counter appears. Options: Before icon; After icon; On icon — overlaid on the icon. Default: On icon. 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: #000000 . Visible when Show counter is On and Position is On icon.
Text colour	Text colour of the number inside the badge. Default: #f4f4f4 . 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 and Position is On icon.
Border colour	Colour of the counter badge border. Default: `#ffffff` . Visible when Show counter is On, Position is On icon, and Border width is greater than 0.

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.