# Loyalty theme

> Control the fonts, colors, and layout of your loyalty program widgets and challenges from one place.

Breadcrumb: BrandKit › Loyalty theme · Updated: 2026-10-17
Docs index: https://docs.cevoid.com/llms.txt

The Loyalty theme controls fonts, colors, and layout for your loyalty program widgets and challenges. Instead of styling each widget individually, you set your brand's visual identity once and it applies to all of them.

Navigate to [Settings → Loyalty → Theme](https://app.cevoid.com/settings/theme) to manage your Loyalty theme.

> [!NOTE]
> The Loyalty theme styles only loyalty program widgets and challenges. Review widgets, review forms, and emails are styled in your [BrandKit](https://docs.cevoid.com/brandkit.md) instead.

## Import a theme

Set up your Loyalty theme by importing it from your existing website. Cevoid's AI analyzes your site and applies matching fonts, colors, and styling automatically.

Click **Import** and select one of two options: **Import from Shopify** or **Import from website**. **Import from Shopify** shows only on workspaces whose ecommerce platform is Shopify. Fonts the import finds that aren't available yet are added to your [custom fonts](https://docs.cevoid.com/brandkit/design-theme#custom-fonts).

> [!WARNING]
> Importing a theme overwrites your current theme settings. You're asked to confirm before the import starts.

### Import from Shopify

**Import from Shopify**, marked _Recommended_, is the recommended option for Shopify stores. Cevoid reads your Shopify theme files directly to extract fonts and color settings.

1. Navigate to [Settings → Loyalty → Theme](https://app.cevoid.com/settings/theme)
2. Click **Import**
3. Select **Import from Shopify**
4. Click **Import** to confirm

### Import from website

Use **Import from website** for stores not on Shopify, or to import from a specific URL. Cevoid's AI scans your website's code and takes a screenshot to extract design settings.

1. Navigate to [Settings → Loyalty → Theme](https://app.cevoid.com/settings/theme)
2. Click **Import**
3. Select **Import from website**
4. Enter the URL you want to import from in _Website URL_. The field starts with your storefront domain.
5. Click **Import**
6. Click **Import** to confirm

## Customize your theme

Navigate to [Settings → Loyalty → Theme](https://app.cevoid.com/settings/theme) and click **Customize** to open the theme editor. The theme editor has two tabs: **Components** and **Color schemes**. Click **Save changes** to save your edits.

The theme editor previews your changes as you make them, on sample headings, text, buttons, badges, tabs, cards, and a popup in each color scheme. To check your theme on a widget on desktop, tablet, and mobile, edit it in the **Theme** area of the program widget editor: see [On-site widgets](https://docs.cevoid.com/loyalty/setup/on-site-widgets.md#available-widgets-and-sections).

![Theme editor showing variables panel and live preview](https://yhl4bogauvizwf7u.public.blob.vercel-storage.com/media/help-center/brandkit/design-theme/b4a0b3269716/program-settings-theme.webp)

The theme editor with Components and Color schemes tabs.

## Components

The **Components** tab controls typography, buttons, badges, tabs, cards, popups, layout, and responsive behavior across all widgets. Its settings come in this order: **Typography**, **Buttons**, **Badges**, **Tabs**, **Cards**, **Popups**, **Layout**, and under _Responsive_, **Tablet** and **Mobile**.

### Typography

Set fonts and text styling for your widgets.

**Headings**

| Setting | Description |
| --- | --- |
| _Font_ | Select from custom fonts, web fonts, or upload a new one |
| _Weight_ | Font weight, such as Regular or Bold |
| _Letter spacing_ | Space between letters |
| _Line height_ | Space between lines |
| _Text transform_ | Default or Uppercase |
| _Extra large_ | Size in pixels for extra large headings |
| _Large_ | Size in pixels for large headings |
| _Medium_ | Size in pixels for medium headings |
| _Small_ | Size in pixels for small headings |
| _Extra small_ | Size in pixels for extra small headings |

**Text**

| Setting | Description |
| --- | --- |
| _Font_ | Select from custom fonts, web fonts, or upload a new one |
| _Weight_ | Font weight |
| _Letter spacing_ | Space between letters |
| _Line height_ | Space between lines |
| _Large_ | Size in pixels for large text |
| _Medium_ | Size in pixels for medium text |
| _Small_ | Size in pixels for small text |
| _Extra small_ | Size in pixels for extra small text |

### Buttons, badges, tabs, and cards

Set the size and shape of buttons, badges, tabs, and cards. Their colors come from your [color schemes](https://docs.cevoid.com/brandkit/design-theme#color-schemes).

| Component | Settings |
| --- | --- |
| **Buttons** | _Padding_, _Border radius_, _Border width_, _Font size_, _Letter spacing_, _Text transform_ |
| **Badges** | _Padding_, _Border radius_, _Font size_ |
| **Tabs** | _Padding_, _Border radius_, _Font size_ |
| **Cards** | _Padding_, _Border radius_ |

### Popups

Control the appearance of popup dialogs.

| Setting | Description |
| --- | --- |
| _Color scheme_ | Which color scheme to use for popups |
| _Backdrop_ | Background overlay color and opacity |
| _Border radius_ | Corner roundness in pixels |

### Layout

Set spacing and width for your widgets.

| Setting | Description |
| --- | --- |
| _Content width_ | Fixed (with max width) or Fluid (full width) |
| _Max width_ | Maximum width in pixels when using Fixed |
| _Padding_ | Vertical and horizontal spacing around content |
| _Title spacing_ | Space below section titles |
| _Grid gap_ | Space between grid items |

### Tablet

| Setting | Description |
| --- | --- |
| _Breakpoint_ | Screen width where tablet styles apply |

### Mobile

Adjust layout and sizing for mobile screens.

| Setting | Description |
| --- | --- |
| _Breakpoint_ | Screen width where mobile styles apply |

**Layout**

| Setting | Description |
| --- | --- |
| _Padding_ | Vertical and horizontal spacing on mobile |
| _Title spacing_ | Space below section titles on mobile |
| _Grid gap_ | Space between grid items on mobile |

**Headings**

Override heading sizes for mobile screens.

| Setting | Description |
| --- | --- |
| _Extra large_ | Size in pixels |
| _Large_ | Size in pixels |
| _Medium_ | Size in pixels |
| _Small_ | Size in pixels |
| _Extra small_ | Size in pixels |

**Text**

Override text sizes for mobile screens.

| Setting | Description |
| --- | --- |
| _Large_ | Size in pixels |
| _Medium_ | Size in pixels |
| _Small_ | Size in pixels |
| _Extra small_ | Size in pixels |

**Cards**

| Setting | Description |
| --- | --- |
| _Padding_ | Card padding on mobile |

## Color schemes

Color schemes are color palettes you apply to individual widget sections. Use them to give sections different looks while keeping your brand consistent.

The theme editor shows four default schemes: **Primary**, **Secondary**, **Dark**, and **Accent**. Click a scheme in the sidebar to edit its colors.

The preview shows each scheme on sample headings, text, buttons, badges, tabs, cards, and a popup.

### Edit a color scheme

Each color scheme contains settings for sections, buttons, badges, tabs, and cards.

**Section**

| Setting | Description |
| --- | --- |
| _Background_ | Section background color |
| _Accent_ | Accent color for highlights |
| _Accent contrast_ | Text color on accent backgrounds |
| _Border_ | Border color |
| _Heading text_ | Heading text color |
| _Body text_ | Body text color |

**Solid button**

| Setting | Description |
| --- | --- |
| _Button solid background_ | Background color |
| _Button solid text_ | Text color |
| _Button solid border_ | Border color |

**Outline button**

| Setting | Description |
| --- | --- |
| _Button outline background_ | Background color (with opacity) |
| _Button outline text_ | Text color |
| _Button outline border_ | Border color |

**Badges**

| Setting | Description |
| --- | --- |
| _Badge background_ | Background color |
| _Badge text_ | Text color |
| _Badge border_ | Border color |

**Tabs**

| Setting | Description |
| --- | --- |
| _Tab inactive background_ | Background for inactive tabs |
| _Tab inactive text_ | Text color for inactive tabs |
| _Tab inactive border_ | Border for inactive tabs |
| _Tab active background_ | Background for active tabs |
| _Tab active text_ | Text color for active tabs |
| _Tab active border_ | Border for active tabs |

**Cards**

| Setting | Description |
| --- | --- |
| _Card background_ | Card background color |
| _Card accent_ | Accent color within cards |
| _Card accent contrast_ | Text on card accent backgrounds |
| _Card border_ | Card border color |
| _Card heading text_ | Card heading color |
| _Card body text_ | Card body text color |
| _Card shadow_ | Card shadow, set by _X_, _Y_, _Blur_, _Spread_, and _Color_ |

### Create or delete a color scheme

1. Navigate to [Settings → Loyalty → Theme](https://app.cevoid.com/settings/theme) and click **Customize**
2. Click the **Color schemes** tab
3. Click **Create new**
4. Enter a name, up to 40 characters
5. Click **Create scheme**. The new scheme opens.
6. Edit its colors
7. Click **Save changes**

To delete a color scheme, open the menu next to it, select **Delete**, and click **Delete scheme**. The same menu has **Rename**, which applies the new name everywhere the scheme is used, and **Duplicate**. Save your changes before you rename or delete a scheme. You can't delete your last color scheme, or one that popups, a widget section, or an activity still uses: the app lists where it's used, so you can assign another scheme first.

### Use color schemes

When you edit a widget section or a challenge, click **Change** under _Color scheme_ and select a scheme. **Edit scheme** opens the scheme's colors. Use different color schemes to create visual contrast between sections on the same page.

## Custom fonts

If your brand uses a font that isn't available in the theme editor, upload it as a custom font. Custom fonts are shared with your [BrandKit](https://docs.cevoid.com/brandkit.md#custom-fonts): a font uploaded on either page shows in both.

1. Navigate to [Settings → Loyalty → Theme](https://app.cevoid.com/settings/theme) and scroll to the _Custom fonts_ section
2. Click **Upload font**
3. Select your font file

You can upload up to 5 font files at a time. Supported formats are .otf, .ttf, .woff, and .woff2. To rename an uploaded font, select **Edit name** in the menu next to it. To remove one, select **Delete** and click **Remove font**.

After you upload a custom font, it appears under _Custom fonts_ in the _Font_ picker when you edit the _Typography_ settings. The picker can add fonts too: click **Upload**, then **Upload font** for a file, or **Link to external font** to enter a _Font URL_ and click **Add font**.

> [!NOTE]
> Popular fonts, including Google Fonts, are already available in the theme editor. Only upload custom fonts if you need one that isn't listed.

## Related articles

- [On-site widgets](https://docs.cevoid.com/loyalty/setup/on-site-widgets.md)
- [Translations](https://docs.cevoid.com/localization/translations.md)

---

Canonical: https://docs.cevoid.com/brandkit/design-theme