Button and icon
Plan: every plan, including Free. Choosing your own uploaded icon needs Pro and up.
The Button tab (page heading “Button and icon”) sets how the product page wishlist button and the hearts on product cards look. Its colours and fonts also apply to the save message, the wishlist link and the wishlist pages.
Button and icon
Section titled “Button and icon”| Control | What it does on your store | Default |
|---|---|---|
| Icon | The icon on the button and card hearts: Heart, Star, Bookmark, Bag or Sparkle. Your own icon (SVG) uses the icon you uploaded on the Advanced tab (Pro); it’s greyed out until you upload one. | Heart |
| Button style | The product page button: Icon only, Icon and label, Text only or Pill button (icon and label in a rounded button with a border). Card hearts are always icon only. | Icon and label |
| Full-width product page button | Stretches the product page button to the full width of its column, like the theme’s Add to cart. | Off |
| Icon size | Size of the icon, 16 to 48 px. On mobile, card hearts use the size set on the Cards tab. | 24 px |
| Corner radius | Roundness of corners, 0 (square) to 24 px: card hearts, the product page button, the Notify me button and field, and cards on the wishlist pages. | 8 px |
| Shadow | Adds a soft shadow under card hearts. | Off |
Colors
Section titled “Colors”Every colour is a six-digit hex value, for example #1a1a1a. Type it or use the colour picker.
| Control | What it colours | Default |
|---|---|---|
| Icon color | The icon’s outline when the product isn’t saved. | #1a1a1a |
| Icon color when saved | The filled icon once saved. Also the background of the wishlist link’s count badge and the “Price dropped” badge. | #d72c0d |
| Icon color on hover | The icon when the shopper points at it. | #1a1a1a |
| Background | Behind the icon on card hearts and the floating wishlist button. | #ffffff |
| Border | The border of card hearts, the Pill button, the floating wishlist button and cards on the wishlist pages. | #e3e3e3 |
| Message background | The save message (the toast). | #1a1a1a |
| Message text | Text in the save message. | #ffffff |
| Button label | The product page button’s text. Ticked “Button label uses the theme’s text color” by default; untick it to choose a colour. | Theme’s text colour |
| Button fill | The product page button’s fill. Ticked “No button fill” by default; untick it to choose a colour. | No fill |
Below the colours, a Low contrast warning lists any pair that is hard to read, with its ratio and the minimum to aim for: 3:1 for the icon, 4.5:1 for text. See contrast warnings. You can still save.
Typography
Section titled “Typography”| Control | What it does | Default |
|---|---|---|
| Font | Font for buttons, messages and the wishlist pages. Theme font uses your theme’s. System sans-serif, System serif, Monospace and Rounded use the shopper’s device fonts, so nothing is downloaded. Shopify font library (pick it in the theme editor) uses the font chosen in the app embed’s Cove text font setting. | Theme font |
| Heading font | Font for the heading and empty-state title on the wishlist and shared pages. Same choices; the library font comes from the embed’s Wishlist page heading font setting. | Theme font |
| Letter case | As typed or Uppercase, for button labels and messages. | As typed |
| Letter spacing | Extra space between letters, 0 to 0.2 em. 0 keeps your theme’s spacing. | 0 em |
| Text size | Scales Cove’s text, 0.8× to 1.4×. | 1× |
When you choose Shopify font library, a note links to the theme editor: open App embeds › Cove Wishlist and pick the font under Fonts. Shopify loads it from its own font library. The Studio preview shows a stand-in font. Cove never loads a font from any other address.