Design theme

The design theme controls fonts, colors, and layout for all your rewards program widgets. Instead of styling each widget individually, you set your brand’s visual identity once and it applies everywhere. Navigate to Settings -> Theme to manage your design theme.

---

​

Importing a theme

The fastest way to set up your design theme is to import it from your existing website. Cevoid’s AI will analyze your site and apply matching fonts, colors, and styling automatically. Click Import and choose one of two options:

​

Import from Shopify

If you’re using Shopify, this is the recommended option. Cevoid reads your Shopify theme files directly to extract fonts and color settings.

1. Click Import -> Import from Shopify
2. Click Import to confirm

​

Import from website

For non-Shopify stores or if you want to import from a specific URL, use this option. Cevoid’s AI scans your website’s code and takes a screenshot to extract design settings.

1. Click Import -> Import from website
2. Enter the URL you want to import from
3. Click Import to confirm

---

​

Customizing your theme

Click Customize to open the theme editor. The editor has two tabs: Variables and Color schemes. The editor shows a live preview of your changes as you make them. Switch between desktop, tablet, and mobile views to check how your theme looks across devices.

---

​

Variables

Variables control typography, layout, and responsive behavior across all widgets.

​

Typography

Set fonts and text styling for your widgets. Headings Text

---

​

Popups

Control the appearance of popup dialogs.

---

​

Layout

Set spacing and width for your widgets.

---

​

Tablet

---

​

Mobile

Adjust layout and sizing for mobile screens. Layout Headings Override heading sizes for mobile screens. Text Override text sizes for mobile screens. Cards

---

​

Color schemes

Color schemes let you create different color palettes that can be applied to individual widget sections. This allows for visual variety while maintaining brand consistency. The editor shows four default schemes: Primary, Secondary, Dark, and Accent. Click any scheme in the sidebar to edit its colors. The preview area shows how each scheme looks on different elements: tabs, cards, and popups.

​

Editing a color scheme

Each color scheme contains settings for sections, buttons, tabs, and cards. Section Solid button Outline button Tabs Cards

​

Using color schemes

When editing any widget section, you can select which color scheme to apply from the Color scheme dropdown. This lets you 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, you can upload custom fonts. Navigate to Settings -> Theme and scroll to the Custom fonts section.

1. Click Upload font
2. Select your font file

Supported formats: .otf, .ttf, .woff, .woff2 Once uploaded, your custom font appears in the font dropdown when editing Typography settings.