Custom buttons and counters

XB Wishlist places its buttons automatically. When your theme needs something different, every piece is also an HTML tag you can put in your theme code. This page is for whoever edits your theme's Liquid files.

Edit theme code from Online Store → Themes → … → Edit code. Work on a copy of your live theme, and publish it once it looks right.

#Product page button

The easiest way is the XB Wishlist Button app block. See Product page button. To place it in code instead, for example inside a custom section:

<xb-wishlist-button
  xb-product-id="{{ product.id }}"
  xb-variant-id="{{ product.selected_or_first_available_variant.id }}"
  xb-title='{{ product.title | json }}'
  xb-handle="{{ product.handle }}"
  xb-price="{{ product.price | money_without_currency }}"
  xb-count="{{ product.metafields.xo_wishlist.wishlist_count | default: 0 }}"
></xb-wishlist-button>

The button uses the style you set in the product page editor. When this tag is on the page, the automatic button for the same product is not added, so you won't get two.

#Collection card button

Put this in your product card snippet, usually snippets/card-product.liquid:

<xb-wishlist-button-collection xb-handle="{{ product.handle }}"></xb-wishlist-button-collection>

It uses your collection button settings, and it hides itself when the Collection Wishlist Button card is off.

#Or point the app at your cards

If your cards are already there and the hearts just don't show, you can tell XB Wishlist where to put them without editing code:

1. Open the theme editor and go to App embeds → XB Wishlist Scripts.
2. In Collection Selector, enter a CSS selector that matches the product link in each card, for example .card__heading a or .product-item__image-link. Separate several selectors with commas.
3. Save.

The heart is added inside each element that matches. Right-click a card's product link and choose Inspect to find a selector.

#Header icon and counter

The header icon is added to your header automatically on supported themes. To place it yourself, add this where you want it, usually in sections/header.liquid next to the cart icon:

<xb-wishlist-header></xb-wishlist-header>

It shows the heart and the number of saved items, and opens the wishlist on click. When this tag is on the page, the automatic header icon is not added.

To use your theme's own icon so it matches the cart and account icons, put your markup inside the tag. XB Wishlist writes the count into the element with class xb-product-quantity:

<xb-wishlist-header class="xb-wishlist__header">
  <span class="svg-wrapper">{{ 'icon-heart.svg' | inline_asset_content }}</span>
  <span class="xb-product-quantity"></span>
</xb-wishlist-header>

The count element gets the class show when there is at least one item and is hidden at zero, so you can style the badge however you like.

#A link instead

Any link to #xb-wishlist opens the wishlist. Add a menu item in Online Store → Navigation with the link #xb-wishlist and you're done, no code needed.

#The wishlist itself

Put the full wishlist on any page or section:

<xb-wishlist-page></xb-wishlist-page>

Add xb-heading="false" to hide XB Wishlist's own title and subtitle, for example when your page already has a heading.

In the page editor of Shopify admin (Online Store → Pages), where you can't write HTML tags, use the shortcode instead:

[xb-wishlist-page][/xb-wishlist-page]

You can also add the XB Wishlist Product List app block to a page template in the theme editor.

#Your own button design

To keep a button you designed yourself and only let XB Wishlist handle the saving, give your elements these classes and attributes:

<div class="xb-wishlist__btn-custom">
  <button
    class="xb-wishlist__add"
    xb-product-id="{{ product.id }}"
    xb-product-title="{{ product.title | escape }}"
    xb-product-variant="{{ product.selected_or_first_available_variant.id }}"
    xb-product-handle="{{ product.handle }}"
  >Save</button>
  <button class="xb-wishlist__loading" xb-product-id="{{ product.id }}">Saving…</button>
  <button
    class="xb-wishlist__remove"
    xb-product-id="{{ product.id }}"
    xb-product-variant="{{ product.selected_or_first_available_variant.id }}"
  >Saved</button>
</div>

XB Wishlist shows the add button or the remove button depending on whether the product is saved. It does this by setting the xb-add attribute on the one that should show. Buttons added to the page later, for example by infinite scroll or a quick-view popup, work too.

#Wishlist count on a product

Each product has a metafield xo_wishlist.wishlist_count with the number of wishlists it is in. Show it anywhere:

{{ product.metafields.xo_wishlist.wishlist_count | default: 0 }} people saved this

To display a different number, for example while a new product builds up saves, set a custom.wishlist_count metafield on the product. When it is above 0, the product page button shows it instead.