[ADVANCED] Wishlist button web component

The <ooo-wl-wishlist-button> component lets you easily add a wishlist button to any product page or collection page without writing custom JavaScript. It’s lightweight, fully customizable, and designed to integrate seamlessly with your Shopify theme.

Basic usage

<ooo-wl-wishlist-button product-id="{{ product.id }}" handle="{{ product.handle }}" variant-id={{ variant_id }} 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>

Styling

By default, this component comes with no shadow DOM or encapsulated styles. That means you’re free to fully control the look and feel with your theme’s CSS.

Example:

/* Loading state */
ooo-wl-wishlist-button[loading] span {
  display: none;
}
      
/* State for product is in wishlist */
button[aria-checked="true"] .ooo-wl-wishlist-button-add {
  display: none;
}

/* State for product is NOT in wishlist */
button[aria-checked="false"] .ooo-wl-wishlist-button-remove {
  display: none;
}

/* Variant warning */
ooo-wl-wishlist-button p {
  display: none;
}

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

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

Attributes

Required

• product-id

  The Shopify product ID.

• handle

  The product handle (used to fetch product information).

• loading

  Must be set initially. The button will only be shown once it’s ready.

Optional

• variant-id

  A specific variant ID to track.

  ⚠️ If set, the button will not automatically update when the variant changes — you must update this attribute manually.

  If not set, the variant will be detected from the URL or product form.

Attributes set by the component

The component automatically manages the following attributes on the <button> :

• aria-checked

  Indicates whether the product/variant is in the wishlist (true / false).

• aria-busy

  Set while the button is loading.

• show-variant-warning

  Indicates whether a variant warning message should be shown. This message can be shown to indicate the customer another variant of the same product has been added to the wishlist.

• --ooo-wl-variants-added-count (CSS variable)

  Contains the number of variants already added to the wishlist. Useful for conditional styling.

Variant Warning

If a customer tries to add the same product with multiple variants, you can display a warning message using the built-in show-variant-warning attribute. Example:

<p>You already have <span></span> variants in your wishlist.</p>

The <span> will automatically display the count of variants in the wishlist.

Notes

• This component is designed to give developers maximum flexibility while keeping the setup as simple as possible.
• Since styles are not encapsulated, make sure to test your CSS overrides across different parts of your theme.
• Works seamlessly with Wishlist Power’s backend — no additional setup required.