Forem: Fabien Sebban

How to Add a Wishlist Heart Icon Inside the Product Image on Fabric Theme?

Fabien Sebban — Mon, 09 Feb 2026 15:03:38 +0000

If you’re using the Fabric theme, you can easily place a heart icon directly inside the product image on the product page by leveraging the <ooo-wl-wishlist-button> web component.

In this article, I’ll show you how to add the icon by editing your theme code.

🎯 Final Result

Here’s what it will look like once implemented:

The heart icon appears in the top-right corner of the product image, toggling between “add” and “remove” states.

📝 Step 1 — Open snippets/product-media-gallery-content.liquid

From your Shopify admin, go to Online Store → Themes → Edit code.
In the code editor, open the file snippets/product-media-gallery-content.liquid

🔧 Step 2 — Insert the Wishlist Button

Inside the element, paste the following code right below the opening media-gallery tag:

...
  <media-gallery
    class="
      spacing-style
      sticky-content
      {% if media_presentation == 'grid' %}
        media-gallery--{{ block_settings.media_columns }}-column
        {% if block_settings.media_columns == "two" and block_settings.large_first_image%}media-gallery--large-first-image{% endif %}
      {% endif %}
      media-gallery--{{ media_presentation }}
      {% if block_settings.slideshow_mobile_controls_style == 'hint' %}
        media-gallery--hint
      {% endif %}
      {% if block_settings.extend_media %}
        media-gallery--extend
      {% endif %}
    "
    style="{% render 'spacing-style', settings: block_settings %} --thumbnail-width: {{ block_settings.thumbnail_width }}px; --media-radius: {{ block_settings.media_radius }}px;{% if block_settings.icons_style contains 'large' %} --slideshow-icon-padding: 0px;{% endif %}--image-gap: {{ block_settings.image_gap }}px;{% unless block_settings.aspect_ratio == 'adapt' %} --gallery-aspect-ratio: {{ block_settings.aspect_ratio }};{% endunless %}"
    data-presentation="{{ media_presentation }}"
    {{ block_shopify_attributes }}
  >

    <!-- INSERT CODE HERE -->
    <ooo-wl-wishlist-button product-id="{{ product.id }}" handle="{{ product.handle }}" loading>
      <button type="button">
        {% render 'icon', icon: 'heart-wishlist' %}
      </button>
    </ooo-wl-wishlist-button>
    <style>
      ooo-wl-wishlist-button {
        --ooo-wl-icon-color: black;
        --ooo-wl-icon-background-color: black;
        z-index: 10;
        position: absolute;
        top: 10px;
        right: 20px;

        button {
          display: grid;
          width: 50px;
          height: 50px;
          align-items: center;
          justify-content: center;
          background: none;
          border: 0;
          color: var(--ooo-wl-icon-color);
          cursor: pointer

          svg {
            width: var(--icon-size-md);
          }
        }
      }

    /* Show only the Add or Remove button based on state */
    button[aria-checked="true"] svg {
      fill: var(--ooo-wl-icon-background-color);
    }

    button[aria-checked="false"] svg {
      fill: none;
    }

    /* Hide the variant message by default */
    ooo-wl-wishlist-button p {
      display: none;
    }

    /* Show the message if a variant warning is required */
    [show-variant-warning="true"] p {
      display: block;
    }

    /* Loading state */
    ooo-wl-wishlist-button[loading] {
      display: grid;
      border-radius: 2px;
      background: #ebebeb;
      cursor: not-allowed;
      animation: loadingPlaceholder 4s ease infinite;
      animation-delay: -.170s;

      svg {
        display: none;
      }
    }

    @keyframes loadingPlaceholder {
      50% {
        opacity: 1
      }

      75% {
        opacity: .5
      }

      to {
        opacity: 1
      }
    }

    /* Animation when product is added to wishlist */
    ooo-wl-wishlist-button button[aria-busy="true"][aria-checked="true"] svg {
      animation: pulse 0.3s cubic-bezier(.13, -0.3, .2, 1.91);
    }

    @keyframes pulse {
      0% {
        transform: scale(0.9);
      }

      50% {
        transform: scale(1.2);
      }

      100% {
        transform: scale(1);
      }
    }
    </style>
    <!-- END CODE HERE -->

....

Note: You can adjust the top and right CSS values to position the icon exactly where you want.

❤️ Step 3 - Add the heart icon in the icon files

In the code editor, open the file snippets/icon.liquid
Add this code below the {%- case icon -%} tag:
...

{%- case icon -%}
  {%- when 'heart-wishlist' -%}
    <svg aria-hidden="true" focusable="false" fill="none" width="{{ width | default: 24 }}" class="{{ class | strip }}" viewBox="0 0 24 24">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M11.8482 21.0168C9.19102 19.8759 5.28668 16.1772 3.59901 13.4543C1.5836 10.2027 1.66699 7.42205 2.78053 5.5474C4.68111 2.34888 9.35958 1.94464 12.0001 5.58663C14.6406 1.94489 19.319 2.34863 21.2194 5.54765C22.3332 7.42231 22.4163 10.2029 20.4009 13.4546C18.6346 16.304 14.779 19.8891 12.0001 21.0818L11.8482 21.0168Z" stroke="currentColor" stroke-width="{{ stroke_width | default: settings.icon_stroke_width }}" stroke-miterlimit="10" stroke-linecap="round"/>
    </svg>
...

This will ensure the heart icon is available in your icon list.

👀 Step 4 — Save and Preview

Once you save the file and reload your product page, you should see the heart icon overlaid on the product image.

Clicking the heart will add or remove the product from the wishlist.
When active, the icon is filled; when inactive, it’s outlined.

🚀 Wrapping Up

That’s it! 🎉 You’ve successfully added a wishlist heart icon inside the product image on the Fabric theme.

This integration provides a sleek, customizable button that seamlessly integrates into your product gallery. If you’d like to explore more advanced customization with the Wishlist web component, check out the full documentation here:
👉 Wishlist Button Web Component Documentation

How to Add a Wishlist Heart Icon Inside the Product Image on Horizon Theme?

Fabien Sebban — Mon, 09 Feb 2026 14:43:12 +0000

If you’re using the Horizon theme, you can easily place a heart icon directly inside the product image on the product page by leveraging the <ooo-wl-wishlist-button> web component.

In this article, I’ll show you how to add the icon by editing your theme code.

🎯 Final Result

Here’s what it will look like once implemented:

The heart icon appears in the top-right corner of the product image, toggling between “add” and “remove” states.

📝 Step 1 — Open snippets/product-media-gallery-content.liquid

From your Shopify admin, go to Online Store → Themes → Edit code.
In the code editor, open the file snippets/product-media-gallery-content.liquid

🔧 Step 2 — Insert the Wishlist Button

Inside the element, paste the following code right below the opening media-gallery tag:

...
  <media-gallery
    class="
      spacing-style
      sticky-content
      {% if media_presentation == 'grid' %}
        media-gallery--{{ block_settings.media_columns }}-column
        {% if block_settings.media_columns == "two" and block_settings.large_first_image%}media-gallery--large-first-image{% endif %}
      {% endif %}
      media-gallery--{{ media_presentation }}
      {% if block_settings.slideshow_mobile_controls_style == 'hint' %}
        media-gallery--hint
      {% endif %}
      {% if block_settings.extend_media %}
        media-gallery--extend
      {% endif %}
    "
    style="{% render 'spacing-style', settings: block_settings %} --thumbnail-width: {{ block_settings.thumbnail_width }}px; --media-radius: {{ block_settings.media_radius }}px;{% if block_settings.icons_style contains 'large' %} --slideshow-icon-padding: 0px;{% endif %}--image-gap: {{ block_settings.image_gap }}px;{% unless block_settings.aspect_ratio == 'adapt' %} --gallery-aspect-ratio: {{ block_settings.aspect_ratio }};{% endunless %}"
    data-presentation="{{ media_presentation }}"
    {{ block_shopify_attributes }}
  >

    <!-- INSERT CODE HERE -->
    <ooo-wl-wishlist-button product-id="{{ product.id }}" handle="{{ product.handle }}" loading>
      <button type="button">
        {% render 'icon', icon: 'heart-wishlist' %}
      </button>
    </ooo-wl-wishlist-button>
    <style>
      ooo-wl-wishlist-button {
        --ooo-wl-icon-color: black;
        --ooo-wl-icon-background-color: black;
        z-index: 10;
        position: absolute;
        top: 10px;
        right: 20px;

        button {
          display: grid;
          width: 50px;
          height: 50px;
          align-items: center;
          justify-content: center;
          background: none;
          border: 0;
          color: var(--ooo-wl-icon-color);
          cursor: pointer

          svg {
            width: var(--icon-size-md);
          }
        }
      }

    /* Show only the Add or Remove button based on state */
    button[aria-checked="true"] svg {
      fill: var(--ooo-wl-icon-background-color);
    }

    button[aria-checked="false"] svg {
      fill: none;
    }

    /* Hide the variant message by default */
    ooo-wl-wishlist-button p {
      display: none;
    }

    /* Show the message if a variant warning is required */
    [show-variant-warning="true"] p {
      display: block;
    }

    /* Loading state */
    ooo-wl-wishlist-button[loading] {
      display: grid;
      border-radius: 2px;
      background: #ebebeb;
      cursor: not-allowed;
      animation: loadingPlaceholder 4s ease infinite;
      animation-delay: -.170s;

      svg {
        display: none;
      }
    }

    @keyframes loadingPlaceholder {
      50% {
        opacity: 1
      }

      75% {
        opacity: .5
      }

      to {
        opacity: 1
      }
    }

    /* Animation when product is added to wishlist */
    ooo-wl-wishlist-button button[aria-busy="true"][aria-checked="true"] svg {
      animation: pulse 0.3s cubic-bezier(.13, -0.3, .2, 1.91);
    }

    @keyframes pulse {
      0% {
        transform: scale(0.9);
      }

      50% {
        transform: scale(1.2);
      }

      100% {
        transform: scale(1);
      }
    }
    </style>
    <!-- END CODE HERE -->

....

Note: You can adjust the top and right CSS values to position the icon exactly where you want.

❤️ Step 3 - Add the heart icon in the icon files

In the code editor, open the file snippets/icon.liquid
Add this code below the {%- case icon -%} tag:
...

{%- case icon -%}
  {%- when 'heart-wishlist' -%}
    <svg aria-hidden="true" focusable="false" fill="none" width="{{ width | default: 24 }}" class="{{ class | strip }}" viewBox="0 0 24 24">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M11.8482 21.0168C9.19102 19.8759 5.28668 16.1772 3.59901 13.4543C1.5836 10.2027 1.66699 7.42205 2.78053 5.5474C4.68111 2.34888 9.35958 1.94464 12.0001 5.58663C14.6406 1.94489 19.319 2.34863 21.2194 5.54765C22.3332 7.42231 22.4163 10.2029 20.4009 13.4546C18.6346 16.304 14.779 19.8891 12.0001 21.0818L11.8482 21.0168Z" stroke="currentColor" stroke-width="{{ stroke_width | default: settings.icon_stroke_width }}" stroke-miterlimit="10" stroke-linecap="round"/>
    </svg>
...

This will ensure the heart icon is available in your icon list.

👀 Step 4 — Save and Preview

Once you save the file and reload your product page, you should see the heart icon overlaid on the product image.

Clicking the heart will add or remove the product from the wishlist.
When active, the icon is filled; when inactive, it’s outlined.

🚀 Wrapping Up

That’s it! 🎉 You’ve successfully added a wishlist heart icon inside the product image on the Horizon theme.

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

Fabien Sebban — Tue, 07 Oct 2025 10:07:32 +0000

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:

<ooo-wl-wishlist-count> is placed next to the heart icon.
block-start="0px" means it starts flush from the top of the parent container.
inline-end="0px" places it flush to the right side (so it appears at the top-right corner of the parent).
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

How to Add a Wishlist Heart Icon Inside the Product Image on Focal Theme?

Fabien Sebban — Fri, 03 Oct 2025 12:56:09 +0000

👉 Before you continue: This guide assumes you’re already familiar with the Wishlist Power web component. If you haven’t yet, I recommend starting with this article: Wishlist Button Web Component for Shopify.
If you’re using the Focal theme, you can easily place a heart icon directly inside the product image on the product page by leveraging the <ooo-wl-wishlist-button> web component.
In this article, I’ll show you how to add the icon by editing your theme code.

🎯 Final Result

Here’s what it will look like once implemented:

The heart icon appears in the top-right corner of the product image, toggling between “add” and “remove” states.

📝 Step 1 — Open snippets/product-media.liquid

From your Shopify admin, go to Online Store → Themes → Edit code.
In the code editor, open the file snippets/product-media.liquid

🔧 Step 2 — Insert the Wishlist Button

Inside the element, paste the following code right at the end of the div that has the product__media-list-wrapper class:

<div class="product__media-list-wrapper" style="max-width: {{ max_width }}px">

...

    {%- if section.settings.enable_image_zoom -%}
      <button {% if selected_media.media_type != 'image' %}hidden{% endif %} is="toggle-button" aria-controls="product-{{ section.id }}-{{ product.id }}-zoom" aria-expanded="false" class="tap-area product__zoom-button">
        <span class="visually-hidden">{{ 'product.general.zoom' | t }}</span>
        {%- render 'icon' with 'image-zoom' -%}
      </button>
    {%- endif -%}

    <!-- INSERT CODE HERE -->
    <ooo-wl-wishlist-button product-id="{{ product.id }}" handle="{{ product.handle }}" loading>
      <button type="button">
        {%- render 'icon' with 'heart', class: 'header__nav-icon' -%}
      </button>
      <p>You already have variants in your wishlist.</p>
    </ooo-wl-wishlist-button>

    <style>
      ooo-wl-wishlist-button {
        z-index: 1;
        position: absolute;
        top: 10px;
        right: 20px;

        button {
          display: grid;
          width: 50px;
          height: 50px;
          align-items: center;
          justify-content: center;
        }
      }

      /* Show only the Add or Remove button based on state */
      button[aria-checked="true"] svg {
        fill: black;
      }

      button[aria-checked="false"] svg {
        fill: none;
      }

      /* Hide the variant message by default */
      ooo-wl-wishlist-button p {
        display: none;
      }

      /* Show the message if a variant warning is required */
      [show-variant-warning="true"] p {
        display: block;
      }

      /* Loading state */
      ooo-wl-wishlist-button[loading] {
        display: grid;
        border-radius: 2px;
        background: #ebebeb;
        cursor: not-allowed;
        animation: loadingPlaceholder 4s ease infinite;
        animation-delay: -.170s;

        svg {
          display: none;
        }
      }

      @keyframes loadingPlaceholder {
        50% {
          opacity: 1
        }

        75% {
          opacity: .5
        }

        to {
          opacity: 1
        }
      }

      /* Animation when product is added to wishlist */
      ooo-wl-wishlist-button button[aria-busy="true"][aria-checked="true"] svg {
        animation: pulse 0.3s cubic-bezier(.13, -0.3, .2, 1.91);
      }

      @keyframes pulse {
        0% {
          transform: scale(0.9);
        }

        50% {
          transform: scale(1.2);
        }

        100% {
          transform: scale(1);
        }
      }
    </style>
    <!-- INSERT CODE HERE -->
</div>

...

Note: You can adjust the top and right CSS values to position the icon exactly where you want.

❤️ Step 3 - Add the heart icon in the icon files

In the code editor, open the file snippets/icon.liquid
Add this code below the {%- case icon -%} tag:

{%- case icon -%}
  {%- comment -%} UI {%- endcomment -%}
    {%- when 'heart' -%}
      <svg xmlns="http://www.w3.org/2000/svg" width="{{ width | default: 20 }}" fill="none" viewBox="0 0 20 19" class="{{ icon_class }}">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="{{ settings.icon_stroke_width }}" d="M9.714 5.852S6.951-1.087 2.526 1.898C.28 3.414.583 7.036 2.976 10.434c2.668 3.79 6.738 6.739 6.738 6.739s4.196-2.979 6.948-6.806c2.467-3.432 2.779-7.09.463-8.621-4.562-3.015-7.411 4.083-7.411 4.083"/>    
      </svg>
      ...

This will ensure the heart icon is available in your icon list.

👀 Step 4 — Save and Preview

Once you save the file and reload your product page, you should see the heart icon overlaid on the product image.

Clicking the heart will add or remove the product from the wishlist.
When active, the icon is filled; when inactive, it’s outlined.

🚀 Wrapping Up

That’s it! 🎉 You’ve successfully added a wishlist heart icon inside the product image on the Focal theme.

How to Add a Wishlist Heart Icon Inside the Product Image on Prestige Theme?

Fabien Sebban — Mon, 22 Sep 2025 11:50:28 +0000

If you’re using the Prestige theme, you can easily place a heart icon directly inside the product image on the product page by leveraging the <ooo-wl-wishlist-button> web component.

In this article, I’ll show you how to add the icon by editing your theme code.

🎯 Final Result

Here’s what it will look like once implemented:

The heart icon appears in the top-right corner of the product image, toggling between “add” and “remove” states.

📝 Step 1 — Open snippets/product-gallery.liquid

From your Shopify admin, go to Online Store → Themes → Edit code.
In the code editor, open the file snippets/product-gallery.liquid

🔧 Step 2 — Insert the Wishlist Button

Inside the element, paste the following code right on top of the div that has the product-gallery__image-list class:

...
<product-gallery class="product-gallery" form="{{ product_form_id }}" {% if enable_media_autoplay %}autoplay-media{%
  endif %} {% if enable_image_zoom %}allow-zoom="{{ max_image_zoom_level }}" {% endif %}>
  {%- if enable_image_zoom -%}
  <button class="product-gallery__zoom-button circle-button circle-button--sm md:hidden" is="open-lightbox-button">
    <span class="sr-only">{{ 'product.gallery.zoom' | t }}</span>
    {%- render 'icon' with 'zoom' -%}
  </button>
  {%- endif -%}

  <!-- INSERT CODE HERE -->
  <ooo-wl-wishlist-button product-id="{{ product.id }}" handle="{{ product.handle }}" loading>
    <button type="button">
      {%- render 'icon' with 'heart', class: 'header__nav-icon' -%}
    </button>
    <p>You already have variants in your wishlist.</p>
  </ooo-wl-wishlist-button>

  <style>
    ooo-wl-wishlist-button {
      z-index: 1;
      position: absolute;
      top: 10px;
      right: 20px;

      button {
        display: grid;
        width: 50px;
        height: 50px;
        align-items: center;
        justify-content: center;
      }
    }

    /* Show only the Add or Remove button based on state */
    button[aria-checked="true"] svg {
      fill: black;
    }

    button[aria-checked="false"] svg {
      fill: none;
    }

    /* Hide the variant message by default */
    ooo-wl-wishlist-button p {
      display: none;
    }

    /* Show the message if a variant warning is required */
    [show-variant-warning="true"] p {
      display: block;
    }

    /* Loading state */
    ooo-wl-wishlist-button[loading] {
      display: grid;
      border-radius: 2px;
      background: #ebebeb;
      cursor: not-allowed;
      animation: loadingPlaceholder 4s ease infinite;
      animation-delay: -.170s;

      svg {
        display: none;
      }
    }

    @keyframes loadingPlaceholder {
      50% {
        opacity: 1
      }

      75% {
        opacity: .5
      }

      to {
        opacity: 1
      }
    }

    /* Animation when product is added to wishlist */
    ooo-wl-wishlist-button button[aria-busy="true"][aria-checked="true"] svg {
      animation: pulse 0.3s cubic-bezier(.13, -0.3, .2, 1.91);
    }

    @keyframes pulse {
      0% {
        transform: scale(0.9);
      }

      50% {
        transform: scale(1.2);
      }

      100% {
        transform: scale(1);
      }
    }
  </style>

  <!-- INSERT CODE HERE -->

  <div class="product-gallery__image-list">
....

Note: You can adjust the top and right CSS values to position the icon exactly where you want.

❤️ Step 3 - Add the heart icon in the icon files

In the code editor, open the file snippets/icon.liquid
Add this code below the {%- case icon -%} tag:

...

{%- case icon -%}
  {%- comment -%} UI {%- endcomment -%}
  {%- when 'heart' -%}
    <svg aria-hidden="true" focusable="false" fill="none" width="{{ width | default: 24 }}" class="{{ class | strip }}" viewBox="0 0 24 24">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M11.8482 21.0168C9.19102 19.8759 5.28668 16.1772 3.59901 13.4543C1.5836 10.2027 1.66699 7.42205 2.78053 5.5474C4.68111 2.34888 9.35958 1.94464 12.0001 5.58663C14.6406 1.94489 19.319 2.34863 21.2194 5.54765C22.3332 7.42231 22.4163 10.2029 20.4009 13.4546C18.6346 16.304 14.779 19.8891 12.0001 21.0818L11.8482 21.0168Z" stroke="currentColor" stroke-width="{{ stroke_width | default: settings.icon_stroke_width }}" stroke-miterlimit="10" stroke-linecap="round"/>
    </svg>

...

This will ensure the heart icon is available in your icon list.

👀 Step 4 — Save and Preview

Once you save the file and reload your product page, you should see the heart icon overlaid on the product image.

Clicking the heart will add or remove the product from the wishlist.
When active, the icon is filled; when inactive, it’s outlined.

🚀 Wrapping Up

That’s it! 🎉 You’ve successfully added a wishlist heart icon inside the product image on the Prestige theme.

Wishlist Button Web Component for Shopify 🛍️

Fabien Sebban — Wed, 17 Sep 2025 13:14:27 +0000

If you’re a Shopify dev or agency, you know how often clients ask for wishlist functionality. It’s a feature that boosts engagement, gives shoppers more flexibility, and can increase sales — but building it in a way that keeps things performant and customizable often feels like walking a tightrope.

That’s exactly why we built the new web component for Wishlist Power. Here’s what it does, how it works, and why agencies are going to love it.

✅ What it offers

Drop-in integration — place the component in product pages, collection's product cards or even the home page without writing a line of JavaScript.
Full styling control — you manage the HTML and CSS, so it looks exactly like the rest of the store.
Variant awareness — track variant IDs or let the component detect variant changes automatically.
Accessibility built in — attributes like aria-checked and aria-busy handled automatically, so you can design and style without losing usability.
Variant count & warning — built-in support for showing how many variants of the same product a customer already has in their wishlist, plus a warning message to indicate the customer already has another variant of the same product in their wishlist.

📚 Basic Usage Example

Here’s a minimal example to get started:

<ooo-wl-wishlist-button product-id="{{ product.id }}" handle="{{ product.handle }}" loading>
  <button type="button">
    <span class="ooo-wl-wishlist-button-add">Add to wishlist</span>
    <span class="ooo-wl-wishlist-button-remove">Remove from wishlist</span>
  </button>
  <p>You already have <span></span> variants in your wishlist.</p>
</ooo-wl-wishlist-button>

Here are the attributes to use in the web component:

product-id (required): the Shopify product ID
handle (required): the Shopify product handle
loading (required): ensures the button only appears once it’s ready
variant-id (optional): if used, must be updated manually when variant changes; otherwise, auto detection kicks in

🎨 Styling & Attributes

You can fully style the component with your theme’s CSS. Here are some examples:

/* Hides the button when it is loading */
ooo-wl-wishlist-button[loading] span {
  display: none;
}

/* Hide “Add” when product is already in wishlist */
button[aria-checked="true"] .ooo-wl-wishlist-button-add {
  display: none;
}

/* Hide “Remove” when product is not in wishlist */
button[aria-checked="false"] .ooo-wl-wishlist-button-remove {
  display: none;
}

/* Variant warning message */
[show-variant-warning="true"] p { display: block; }

/* Display count of variants already added */
[show-variant-warning="true"] p span::before {
  counter-reset: count var(--ooo-wl-variants-added-count);
  content: counter(count);
}

Here are the attributes that are automatically updated in the <ooo-wl-wishlist-button> web component :

show-variant-warning: toggles display of warning if needed
--ooo-wl-variants-added-count: number of variants already added

And here are the attributes that are automatically updated in the <button> tag placed inside the <ooo-wl-wishlist-button> web component:

aria-checked: whether the product/variant is in the wishlist
aria-busy: indicates loading state

⚠️ Notes & Best Practices

If you use variant-id, remember: variant detection won’t automatically update when variant changes; you’ll need to handle that manually.
Works out of the box with Wishlist Power’s backend — no extra setup needed beyond adding the component.
Because styles are not encapsulated, test your overrides across theme templates (product, collection, etc.).

🛠 Why This Matters for Agencies

You get maximum flexibility to design the wishlist exactly as your client wants, without being constrained by embeddable widgets that don’t match the store’s style.
Speeds up development time — once you have the component live, setup on other pages (collection cards, product pages, landing pages) becomes much faster.
Keeps the performance impact low, since you control the CSS and loading logic.

If you want to try it out, get started with the official documentation.

Would love to hear from devs who build custom themes — what tweaks you’d find helpful, or what you’d want to see in future versions. Let’s make wishlist integration a win-win.

Forem: Fabien Sebban

How to Add a Wishlist Heart Icon Inside the Product Image on Fabric Theme?

🎯 Final Result

📝 Step 1 — Open snippets/product-media-gallery-content.liquid

🔧 Step 2 — Insert the Wishlist Button

❤️ Step 3 - Add the heart icon in the icon files

👀 Step 4 — Save and Preview

🚀 Wrapping Up

How to Add a Wishlist Heart Icon Inside the Product Image on Horizon Theme?

🎯 Final Result

📝 Step 1 — Open snippets/product-media-gallery-content.liquid

🔧 Step 2 — Insert the Wishlist Button

❤️ Step 3 - Add the heart icon in the icon files

👀 Step 4 — Save and Preview

🚀 Wrapping Up

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

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

🚀 Why use a count bubble?

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

Example usage

👍 Why this is better than custom JS or jQuery badges

🧪 Tips & best practices

🖥️ Works with Any Shopify Theme

🔗 Related Resources

How to Add a Wishlist Heart Icon Inside the Product Image on Focal Theme?

🎯 Final Result

📝 Step 1 — Open snippets/product-media.liquid

🔧 Step 2 — Insert the Wishlist Button

❤️ Step 3 - Add the heart icon in the icon files

👀 Step 4 — Save and Preview

🚀 Wrapping Up

How to Add a Wishlist Heart Icon Inside the Product Image on Prestige Theme?

🎯 Final Result

📝 Step 1 — Open snippets/product-gallery.liquid

🔧 Step 2 — Insert the Wishlist Button

❤️ Step 3 - Add the heart icon in the icon files

👀 Step 4 — Save and Preview

🚀 Wrapping Up

Wishlist Button Web Component for Shopify 🛍️

✅ What it offers

📚 Basic Usage Example

🎨 Styling & Attributes

⚠️ Notes & Best Practices

🛠 Why This Matters for Agencies

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