Skip to main content

Add a wishlist button to the product collection

Make sure you enable the app in your theme customize.

Using app embeds in theme customize​

You can choose how to display the wishlist page to your customers. There are two options available:

  1. Choose a product card
  2. Right click to your product card and choose Inspect
Inspect product card

  1. Product link selector

    The product link is defined by a CSS selector, which points to an anchor element with a product page href. We recommend to be as specific as possible with this selector to avoid injecting the button in unwanted places. We often use a selector with a pattern match to reference product links.

Find product link

Result:

.card__heading > .full-unstyled-link[href*="/products/"]
  1. Paste it to the app
Find product link

Customize button for developers​

  1. Go to edit code of theme

  2. Edit snippets/card-product.liquid

    We provide you with 2 buttons: add wishlist button, remove wishlist button

  • Add wishlist button includes the attributes:

    class="xb-wishlist__add", xb-product-id='{{ product.id }}', xb-product-title='{{ product.title }}'

  • Remove wishlist button includes the attributes:

    class="xb-wishlist__remove", xb-product-id='{{ product.id }}'

Example:

Code