How to Add a Wishlist Count Bubble to Your Shopify Theme (No JavaScript Needed)?

TL;DR: Learn how to add a wishlist count bubble to your Shopify theme using a web component — no custom JS required. Works with any Shopify theme and updates in real time.

🎯 Adding a Wishlist Count Bubble with Web Components (Wishlist Power)

Adding a wishlist feature to your Shopify store is one of the simplest ways to improve user experience and increase return visits. But implementing it properly — with a wishlist icon, count badge, and real-time updates — often requires writing and maintaining JavaScript logic.

In this article, you’ll learn how to add a Shopify wishlist count bubble using Wishlist Power’s web component, without writing custom JS. It works with any Shopify theme, including Prestige, Focal, and Dawn, and updates automatically when customers add or remove wishlist items.

🚀 Why use a count bubble?

A few reasons why a count badge is a UX and conversion booster:

• It gives instant feedback: users immediately see that something was added.
• It encourages exploration: users click the icon to see their saved items.
• It communicates state: you can choose to hide it when empty, or show “0” based on your design.

But implementing it by hand with custom JavaScript often becomes error-prone — you have to observe state changes, update the badge, re-render styling, and so on. That’s where a web component shines.

🧩 How Wishlist Power’s <ooo-wl-wishlist-count>component works

Here’s a summary of the features and attributes you can use:

• block-start: Vertical offset (distance from top of parent container)
• inline-end: Horizontal offset (distance from the right side of parent)
• hide-count: Hide the numeric count — show only the icon when a product is in the wishlist
• show-zero: Show the badge even when count is zero
• Automatic updates: The component listens to wishlist state changes and updates the badge
• Encapsulation: Being a Web Component, internal style & logic are scoped — less CSS collision

Example usage

<ooo-wl-access-button>
  <a href="{{ wishlistUrl }}" class="relative tap-area">
    <span class="sr-only">Open wishlist</span>
    {%- render 'icon', icon: 'heart' -%}
    <ooo-wl-wishlist-count 
      block-start="0px" 
      inline-end="0px" 
      show-zero="false" 
      hide-count="false">
    </ooo-wl-wishlist-count>
  </a>
</ooo-wl-access-button>

Here’s what happens:

1. <ooo-wl-wishlist-count> is placed next to the heart icon.
2. block-start="0px" means it starts flush from the top of the parent container.
3. inline-end="0px" places it flush to the right side (so it appears at the top-right corner of the parent).
4. The component internally listens to add/remove actions so you don’t need extra JS to update it.

👍 Why this is better than custom JS or jQuery badges

• Less boilerplate: no need to write your own event listeners or timers.
• Reusability: drop it anywhere you like (header, product card, mobile nav) and it works.
• Declarative API: you simply specify offsets or behavior in HTML attributes.

🧪 Tips & best practices

• Make sure the parent element has position: relative or similar. The bubble uses that as reference.
• Avoid overly large offsets — keep bubble within the clickable area.
• Test on different screen sizes; offsets may need tweaking for responsive layouts.
• Choose whether show-zero makes sense: some stores hide the bubble until there’s at least one item.
• Use hide-count if you prefer just the icon without numbers (for minimalist designs).
• Add the cart bubble's CSS class on the ooo-wl-wishlist-count to match its style.

🖥️ Works with Any Shopify Theme

The Wishlist Power web component is theme-agnostic.
It works perfectly with both Online Store 2.0 themes (like Dawn, Focal, Prestige, Sense) and custom Hydrogen or headless setups.

All you need to do is paste the snippet in your theme’s header or product card section — no need to maintain extra JavaScript or deal with theme updates.

🔗 Related Resources

• Add a Wishlist Button Web Component for Shopify
• Wishlist Power Documentation – Advanced Wishlist Count Bubble