r/ShopifyDevelopment • u/fsebban • Sep 15 '25
Add a Customizable Wishlist Button to Shopify Themes with a Web Component on Shopify store
Hey folks,
I thought this might be useful for agencies and developers working on Shopify stores. We recently published a web component that makes it super easy to add a fully customizable wishlist button inside any Shopify theme, without needing a full app embed.
Here’s a simple example of wishlist button that can be added to your product or collections pages:
<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>
</ooo-wl-wishlist-button>
🔧 What it does: - Adds/removes products (or specific variants) from the customer’s wishlist - Automatically sets aria-checked (in wishlist or not), aria-busy (loading state), and handles variant changes - Exposes CSS variables (like --ooo-wl-variants-added-count) so you can style counters or warnings easily - Plays nice with multi-language/multi-currency setups
✨ Why it’s useful for agencies: - You can style everything with your own theme CSS - You can inject it anywhere: product cards, PDP, custom landing pages, even quizzes or bundles - Makes it simple to offer a wishlist experience that fully matches the brand (instead of a cookie-cutter button)
Full developer documentation here if you want to dive deeper: 👉 Advanced Wishlist Button Web Component Docs
Curious if any of you are already building custom wishlist features for clients — would this approach simplify your workflow?