BrandKit
Style your review widgets, review forms, and emails in one place: import your brand from your website, then edit fonts, colors, logos, and components.
BrandKit is your brand's look for review widgets, review forms, and emails: your fonts, logos, and color schemes, and how buttons, cards, popups, and form fields look. You change it in a draft, then publish it to all of them at once.
Navigate to Settings → BrandKit to manage your BrandKit.
| Specification | Limit |
|---|---|
| BrandKit | One per workspace |
| Logos | One light and one dark logo, PNG, up to 5 MB each |
| Custom fonts | .otf, .ttf, .woff, or .woff2, up to 5 files per upload |
| Icons | SVG with a viewBox, up to 16 KB each |
| Color scheme names | Up to 40 characters |
| Website imports | One at a time, and up to 20 per workspace in 24 hours |
What BrandKit styles
| Where | What comes from BrandKit | Set on the item itself |
|---|---|---|
| Review widgets | Fonts, stars, cards, buttons, tabs, form fields, icons, and the colors of the widget's color scheme | Layout, copy, and Color scheme. See Review widget settings |
| Popups that review widgets open, such as All reviews | The same, in the color scheme, position, and width set under Popups | Nothing |
| Review forms | Fonts, form fields, buttons, stars, and where forms open, in the Popups color scheme | Copy, steps, and which logo the company review form shows |
| Emails from your email templates | One color scheme, a logo, fonts, buttons, and cards | Copy and layout choices |
These don't use BrandKit:
- Loyalty program widgets: They use your Loyalty theme
- UGC galleries, cards, and the UGC popup: They have their own design settings. See Gallery design.
- Review blocks in Shopify customer accounts: They use Shopify's own style. See Shopify customer accounts.
BrandKit and the Loyalty theme
BrandKit and the Loyalty theme are separate styles. The Loyalty theme, at Settings → Loyalty → Theme, styles your loyalty program widgets.
- Where BrandKit starts: Cevoid creates your BrandKit the first time someone opens Settings → BrandKit, as a copy of your Loyalty theme, so review widgets and emails look the same as before. Until then, they use your Loyalty theme's styling, or Cevoid's defaults. A new workspace gets its BrandKit imported from its website.
- Separate from then on: A change to one doesn't change the other, and each has its own color schemes
- Shared fonts: A custom font you upload on either page shows in both. See Custom fonts.
- Separate imports: A website import fills only your BrandKit. To style program widgets from your website, see Import a theme.
Import your BrandKit from your website
A BrandKit import builds a draft from your website. Cevoid's AI explores your site in a browser, product pages and phone-sized pages included, and writes your fonts, a Primary color scheme, Secondary and Accent schemes when your site has them, and the look of your buttons, form fields, and cards. Fonts your site uses that aren't in Cevoid's font list are added to your custom fonts.
The import replaces your current draft, including changes you haven't published. Your published BrandKit stays the same until you publish.
Automatic import for new workspaces
When a workspace is created with a store domain, from Shopify or entered at signup, Cevoid imports its BrandKit from that domain. For a workspace created with an email address, the import starts once its owner logs in with the emailed code or with Google.
- Published for you: When the import could review your live storefront, Cevoid publishes it, so review widgets and emails match your store from the start
- Left as a draft: Otherwise, such as for a password-protected storefront, the draft waits on Settings → BrandKit, marked Draft
- Never over your own: The automatic import doesn't run once you've published a BrandKit or finished an import of your own
Run an import
- Navigate to Settings → BrandKit
- Click Import website
- Enter your store's address in Website URL, such as
your-store.com - Click Import website. The import shows each step, such as Exploring website and Matching fonts, and usually takes 2 to 3 minutes. You can close the dialog while it runs.
- Click Customize when the import says your draft is ready. The draft opens in the editor.
- Click Publish once the draft looks right
Import website is also in the editor's header, once your changes are saved. While an import runs, the draft is locked: you can look around the editor, but not change, save, or publish it. If an import can't finish, click Import website to try again.
Import a password-protected storefront
A Shopify store that isn't open to visitors yet, such as a development store, shows a password page, so the import can't see your storefront. Save the password visitors use to open your store: click Add storefront password under Store password protected? in the import dialog, or in the alert Your storefront seems to be password protected on Settings → BrandKit after an import stopped there. See Check a password-protected storefront.
If your workspace's automatic import hasn't been published, saving the password restarts it. Otherwise, click Import website again.
Edit your BrandKit
The BrandKit editor shows your draft beside a live preview, in the color scheme you select in the menu at the top.
- Navigate to Settings → BrandKit and click Customize
- Click Variables or Color schemes
- Click a panel, such as Typography, or a color scheme. The preview shows what it styles, such as a sample email for Emails.
- Set the panel's settings or the scheme's colors
- Click Save draft
- Click Publish to use your changes on your store and in your emails
From another editor: Click BrandKit in the rail on the left of the review widget, review form, or email template editor, or Edit scheme in a review widget's Color scheme. Those editors show your published BrandKit, so your draft shows there once you publish.
Save, publish, or reset your draft
Your BrandKit has a draft, which you edit, and a published version, which your store and emails use. Settings → BrandKit marks unpublished changes Draft.
| Button | What it does |
|---|---|
| Save draft | Saves your changes to the draft. Your store and emails don't change |
| Publish | Makes the saved draft your published BrandKit. Available once your changes are saved |
| Reset draft | Discards every change since you last published, after you confirm with Reset draft. Your published BrandKit stays the same |
After you publish:
- Review widgets, their popups, and review forms show the new look from the next page load on your store
- Every email Cevoid sends from then on uses it, including emails waiting in Outbox
- Widgets and emails that used a renamed scheme follow its new name, and widgets that used a deleted scheme switch to your default scheme. See Color schemes.
Variables
The Variables tab of the BrandKit editor sets your fonts, logos, icons, and the shape of each component. Components take their colors from the color scheme they show in.
At the top of the tab, Density (Compact, Normal, or Spacious) and Radius (Sharp, Soft, Round, or Pill) set the spacing and corner rounding of every component at once. A component's own panel then sets exceptions.
| Panel | What it sets |
|---|---|
| Logo | Your light and dark logo. See Logo |
| Typography | Headings and Text: Font, Weight, Letter spacing, Line height, and a size for each step, plus Text transform for headings |
| Icons | The icons in widgets and forms. See Icons |
| Animation | Ease, how components move: Smooth (the default), Snappy, Gentle, Springy, or Mechanical |
| Buttons | The font and text style, Border width, and the Padding, Border radius, and Font size of Medium and Small buttons |
| Badges, Cards | Padding and Border radius, plus Font size for badges |
| Tabs | Style, Pills or Line, with its padding, font size, and corners or indicator |
| Popups | The colors, backdrop, and corners of popups, and where they open. See Popups |
| Avatars | Fallback for reviewers without a photo, Initials or Icon, and Border radius |
| Carousel navigation | The Shape of the previous and next arrows, Round or Match buttons, and their Icons |
| Stars | Shape, such as Classic or Sparkle, and Style: Star, with Unfilled stars (Solid or Outline), or Boxed, with Box radius |
| Meters | The bars in a rating breakdown |
| Inputs | Border, Full or Bottom, Padding, Border radius, Border width, and Font size |
| Checkboxes, Switches, Sliders | Their sizes and corner radius, and the border of checkboxes and slider handles |
| Dropdowns | The Trigger, which follows your inputs until you change it, and the Menu |
| Scale questions, Centered range questions | The track, stops, and handle or marker of these review question types |
| Emails | The color scheme and logo of your emails. See Emails |
Logo
Under Logo, upload your logo in two versions, so it stays readable on any background: Light logo, for dark backgrounds, and Dark logo, for light backgrounds. Use a PNG with a transparent background. Your emails and the company review form can show either one: see Review forms.
Icons
Under Icons, click an icon to see where it shows, then paste its SVG code or click Upload file to replace it. Icons take the color of the scheme they show in, so simple solid or outline icons work best. Reset to default returns one icon to Cevoid's, and Reset all icons returns them all.
Popups
Under Popups, Color scheme colors every popup, whatever scheme the widget behind it uses. Backdrop is the color laid over the page behind a popup, and Border radius rounds its corners.
Content popups, such as All reviews, and Forms, the review forms, each open where you set them:
| Setting | Options | Content popups start on | Forms start on |
|---|---|---|---|
| Position | Left, Center, Right, or Bottom | Center | Right |
| Max width or Width | 320 to 2,000 px. A centered form keeps its own width | 1,600 px | 480 px |
| Inset | The gap to the screen edge, 0 to 30 px. Not for Center | 0 px | 0 px |
Phones show popups differently: see Customer experience.
Emails
Under Emails, choose how every email your workspace sends looks.
| Setting | What it does |
|---|---|
| Color scheme | The one scheme every email uses. Emails use Primary until you choose another |
| Logo | Workspace: your square workspace logo beside your workspace name, or the name alone without a logo. Light or Dark: the logo you uploaded under Logo |
| Logo width | How wide a light or dark logo shows, from 24 to 400 px |
Emails also take your heading and text fonts and the shape of your buttons and cards. Email apps that can't load your fonts show your fallback fonts.
Color schemes
A color scheme is a named set of colors for a section and everything in it: text, buttons, cards, form fields, stars, and more. Each review widget uses one, your popups use one, and your emails use one. A new BrandKit has your Loyalty theme's schemes, by default Primary, Secondary, Dark, and Accent. Primary is your default scheme.
Edit a color scheme
- Navigate to Settings → BrandKit and click Customize
- Click Color schemes
- Click the scheme. Its colors open in groups, such as Section, Primary button, and Cards.
- Click a color and pick a new one
- Click Save draft
- Hover colors follow their resting color until you pick one of your own
- Inside cards: Click Add override under Cards to give avatars, badges, tracks, or buttons different colors on cards than on the section
Add, rename, or delete a color scheme
Click Create new under your schemes on the Color schemes tab, or click ... next to a scheme.
| Action | What it does |
|---|---|
| Create new | Adds a scheme with neutral colors, once you name it and click Create scheme |
| Duplicate | Adds a copy of the scheme, named Copy of the original unless you change it, once you click Duplicate scheme |
| Rename | Renames the scheme. Widgets and emails that use it follow the new name when you publish |
| Delete | Removes the scheme once you click Delete scheme. Widgets that use it switch to your default scheme when you publish |
Create new and Duplicate change your draft like any edit, so click Save draft afterwards. Rename and Delete save the draft right away, so save your other changes first. You can't delete your last scheme, or the scheme your popups or emails use: select another one for them first. A new scheme shows in a review widget's Color scheme once you publish.
Custom fonts
Custom fonts are font files you upload, for a font that isn't in the editor's font list. Popular fonts, including Google Fonts, are already there. Your custom fonts are shared with your Loyalty theme.
- Navigate to Settings → BrandKit
- Click Upload font under Custom fonts
- Select your font files. Each font shows in the list with a sample.
The font then shows in every Font menu in the editor, which also has Upload font. To rename a font, click ... in its row and select Edit name. To remove it, select Delete and click Remove font: settings that used it return to the default font.
Customer experience
Shoppers see your BrandKit in review widgets, the popups those open, and review forms, and customers see it in every email Cevoid sends them.
- Popups on phones: A centered popup opens as a sheet from the bottom, and a popup set to open from the left or right fills the screen width
- Form fields on phones: Text in a field is at least 16 px, so the page doesn't zoom in when a shopper taps it