Custom elements

Plan: every plan, including Free.

For page builders, custom sections and anywhere the app’s theme blocks can’t go: three HTML elements you write straight into your theme’s markup. They use your Design Studio look, labels and translations, and behave exactly like Cove’s own buttons: same saved state, toast, Undo and list picker.

Turn them on

The elements load only when you ask for them:

1. In your Shopify admin, open Online Store › Themes › Customize.
2. Open App embeds and select Cove Wishlist.
3. Under Advanced, tick Load custom elements, then save.

The setting is off by default, so stores that don’t use the elements load nothing extra. The app embed itself must be on: the elements run on Cove’s main storefront script, and without it (or while the app is paused on your store) they render nothing.

<cove-button>

A wishlist button for exactly one product, or one variant of it.

Attribute	Required	What it does
product-id	yes	The numeric Shopify product ID. Without a valid one, the element renders nothing.
variant-id	no	A numeric Shopify variant ID to save that variant. Left out (or not a valid ID), the button saves the product without a variant.
button-style	no	icon-label (default), icon, text, pill or outline. Anything else falls back to icon-label.

<cove-button product-id="8123456789"></cove-button>
<cove-button
  product-id="8123456789"
  variant-id="45123456789"
  button-style="icon"
></cove-button>

• It saves exactly what its attributes say. Unlike the product page button, it doesn’t follow the variant picker on the page.
• The label switches between your add and saved labels (“Add to wishlist” and “Saved to wishlist” by default, set under Labels in the Design Studio); the icon is your design’s icon. The icon style has no visible text and is named by the add label for screen readers.
• Changing an attribute re-renders it, so a page builder or your own script can point it at another product.
• In pixel events its saves report source: "product_button".

<cove-count>

The number of saved items, hidden at 0. An item in two lists counts once.

<cove-count></cove-count>

<cove-link>

A link to the wishlist page, with the count badge.

<!-- Your design's icon, with the wishlist label for screen readers. -->
<cove-link></cove-link>

<!-- Your own content becomes the link's content. -->
<cove-link>My wishlist</cove-link>

Empty, it shows your design’s icon. Anything you put inside it (text, your own icon) becomes the link’s content instead. It goes to the same page as Cove’s wishlist link: the Wishlist page URL set in the app embed (under Wishlist link) when it’s a path on your store, otherwise the app’s wishlist page at /apps/wishlist.

Styling

The elements build the same markup as Cove’s own controls, so the styling hooks apply: <cove-button> holds a cove-btn (with cove-btn--pill or cove-btn--outline for those styles), <cove-count> holds a cove-count cove-count--inline, and <cove-link> holds a cove-launcher cove-launcher--element link (plus cove-launcher--text when it has its own content).

cove-link .cove-launcher--text {
  font-weight: 600;
}

What they don’t do

• They never fetch anything of their own and never load another script: state comes from Cove’s main script, which shoppers with nothing saved don’t even call the server for.
• They write text with textContent only, never HTML.
• They work in your theme’s markup only. For your own button logic, use the JavaScript API instead.