Floating and header buttons
A save button adds an item; the header and floating controls reopen the list. Keep at least one usable entry point on the pages where shoppers return to their wishlist.
Choose the access pattern
| Pattern | Settings | Use when |
|---|---|---|
| Header with floating fallback | Header on; floating on; When header icon is unavailable. | You want a quiet header entry but need access on layouts where header insertion fails. |
| Header and floating together | Header on; floating on; Always. | You want a persistent corner control as well as the header icon. |
| Floating only | Header off; floating on. | The theme has no suitable header location or you prefer a corner button. |
Set the floating button
- 1
Enable it
Open Display → Floating button and turn on Show the floating wishlist button. Choose When header icon is unavailable or Always under Show floating button.
- 2
Place it
Choose Bottom right, Bottom left or Top right. Adjust Distance from screen edge from 0–80 px. Check whether the chosen corner is already used by chat, cookie or accessibility controls on your store.
- 3
Style it
Set its icon or inherit the main icon. Choose background and icon colours, Button size from 40–72 px, and Show saved-item count. Count badge colours come from Brand basics.
Set the header icon
- 1
Enable header access
In Shopper wishlist, turn on Show wishlist icon in the header. The app looks for a location near the theme's cart icon.
- 2
Correct its position if necessary
If the automatic location is unsuitable, set Custom header selector (optional) and choose Before or After the matching element. Use the field's Message us link if the theme uses a complex header.
- 3
Choose the icon and count
Set Header icon, optional Header icon color, and Show saved-item count in header. An empty colour follows the theme header, which is useful on themes whose header changes colour between pages.
Why a floating button can disappear
In fallback mode, a usable header icon can suppress the floating button. That is expected. If you want to inspect its position while testing, choose Always, save and refresh. Then decide whether to keep both entry points or return to fallback.
Check the destination and mobile header
- Save a product and reopen the list from the access control.
- The list opens as the drawer or page selected in Display as.
- Inspect the mobile header separately; themes can use different header elements on narrow screens.
- Check the corner button does not cover another fixed control.
- Refresh after saving so the storefront loads the new settings.
Need help?
Open the chat bubble in the Shopify app, or contact us with your store address and what you are stuck on.