Advanced design

Plan: Pro and up. Every control on this tab needs Pro or Premium.

The Advanced tab holds four extras: your own icon, a save animation, social proof and custom CSS. On Free and Starter each section shows a Pro badge and its controls are disabled, with a See plans link. Typography and colours are on the Button tab, not here.

Your own icon

Upload an SVG to replace the built-in icons on the product page button and card hearts. Like the built-in icons, it is outlined in your Icon color and filled in your Icon color when saved.

1. Drop an SVG file on Upload an SVG icon, or click it to choose one.
2. Cove cleans the file and shows your icon next to a Remove icon button. If anything was removed, it lists it (“Removed from the SVG: …”).
3. Icon on the Button tab switches to Your own icon (SVG). Click Save.

What Cove keeps

Cove never stores or shows your file as it is. It reads the shapes and rebuilds the icon from them:

• Kept: paths, circles, ellipses, rectangles, lines, polygons, polylines and groups, with their geometry, transforms and stroke settings (width, line caps and joins, dashes, opacity).
• Dropped: everything else, including scripts, links, styles, images, text, gradients, masks, <use> references, comments, event handlers, classes and IDs.
• Colours: all fill and stroke colours are dropped so your design colours apply. Parts marked fill="none" or stroke="none" stay unfilled or unstroked (except on the outer <svg>).

Limits

Limit	Value
File size	64 KB
Shapes and groups	50
Path data per shape	6,000 characters
Points per polygon or polyline	4,000 characters
Cleaned icon	12 KB

A file over a limit, or one with no shapes Cove can use, is refused with a message saying why, for example “The SVG is too detailed for an icon. Simplify it and try again.”

Remove icon deletes the uploaded icon and switches back to the heart. Reset to default keeps your file but switches back to the heart.

Animation and social proof

Save animation

Control	What it does on your store	Default
Save animation	A short animation on the button or heart the shopper just pressed: None, Pop, Pulse or Burst. It never plays on page load, and not at all for shoppers who ask their device for reduced motion.	None
Play in preview	Plays the animation in the preview beside the controls.

Social proof

Control	What it does on your store	Default
Show how many shoppers saved a product	Adds a line under the product page button, such as “Saved by 12 shoppers”, once enough shoppers have the product saved. Nothing about who saved it is shown.	Off
Show from this many shoppers	Shown once social proof is on: the line appears only from this many shoppers, 2 to 1,000.	3

How it works:

• Counts are updated nightly, and straight after you save the design with social proof on. The number on a product doesn’t change the moment a shopper saves it.
• Counts cover your 1,000 most-saved products that at least 2 shoppers have saved.
• The line is part of the page Shopify serves: shoppers’ browsers make no extra request for it.
• Change its wording, or translate it, with the Social proof label on the Labels tab. [count] is replaced by the number.

Custom CSS

Up to 10 KB of CSS to restyle Cove’s own elements on your store. It can’t style anything else on your pages.

As you type, Cove cleans the CSS, applies it to the preview, and lists anything it won’t apply under “Not applied: …”. What’s saved is the cleaned CSS.

Selector rules

• Every part of every selector needs its own Cove class (a class starting with .cove-), for example .cove-btn, .cove-product .cove-proof, .cove-wl-card__title. Classes inside :not(), :is() or :has() don’t count.
• .cove-card can only be the outer part. Cove adds that class to your theme’s own product cards, so .cove-card .cove-heart works but .cove-card on its own doesn’t.
• Selectors that reach outside Cove are dropped: body .cove-btn, .cove-btn span, .cove-btn + div, *, ID selectors.

The stable class names are listed in styling hooks.

What is removed

• Every at-rule except @media, @supports and @keyframes, so @import, @font-face, @layer and the rest are dropped. @keyframes names must start with cove-.
• url(), image-set(), expression() and any other function not on Cove’s list. Colour, maths, gradient, transform and filter functions such as var(), calc(), rgb(), linear-gradient() and translate() are allowed.
• The behavior and -moz-binding properties, javascript: and data: values, backslash escapes, nested rules and comments.
• Custom properties other than --cove-* ones.

CSS over 10 KB, CSS that can’t be read, or CSS containing < is refused with a message on the field, and the design can’t be saved until you fix it.

If you move down from Pro

Nothing you saved on this tab is deleted, but it stops showing on your store while your plan doesn’t include it:

Saved extra	On your store below Pro
Your own icon	The heart shows instead.
Save animation	No animation.
Social proof	The line is hidden.
Custom CSS	Not applied.

The tab shows a Paused on your store banner naming what is paused. Those controls become read-only, but you can still switch them off: choose another icon or Remove icon, set the animation to None, untick social proof, or click Remove custom CSS. Everything else in the Studio stays editable. When you’re on Pro again, your saved extras come back on your store without saving anything, as soon as Cove picks up the new plan (the next time you open Cove, or overnight).

See changing plans.