Brand Kit

Prev Next

Products


Reviews


Loyalty & Referrals

Supported plans

All Plans

eCommerce Platform

Shopify, Shopify Plus, Adobe Commerce (Magento), BigCommerce, WooCommerce, Volusion, Salesforce Commerce Cloud, Custom

Getting Started

The Brand Kit is the foundation of your on-site experience. Setting your brand colors and fonts here ensures your on-site widgets feel consistent with the rest of your site.

To reach the Brand Kit settings:

Reviews

  1. From your Reviews Admin, go to On-Site Widgets.

  2. Click Edit your brand kit.

Check the Reviews Customization Playbook to learn more.

Loyalty

  1. From the Loyalty Admin, go to Settings.

  2. Click on Brand Kit.

Check the Loyalty Customization Playbook to learn more.

Important

The Brand Kit applies to on-site widgets, not to emails.

Colors

You can define the core colors used across your on-site widgets:

  • Accent color 1 – Used in multiple places, such as the background of solid buttons.

  • Accent color 2 – Used for interactive elements like campaign hover background.

  • Solid button label – Controls the text color for solid background buttons.

  • Background color 1 – Sets the main background color for widgets.

  • Background color 2 – Defines the secondary background color.

  • Text color – Determines the primary color for text.

  • Outline button color – Defines the text color for buttons with a transparent background.

  • Reviews star rating – Controls the color of the stars in review widgets.

Fonts

This is where you can select fonts for your on-site widgets from a pre-defined list, or upload your own to match your brand’s typography.

Web fonts

You can set up two fonts in the Brand Kit:

  • Primary font – for titles and headers

  • Secondary font – for body text, buttons, and general content

Our font dropdown includes a wide selection of commonly used fonts to get you started quickly. Before uploading your brand’s custom fonts, we recommend browsing the list to see if your preferred typeface is already available. This helps you set up faster while ensuring a consistent on-site experience.

Adding a Custom Font

If your brand font isn’t listed, you can add it in one of two ways.

  1. Upload the font file (recommended):

    • Upload multiple file types (such as .woff, .ttf, .otf) to ensure cross-browser support and different font weights.

    • Assign a clear name to your font (we recommend using the format yotpo-font_name to ensure it doesn’t clash with your site’s font naming).

  2. Add a code snippet or URL:

    • Copy the link or @font-face declaration directly from your website’s code.

    • Paste it into the Brand Kit so it can be applied across Yotpo widgets.

Once uploaded or linked, the font will appear in the dropdown list and can be applied throughout your widgets.

FAQ

Can I use more than two fonts in the Brand Kit?

No, you can set one primary and one secondary font. This ensures consistency and performance across widgets. There’s also the option to add another font directly in the CSS editor if necessary.

Do Brand Kit changes apply retroactively to all widgets?

Not automatically. Updates you make in the Brand Kit will only apply going forward. However, for any pre-existing modules, you can re-apply the brand kit at any time, so make sure updates are applied.

Can I apply different Brand Kits to Loyalty and Reviews?

No, the Brand Kit is shared to maintain consistency across experiences.

Why does the Brand Kit not apply to the Emails?

Emails use a separate design system managed under Email Settings.