> ## 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.

# Manual placement

> Place wishlist buttons, collection hearts, the wishlist page and menus by hand in your theme code.

Auto-placement covers most themes. Place elements by hand when your theme uses custom markup, or when you want an element somewhere the app does not look.

> [!WARNING]
>
> Keep both app embeds (**Wishlist Engine** and **Wishlist icon**) turned on in **Online Store → Themes → Customize → App embeds**. The snippets on this page are only placeholders. The embeds load the scripts that turn them into working elements.

## Product page button

You have three options. When a placed button exists on a product page, the app skips its own auto-placement.

> [tab] App block (no code)
>
> In the theme editor, open a product template, select the product information section, click **Add block → Apps** and choose **Add to Wishlist Button**.
>
> Every block setting is optional. If you leave one blank, the block uses the value from **Wishlist Settings → Product page** in the app.

> [tab] Placeholder div
>
> Uses the same renderer as the app block. Add it anywhere inside your product template:
>
> ```liquid theme={null}
> <div
>   data-cb-wishlist-button
>   data-product-id="{{ product.id }}"
>   data-variant-id="{{ product.selected_or_first_available_variant.id }}"
>   data-product-handle="{{ product.handle }}"
>   data-product-title="{{ product.title | escape }}"
>   data-product-img="{{ product.featured_image | image_url: width: 400 }}"
> ></div>
> ```

> [tab] Full button
>
> Write the whole button yourself. The app fills in the icon and label from your settings:
>
> ```liquid theme={null}
> <div class="cb-wishlist-btn-wrapper">
>   <button
>     class="cb-wishlist-btn"
>     data-toggle="cbwishlistPopup"
>     data-product-id="{{ product.id }}"
>     data-product-title="{{ product.title | escape }}"
>     data-product-img="{{ product.featured_image | image_url: width: 400 }}"
>     data-producturl="{{ product.url }}"
>     data-variant-id="{{ product.selected_or_first_available_variant.id }}"
>   >
>     <span class="cb-wishlist-btn__icon"></span>
>     <span class="cb-wishlist-btn__label"></span>
>   </button>
> </div>
> ```

### Button attributes

**data-toggle** `string` *required*

Must be `cbwishlistPopup`. Required on hand-written buttons only.

**data-product-id** `string` *required*

Shopify product ID.

**data-variant-id** `string` *required*

Shopify variant ID. When the shopper picks another variant, the app updates it automatically.

**data-product-title** `string`

Shown in the "Add to wishlist" popup.

**data-product-img** `string`

Image URL shown in the popup.

**data-producturl** `string`

Product URL.

### Per-button style overrides

Placeholder divs and the app block accept these optional attributes. Each one overrides the shop-wide setting for that button only.

| Attribute | Values | Overrides |
| - | - | - |
| `data-align` | `left`, `center`, `right` | Alignment |
| `data-full-width` | `1` | Makes the button 100% wide |
| `data-button-type` | `icon_text`, `text`, `icon` | Button type |
| `data-label` | text | Button text |
| `data-icon` | `heart`, `bookmark`, `star` | Icon |
| `data-appearance` | `solid`, `outline`, `plain` | Button style |
| `data-button-color` | color | Fill (solid) or border (outline) |
| `data-button-hover-color` | color | Hover color |
| `data-icon-color` | color | Icon and text color |
| `data-icon-hover-color` | color | Icon and text hover color |
| `data-icon-border-color` | color | Icon outline color |
| `data-icon-border-hover-color` | color | Icon outline hover color |
| `data-icon-size` | e.g. `20px` | Icon size |
| `data-icon-border-width` | e.g. `2px` | Icon outline width |
| `data-padding` | e.g. `14px 10px` | Padding |
| `data-border-radius` | e.g. `6px` | Border radius |
| `data-font-size` | e.g. `15px` | Font size |
| `data-button-width` | e.g. `200px`, `100%`, `auto` | Width |

## Collection and product-card hearts

The app finds product cards on most themes by itself. If your cards are custom, add the class `cbWishlist_selecter` to the card element and the app treats it as a product card.

To place the heart yourself, add this inside your product card snippet:

```liquid theme={null}
<div class="cb-wishlist-icon-wrapper">
  <button
    class="cb_wishlist-btn wishlist-icon-collection"
    data-toggle="cbwishlistPopup"
    data-product-id="{{ product.id }}"
    data-variant-id="{{ product.selected_or_first_available_variant.id }}"
    data-product-title="{{ product.title | escape }}"
    data-product-img="{{ product.featured_image | image_url: width: 400 }}"
    data-producturl="{{ product.url }}"
  >
    <span class="icon-heart"></span>
  </button>
</div>
```

The app rescans product cards when the DOM changes, when filters change (`shopify:facet:changed`), and when a section reloads in the theme editor.

## Wishlist page

Use the **Shopy Wishlist Page** app block (see [Wishlist page setup](https://codebeans-wishlyst.mintlify.site/guides/wishlist-page.md)) or add this shortcode to any page or template:

```html theme={null}
<div data-cb-wishlist></div>
```

The shortcode needs the **Wishlist Engine** embed. It renders the full page: my wishlists, shared wishlists, the detail view, and every dialog.

### Wishlist page URL parameters

| Parameter | Meaning |
| - | - |
| `wishlistId` | Opens one wishlist directly (public ID or numeric ID) |
| `shared=true` | Opens a wishlist through a public share link |
| `shareToken` | Opens a wishlist shared by email |
| `share` | Opens a share by its ID (`sh_…`) |

The app needs your wishlist page URL to build share links and the drawer's "Go to wishlist" link. It looks for, in order:

1. the current page, if it contains the wishlist page;
2. the first link on the page pointing to `/pages/wishlist` or ending in `/wishlist`;
3. the wishlist page URL saved in the app settings;
4. `/pages/wishlist`.

## Wishlist menu (nav shortcode)

Lists the shopper's wishlists as links, for example in an account dropdown or a mega menu.

```html Standalone theme={null}
<div data-cb-wishlist-nav data-page="/pages/wishlist"></div>
```

```html Inside your own list theme={null}
<ul class="account-dropdown">
  <li data-cb-wishlist-nav
      data-li-class="cb-wish-sub-item"
      data-active-class="is-active"></li>
</ul>
```

When placed inside your own `<ul>` or `<ol>`, the shortcode renders plain `<li>` items so your menu styles apply.

| Attribute | Default | Description |
| - | - | - |
| `data-limit` | Setting, then `5` | Maximum number of wishlists listed |
| `data-page` | Wishlist page URL | Where the links point |
| `data-show-view-all` | Setting, then `true` | Show a "View all" link |
| `data-view-all-label` | `View All` | Label of that link |
| `data-show-create` | Setting, then `true` | Show a "Create new list" button |
| `data-create-label` | `Create New List` | Label of that button |
| `data-create-position` | `end` | `start` or `end` |
| `data-ul-class`, `data-li-class`, `data-link-class`, `data-active-class`, `data-view-all-class`, `data-create-class` | — | Extra classes, merged with the defaults |

> [!TIP]
>
> Any element with `data-toggle="createNewList"` placed outside the wishlist page opens the "Create new list" dialog.

In single-wishlist mode, the menu shows one link.

## Recently viewed products

```html theme={null}
<div class="cb-recent-swatches" data-visible="6"></div>
```

Shows the products the shopper viewed recently, and lets them add several of them to a wishlist at once. Supported attributes: `data-visible`, `data-limit`, `data-size`, `data-heading`, `data-view-more-label`, `data-add-selection-label`, `data-show-view-more`, `data-show-add-selection`, plus class attributes (`data-wrapper-class`, `data-item-class`, …). Any element with `data-toggle="addSelectionList"` opens the multi-add dialog.

## Cart page: move to wishlist

With **Allow shoppers to move cart items to a wishlist** turned on, the app adds a wishlist selector to each cart line. To choose where it appears, place this inside your cart line item loop:

```liquid theme={null}
<div class="cb-wishlist-cart-btn"
     data-product-id="{{ item.product_id }}"
     data-variant-id="{{ item.variant_id }}"></div>
```

For themes with unusual cart markup, two JavaScript filters let you tell the app where each line is and where the selector goes:

```js theme={null}
window.MTWHooks.addFilter('findCartRow', function (rows, variantId, key) {
  return document.querySelectorAll('[data-line-key="' + key + '"]');
});

window.MTWHooks.addFilter('findInsertTarget', function (target, row) {
  return row.querySelector('.my-cart-line__actions') || target;
});
```

After an item is moved, the app dispatches `cart:refresh` and `cart:updated` so the theme can refresh its cart.

## Orders placed from a wishlist

When a product goes to the cart from the wishlist, the app adds hidden line-item properties: `_is_cbwishlist_product`, `_is_cbwishlist_direct`, and `_is_cbwishlist_email_product` for visits from a reminder email. Shopify hides properties that start with `_` at checkout. The app uses them to tag the order `cbwishlist-order` and to credit wishlist-driven revenue.


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