Skip to main content

Add a wishlist button to the header menu

Make sure you enable the app in your theme customize.

  1. Go to Edit code in the theme editor
  2. Search for sections/header.liquid
  3. Add the following code to where you want it to appear
 <xb-wishlist-header class='xb-wishlist__header'>
                  <a href='#' class='xo-header__right-item xo-header__right-item--heart'>
                    {% render 'icon', name: 'heart', icon_size: '24', color: 'rgb(var(--color-foreground))' %}
                    <span class='xb-product-quantity'></span>
                  </a>
</xb-wishlist-header>
  1. 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.
  2. 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))' %}
  3. 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 */
    }
  4. Save and publish the changes