> ## Documentation Index
> Fetch the complete documentation index at: https://codebeans-wishlyst.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Product page button

> Position and style the Add to wishlist button on product pages.

![The Add to wishlist button on a product page (default style)](https://mintcdn.com/codebeans-wishlyst/FOg6WqIIKdNxdSzd/images/mockups/product-page.png?fit=max\&auto=format\&n=FOg6WqIIKdNxdSzd\&q=85\&s=9b2ddae0850583d5bac33421aa9c14f0)

The Add to wishlist button on a product page (default style)

**Where:** **Manage Wishlist → Product Page**

The app places the button on product pages automatically, including in quick-add and quick-view popups on most themes. It follows the selected variant, so shoppers save exactly the size or color they picked.

> [!NOTE]
>
> The **Add to Wishlist Button** toggle under **Insights → Wishlist Settings** must be activated, and the **Wishlist icon** app embed must be on.

## Button position

Choose one placement:

![All eight button positions](https://mintcdn.com/codebeans-wishlyst/kZPpW-wYst0WMFZK/images/mockups/button-positions.png?fit=max\&auto=format\&n=kZPpW-wYst0WMFZK\&q=85\&s=0c62f6a6134eac5f224f4188adacbe87)

All eight button positions

> [tab] Near cart button
>
> **Above**, **Left of**, **Below** or **Right of** the Add to cart button.

> [tab] On product image
>
> **Top Left**, **Top Right**, **Bottom Left** or **Bottom Right** corner of the main product image.

### Custom CSS selectors

If the button does not appear, or appears in the wrong place, tell the app where to put it:

| Field | Example | Used for |
| - | - | - |
| **Custom Cart Selector** | `.product-form__buttons` | "Near cart button" positions |
| **Custom Image Selector** | `.swiper-main` | "On product image" positions |

> [!TIP]
>
> To find a selector, right-click the Add to cart area on your product page, choose **Inspect**, and copy a class name from the element that wraps it.

## Button type and text

* **Button Type**: **Icon and Text** (default), **Only Text** or **Only Icon**.
* **Label**: the button text. Default: `Add to wishlist`.

## Appearance

| Style | Looks like |
| - | - |
| **Solid** (default) | Filled button in your primary color |
| **Outline** | Transparent with a colored border |
| **Plain** | Icon and text only, no button shape |

## Colors and icon

* **Icon Colors**: Icon Color, Icon Hover Color, Icon Border Color, Icon Hover Border Color.
* **Text Colors**: Text Color, Text Hover Color.
* **Icon styles**: Icon size (10–60 px) and Icon border width (0–10 px).

Leave a color blank to use the **Basics** tab colors. Colors can be transparent.

## Placing the button yourself

To put the button in a specific place, or style one button differently from the rest, use the **Add to Wishlist Button** app block:

1. **Online Store → Themes → Customize**, open a product template.
2. In the product information section, **Add block → Apps → Add to Wishlist Button**.
3. Optionally change its settings. Fields you leave blank use the settings from this tab.

When the block is on the page, the automatic button is not added. For Liquid code, see [Manual placement](https://codebeans-wishlyst.mintlify.site/developers/manual-placement.md#product-page-button).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.