Styling hooks

Plan: every plan, including Free, from your theme’s CSS. Custom CSS in the Design Studio is Pro and up.

Restyle Cove with these custom properties and classes. They are stable within version 1: new ones may be added, but renaming or removing one only happens in a new major version, announced in these docs. Anything else about the markup (element order, wrappers, attributes not listed here) can change in any release, so target the hooks, not the structure.

Where to put your CSS

Your theme’s CSS. Any stylesheet in your theme can override the custom properties or style the classes. This works on every plan. Most of what you need (colours, sizes, corners, fonts, toast colours) is already in the Design Studio, so start there and use CSS for what it doesn’t cover.
Custom CSS in the Design Studio (Pro and up). Added on the Advanced page and saved with your design. Cove rebuilds it rather than passing it through: every selector must carry a cove-* class of its own (for example .cove-btn.is-saved .cove-icon), so it can’t restyle anything outside Cove. That means you can’t set the custom properties on :root there; set them on a Cove element instead, such as .cove-wl { --cove-wl-cols: 3; }. The Advanced page lists the full rules.

/* Theme CSS: a rounder, larger card heart everywhere. */
:root {
  --cove-radius: 999px;
  --cove-size: 22px;
}

/* Theme or custom CSS: a saved product button gets a filled look. */
.cove-btn.is-saved {
  background: var(--cove-color-active);
  color: #fff;
}

/* Theme or custom CSS: two columns on the wishlist page on phones. */
.cove-wl {
  --cove-wl-cols-mobile: 2;
}

Custom properties

Set by the app embed on :root from the Design Studio (the wishlist grid ones on .cove-wl). Override one to change that value everywhere.

Property	What it is
`--cove-color`	Icon colour.
`--cove-color-active`	Icon colour when saved, and the count badge.
`--cove-color-hover`	Icon colour on hover (falls back to `--cove-color`).
`--cove-bg`	Background of card hearts and the floating wishlist link.
`--cove-border`	Border of the pill button, hearts and floating link.
`--cove-size`	Icon size.
`--cove-size-mobile`	Icon size below 750px.
`--cove-radius`	Corner radius of card hearts.
`--cove-card-offset`	Distance of a card heart from the card’s corner.
`--cove-font-scale`	Text size multiplier for the button, toast and social proof.
`--cove-font`	Font family, only when the design picks one.
`--cove-heading-font`	Heading font on the wishlist page, only when picked.
`--cove-label`	Button label colour, only when set.
`--cove-button-fill`	Button background, only when set.
`--cove-letter-spacing`	Letter spacing of button, toast and social proof text.
`--cove-toast-bg`	Toast background.
`--cove-toast-text`	Toast text colour.
`--cove-wl-cols`	Wishlist page grid columns (set on `.cove-wl`).
`--cove-wl-cols-mobile`	Wishlist page grid columns below 750px.

Classes

Buttons and hearts

Class	What it is
`cove-product`	Wrapper of the product page button block.
`cove-product--full`	Full-width product button.
`cove-btn`	Every wishlist button, including `<cove-button>`.
`cove-btn--outline`	Outlined button style.
`cove-btn--pill`	Pill button style.
`cove-btn__label`	The button’s text.
`cove-icon`	The heart (or custom) icon, an inline SVG.
`cove-proof`	Social proof line under the product button.
`cove-notify`	“Notify me when available” box under the product button.
`cove-notify__button`	The “Notify me” button.
`cove-notify__form`	The guest form (email + consent).
`cove-notify__field`	The email field’s label, around its text and the field.
`cove-notify__email`	The guest form’s email field.
`cove-notify__consent`	The consent tick and its text.
`cove-notify__submit`	The guest form’s submit button.
`cove-notify__note`	Confirmation or error text.
`cove-cart-save`	“Save for later” button on a cart line, cart page and drawer.
`cove-card`	Added to a theme product card that carries a heart.
`cove-heart`	Heart on a product card.
`cove-heart--top-right`	Heart position: top right.
`cove-heart--top-left`	Heart position: top left.
`cove-heart--bottom-right`	Heart position: bottom right.
`cove-heart--bottom-left`	Heart position: bottom left.
`cove-heart--overlay`	Heart over a wishlist page card’s image.

Wishlist link and count

Class	What it is
`cove-launcher`	Link to the wishlist page, including `<cove-link>`.
`cove-launcher--floating`	The floating round link.
`cove-launcher--header`	The link placed in the header.
`cove-launcher--element`	A `<cove-link>`.
`cove-launcher--text`	A `<cove-link>` with its own content.
`cove-count`	Saved-item count; hidden at 0.
`cove-vh`	Text for screen readers only (the wishlist link’s name, the compare-at price’s label).
`cove-count--inline`	The count inside `<cove-count>`, in line.

Toast and list picker

Class	What it is
`cove-toast`	The confirmation toast.
`cove-toast__link`	Links and buttons in the toast.
`cove-sheet`	The “Change” list picker overlay.
`cove-sheet__panel`	Its panel.
`cove-sheet__title`	Its title.
`cove-sheet__lists`	The list of lists.
`cove-sheet__item`	One list, with its tick box.
`cove-sheet__new`	The new-list form.
`cove-sheet__create`	Its create button.
`cove-sheet__close`	The close button.

Wishlist page

Class	What it is
`cove-wl`	The page (owner, guest or shared).
`cove-wl__head`	Title row, with “Add all to cart”.
`cove-wl__title`	Page title.
`cove-wl__intro`	Intro text.
`cove-wl__tools`	Row above the grid: list tabs, share and manage lists.
`cove-wl__actions`	Share and manage lists chips.
`cove-wl__notice`	“Link paused” notice.
`cove-wl__addall`	“Add all to cart” form.
`cove-wl__signin`	Sign-in prompt for guests.
`cove-wl__flagged`	“Needs attention” notice.
`cove-wl__grid`	The product grid.
`cove-wl__pages`	Pagination.
`cove-wl__loading`	Loading state of the guest page.
`cove-wl__empty`	Empty state.
`cove-wl__empty-title`	Empty state title.
`cove-wl__empty-badge`	Circle around the empty state illustration.
`cove-wl__empty-img`	Empty state image.
`cove-wl__empty-icon`	Empty state illustration, when no image is set.
`cove-wl__cta`	Empty state button.
`cove-wl-card`	One saved product.
`cove-wl-card__media`	Its image (`data-ratio`: square, portrait or natural).
`cove-wl-card__placeholder`	Image placeholder.
`cove-wl-card__badges`	Badges over the image.
`cove-wl-badge`	A badge.
`cove-wl-badge--drop`	“Price dropped” badge.
`cove-wl-remove`	Remove button over the image.
`cove-wl-card__body`	Vendor, title, variant and price.
`cove-wl-card__heading`	The card’s heading (h2), around the product title.
`cove-wl-card__title`	Product title.
`cove-wl-card__vendor`	Vendor.
`cove-wl-card__choice`	Variant slot: the saved variant or the variant chooser.
`cove-wl-card__variant`	Variant.
`cove-wl-card__price`	Price.
`cove-wl-card__cart`	Add-to-cart form.
`cove-wl-card__add`	Add-to-cart button.
`cove-wl-card__options`	Variant buttons (one option with up to six values).
`cove-wl-card__option`	One variant button.
`cove-wl-card__select-wrap`	Around a select.
`cove-wl-card__select`	Variant or list select.
`cove-wl-card__label`	Form labels.
`cove-wl-card__actions`	Card footer: note and “Move to”.
`cove-wl-card__note`	The note’s first line.
`cove-wl-note`	The note dialog.
`cove-wl-note__form`	Its form.
`cove-wl-move`	“Move to” form.
`cove-wl-link`	Text-style buttons (note, move, list and share actions).
`cove-wl-link--danger`	Delete list, stop sharing.
`cove-wl-lists`	List tabs.
`cove-wl-manage`	Manage lists chip and dialog.
`cove-wl-chip`	Small bordered controls (share, manage lists).
`cove-wl-ico`	Line icons in chips and buttons.
`cove-wl-share`	Share controls.
`cove-wl-share__open`	Opens the share dialog.
`cove-wl-share__live`	Dot on it while the link is live.
`cove-wl-share__hint`	Who can see the link.
`cove-wl-share__field`	Link field and Copy.
`cove-wl-share__row`	Email and share buttons.
`cove-wl-share__more`	Pause, replace, stop.
`cove-wl-dialog`	Share, manage lists, “Move to” and note dialogs.
`cove-wl-dialog__panel`	Its panel.
`cove-wl-dialog__head`	Title and close button.
`cove-wl-dialog__title`	Its title.
`cove-wl-dialog__x`	Its close button.
`cove-wl-dialog__choices`	The lists to move to.
`cove-wl-dialog__item`	One list to move to.
`cove-wl-dialog__count`	Its item count.
`cove-wl-dialog__actions`	Its buttons.
`cove-wl-dialog__foot`	Secondary actions under a rule.
`cove-wl-dialog__text`	What a confirm dialog’s action will do.
`cove-wl-confirm`	A confirm dialog (delete a list, new link, stop sharing).
`cove-wl-btn`	Buttons inside dialogs.
`cove-wl-btn--primary`	The main one.
`cove-wl-btn--danger`	A confirm dialog’s action that can’t be undone.
`cove-wl-field`	A dialog field with its button.
`cove-wl-field__label`	Its label.
`cove-wl-act`	One list or share action form.

States

Added and removed by Cove’s storefront script as things change.

Class	What it is
`is-saved`	On a button or heart whose item is saved.
`is-busy`	While a save or removal is in flight.
`is-toggled`	On the button the shopper pressed (save animations key on it).
`is-visible`	On the toast while it shows.
`is-ready`	On the guest wishlist page once loaded.
`is-unavailable`	On a wishlist card whose product can’t be bought.

Keep contrast in mind when you change colours: the Design Studio checks its own colours for contrast, but it can’t see your CSS. See accessibility.