Storefront display
Display controls the places shoppers save an item, the controls they use to reopen their list and the list itself. Work through those three decisions before adjusting colours and spacing.
Choose the shopper journey first
For example, a shopper selects Navy / Medium on a product page, clicks Add to wishlist and returns tomorrow using the header icon. That icon opens either a drawer over the current page or a full wishlist page. An unavailable item can then offer Notify me when back.
| Decision | Where to change it |
|---|---|
| Where can shoppers save? | Wishlist button: product-page position, card hearts and card surfaces. |
| How do they reopen the list? | Floating button and Shopper wishlist → Show wishlist icon in the header. |
| Where does the list open? | Shopper wishlist → Display as. |
| What does a sold-out item offer? | Shopper wishlist → Show “Notify me when back” on out-of-stock variants. |
| What do the controls say? | Wishlist button labels, Shopper wishlist title/empty message and Wishlist text. |
Use Live preview while editing
- 1
Choose a preview tab
At the top of Live preview, switch between Product, Drawer, Full page and Collection. A setting change may switch to the relevant preview automatically. Select another tab whenever you want to compare surfaces.
- 2
Check a populated and empty list
On Drawer and Full page, use With products and Empty wishlist. Review both states: a good product grid does not show whether the empty message and shopping link are useful.
- 3
Save the draft
Click Save in the save bar. Fix highlighted fields if saving fails. Discard restores the values from before your edits.
- 4
Test your actual theme
Refresh the storefront and repeat the journey. The preview demonstrates the widget's layout with sample products. It cannot prove that a selector matches your theme, that a custom page has the required block, or that a real item can be added to cart.
Style in a predictable order
Start with Brand basics, which supplies the shared icon, accent and saved colour. Then use the controls for the specific surface you want to change. A separate card or floating-button colour can override the shared colour, so inspect those overrides if one element looks different.
Open the relevant guide
Need help?
Open the chat bubble in the Shopify app, or contact us with your store address and what you are stuck on.