Create a theme

When your team builds widgets without a shared design system, colors, fonts, and components can drift from your brand guidelines across projects. Creating a theme in the Theme Builder gives your team a standardized design system: you set specific colors, upload brand fonts, and pre-build components that every widget uses consistently.

​

Create a new theme

1. Go to Studio > Themes in the left sidebar.
2. Click Add a theme.
3. Enter a name for the theme and select the Projects it affects.
4. (Optional) Add a description and tags.
5. Click Next to open the Theme Builder.

​

Define colors

Use the Colors section to define the palette available to users. To restrict users to specific brand colors, toggle Define theme colors to ON.

• Add a color: Enter a hex code or click the + icon. You can select a color from the gradient, adjust opacity, or use the eyedropper tool to sample from your screen.
• Manage colors: Drag and drop colors to reorder them. Click the trash icon to remove a color.

Colors added here are available under Theme Colors in the Widget Studio.

​

Modifying locked colors

If a component in your theme currently uses a color, you can’t delete it. However, you can edit the color. When you modify a color, the change automatically applies to every component in the theme that uses that color.

​

Add fonts

In the Fonts section, determine which distinct typography users can access. Check a font from the list to include it in your theme. Use the search bar to search for a specific font. To add a font:

1. Click + Add font.
2. Select your font source:
   • From your website: Enter the Font Family name.
   • Link to a font file: Enter the Font Family name and the URL to the file.
   • Embed code: Enter the Font Family name and the import code.
3. Click Preview & add.
4. Select the font weights you want to include.
5. Click Add.

​

Add and manage components

The Components section allows you to pre-configure elements (like buttons, images, or forms) for your team and define which components belong in the theme. You can add the same component type multiple times to create variations, for example, a distinct “Submit” button and a “Cancel” button.

​

Add a component

1. Click + Add next to Components.
2. Search for a component or browse categories in the left sidebar.
3. Select the components you want to include.
4. Click Add components.

​

Edit and lock components

After you add a component to your list, click the secondary actions (three dots) menu to manage it:

• Rename: Give the component a descriptive name (for example, “Primary CTA”).
• Edit: Open the component editor to adjust styles using Widget Studio tools.
• Lock: Restrict editing permissions for this component. Alternatively, click the lock icon next to the Secondary actions menu to lock a component.
  • When locked: Users can only modify the content (text or images), position, and size. They can’t design elements like colors or borders.
  • When unlocked: Users have full control to change the design.

​

Activate your theme

When you finish configuring your theme, click Activate in the top right corner. The theme is now available for use in your experiments and personalizations. To deactivate a theme later, click the status dropdown (Active) and select Deactivate, or use the Themes dashboard.