# 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](https://wishlist.themivo.com/docs/customization) for both.