Manual placement

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.

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.

App block (no code)
Placeholder div
Full button

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.

Uses the same renderer as the app block. Add it anywhere inside your product template:

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

Write the whole button yourself. The app fills in the icon and label from your settings:

<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

string

required

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

string

required

Shopify product ID.

string

required

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

string

Shown in the “Add to wishlist” popup.

string

Image URL shown in the popup.

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:

<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) or add this shortcode to any page or template:

<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:

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

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

<div data-cb-wishlist-nav data-page="/pages/wishlist"></div>

<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

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.

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:

<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:

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.

Theme integration

Integrations

Product page button

Button attributes

Per-button style overrides

Collection and product-card hearts

Wishlist page

Wishlist page URL parameters

Wishlist menu (nav shortcode)

Recently viewed products

Cart page: move to wishlist

Orders placed from a wishlist

​Product page button

​Button attributes

​Per-button style overrides

​Collection and product-card hearts

​Wishlist page

​Wishlist page URL parameters

​Wishlist menu (nav shortcode)

​Recently viewed products

​Cart page: move to wishlist

​Orders placed from a wishlist

Product page button

Button attributes

Per-button style overrides

Collection and product-card hearts

Wishlist page

Wishlist page URL parameters

Wishlist menu (nav shortcode)

Recently viewed products

Cart page: move to wishlist

Orders placed from a wishlist