Add a wishlist button to the header menu

To enable this feature, you need to go to XB Wishlist app > Features > enable Header Wishlist Button.

Currently, there are 2 ways to add the wishlist button to the header menu:

Automatic integration: We have an automatic recognition mechanism for up to 100+ popular themes today. However, during the editing process, your theme may differ from the original theme we support. Therefore, you can contact [email protected] for support or follow the alternative method below.
Custom code

2. Custom code

Go to Edit code in the theme editor
Search for sections/header.liquid
Add the following code to where you want it to appear

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

If you don't want to display the wishlist count, you can remove the following line:
```
<span class='xb-product-quantity'></span>
```
This will hide the numerical indicator for the number of items in the wishlist.

If you want to customize the icon, you can modify this line to use your preferred icon:

{% render 'icon', name: 'heart', icon_size: '24', color: 'rgb(var(--color-foreground))' %}

Customize the appearance by styling based on our provided classes:

.xb-wishlist__header {
  /* Your custom styles for the header container */
}

.xo-header__right-item {
  /* Your custom styles for the wishlist button */
}

.xb-product-quantity {
  /* Your custom styles for the quantity indicator */
}

Save and publish the changes

2. Custom code​

2. Custom code