Appearance
Change how the wishlist looks under Appearance in the app. The preview on the right updates as you type: switch between the store and the wishlist, and between desktop and mobile. Click Save to publish your changes to the storefront.
Style
| Setting | Options | Default |
|---|---|---|
| Button style | Minimal, Soft or Bold | Soft |
| Accent color | A swatch or any hex color | #e11d48 |
| Icon | Heart, Star, Bookmark or Custom | Heart |
| Corners | Square, Rounded or Pill | Rounded, 8 px |
| Size | Small, Medium or Large (32, 40 or 48 px) | Medium |
With Custom, paste an inline SVG of up to 8000 characters. Use currentColor for fills and strokes so the icon follows the accent color and the saved state. Scripts and event handlers are removed.
Buttons
Turn each button on or off under Appearance → Buttons.
Product page button
Shown with the add-to-cart button. On by default.
- Display: Icon, Icon and text, or Text.
- Full width: make the button fill the available width.
- Show how many shoppers saved the product: adds a count to the button.
- Spacing: space above and below the button, 0–40 px. It applies only to the button the app inserts; the Wishlist button block has its own spacing in the theme editor.
The button saves the variant the shopper has selected.
Product card button
A heart on product images in collection pages, search results and product recommendations. On by default.
- Position on the product image: a corner of the image. Top right by default.
- Show only on hover: hide the heart until the pointer is over the card. It's always visible on touch screens and once the product is saved.
Card hearts save the product, not a specific variant. Shoppers pick the variant when they add it to the cart.
Header icon
A wishlist icon next to the cart icon. On by default. Show item count adds a badge with the number of saved products. The badge copies the look of your theme's cart count.
The app places the icon for you. To place it yourself, add the Wishlist counter block to the header in the theme editor; the app then doesn't add its own.
Floating launcher
A round button pinned to a bottom corner of every page. Off by default. Use it when your header has no room for another icon. Choose Bottom left or Bottom right. Its badge follows Show item count.
Wishlist view
Under Appearance → Wishlist, Open the wishlist in sets what happens when a shopper clicks the header icon:
- Drawer: a panel that slides in from the right. It always shows a list, with a link to the full page.
- Popup: a window in the middle of the screen, or a sheet from the bottom on phones.
- Page: the shopper goes to your wishlist page.
Wishlist page is the page that holds the full wishlist, /pages/wishlist by default. Pick an existing page or create one. Shared wishlist links always open this page, so set it even if you use the drawer or popup.
Under Saved products:
- Layout: Grid or List, for the popup and the page.
- Show prices, Show add to cart and Show share button. The share button needs Sharing to be on under Settings → Features.
Lists show 24 products at a time, with Load more for the rest. Sold out products are marked, and products you deleted show as no longer available. Add all to cart appears when more than one product can be added.
Toast messages
A short message when a product is saved ("Added to your wishlist", with View) or removed (with Undo). Choose Top or Bottom. Turning toasts off hides the success messages only: error messages still show, and screen readers still announce every change.
Theme blocks
You don't need any block for the wishlist to work. Add them in the theme editor when you want to control placement.
| Block | Where | What it does |
|---|---|---|
| Wishlist (app embed) | App embeds | Loads the app. Must be on. |
| Wishlist button | Product templates | Places the product page button. Choose a product, or leave it empty to use the page's product. Has its own Vertical spacing. |
| Wishlist counter | Header | Places the header icon. |
| Wishlist page | Page templates | Shows the full wishlist on a page. |
When a block is on the page, the app doesn't insert its own copy.
Advanced
Appearance → Advanced holds Custom CSS and the theme selectors the app uses to find product cards, prices, the header and cart items. See Customization for both.