Wishlist Button Web Component for Shopify 🛍️

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.

Comments

[Yossi]

Great work, this is a really clean and flexible approach to integrating a wishlist button in Shopify. I like how you’ve kept the markup and styling under the store’s control, that makes it easy to adapt to any theme.

[Karla Stromberg]

Very well explained!

[Céline Lamotte]

Great article, very clear and well-structured!
I really like the “drop-in” approach of the web component and how you handle accessibility and variants.
Thanks for sharing

[Axel Bouaziz]

Great write-up!
Love seeing our wishlist component explained so clearly. Thanks for highlighting the key features.