--- title: "Themes Overview" slug: "themes-overview" updated: 2023-08-21T10:01:26Z published: 2023-08-21T10:01:26Z canonical: "kb.easysend.io/themes-overview" --- > ## Documentation Index > Fetch the complete documentation index at: https://kb.easysend.io/llms.txt > Use this file to discover all available pages before exploring further. # Themes Overview ## **Article Overview** The following article describes the Theme feature of the Builder platform. It explains what the Theme is used for and details its structure. The article also provides information about global components and how to use multi-branding. ## **Way to Use a Theme?** EasySend supports full brand customization of your digital processes. The Builder separates the configuration of the business logic of your digital processes and the configuration of your branding. While business logic is managed per digital process, the brand guidelines are set up in the Theme area. The Theme includes the following: - All the components that can be dragged and dropped into the canvas while building a Webflow - Colors - Styles - Fonts - Logos - backgrounds Using the Theme, each customer can configure its own unique user experience. ### ## **Navigate to the Themes Screen** (See **Figure 1**) To navigate to the Themes screen, perform the following steps: ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1655963624705.png) **Figure 1: Build Tab** 1. Click the **Build** tab (1). *Result:* The Build tab options appear: ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1655963731944.png) **Figure 2: Themes Option** 1. Click the **Themes** option (2). ## **Themes Screen Description** **Figure 2** and **Table 1** describe the structure of the Themes screen. ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1655964578996.png) **Figure 3: Theme Screen** **Table 1: Theme Screen** | **Number** | **Name** | **Description** | | --- | --- | --- | | 1 | Search Bar | Enables to search a Theme | | 2 | Import Theme | Enables to import an existing Theme to your environment | | 3 | New Theme | Enables to create a new Theme | ### When creating or importing Themes, they will appear in a list (4) with the following information: - Theme Name - Created - Last Modified - Modified By ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1655964724041.png) **Figure 3: Theme Screen** ### ## **Editing a Theme** To edit a Theme, click its name and wait for the editing screen to appear. The screen is divided into a few sections: - Add - Variables - Fonts - Images - Pages & Sections - Components ## **Add Section** **Figure 4** and **Table 2** describe the structure of the Add section. ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-y3bxd9jq.png) **Figure 4: Add Section** **Table 2: Add Section** | **Number** | **Sub-Section** | **Icon** | **Name** | **Description** | | --- | --- | --- | --- | --- | | 1 | Create | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1652267979819.png) | Font | Enables to add new fonts to the Fonts section NOTEFor additional information, see the [Fonts](https://kb.easysend.io/docs/themes-overview#fonts) section | | 2 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1652267997803.png) | Image | Enables to add new images to the Images section NOTEFor additional information, see the [Images](https://kb.easysend.io/docs/themes-overview#images) section | | 3 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1652268010181.png) | Page Component | Enables to add a new Page component to the Page & Sections section NOTEFor additional information, see the [Page & Sections](https://kb.easysend.io/docs/themes-overview#pages-sections) section | | 4 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1652268030068.png) | Section Component | Enables to add a new Section component to the Page & Sections section NOTEFor additional information, see the [Page & Sections](https://kb.easysend.io/docs/themes-overview#pages-sections) section | | 5 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1652268047704.png) | Component | Enables to add custom components to the Theme NOTEThis topic is not covered in this article, for additional information please contact our support team | | 6 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1652268066897.png) | Theme Variant | Enables to create a variant of the current Theme NOTEFor additional information, see the [Theme Variants](https://kb.easysend.io/v1/docs/themes-overview#theme-variants) section | | 7 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1652268085364.png) | Theme Var | Enables to create Theme variables and add them to the Variables section NOTE For additional information, see the [Variables](https://kb.easysend.io/docs/themes-overview#variables) section | | 8 | Import | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-wwdemln1.png) | Import Component | Enables to add a new global component to the Theme NOTEFor additional information, see the [Adding Global Components](https://kb.easysend.io/docs/themes-overview#adding-global-components) section | ### #### ## **Variables** (See **Figure 5**) The Variables section contains different types of variables: - size - color - font-family - boolean - string - image - enum ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-qj8t0t0h.png) **Figure 5: Variables** Variables are added using the Theme Var option from the Add section (see **Figure 6**): ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-zbw2nu1v.png) **Figure 6: Add Theme variable Window** #### ## **Fonts** (See **Figure 7**) The Fonts section contains different types of fonts. The fonts will appear on the Rich Text component. ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-g9kue013.png) **Figure 7: Fonts** Fonts are added using the Fonts option from the Add section (see **Figure 8**): ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-zb9t17vl.png) **Figure 8: Add a font Window** #### ## **Images** (See **Figure 9**) Images are used for logos, background pictures, and icons implemented on image components and Main Page and Greeting Page components. ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-1wpywjz7.png) **Figure 9: Images** Images are added using the Images option from the Add section (see **Figure 10**): ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-zzffqbzf.png) **Figure 10: Edit image Window** #### ## **Pages & Sections** (See **Figure 11**) This section contains three components: - Greeting Page - Main Page - Main Section ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-w6g5e403.png) **Figure 11: Pages & Sections** Pages and sections are added using the Page Component and the Section Component options from the Add section (see **Figure 12**): **![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-46ujodl9.png)** **Figure 12: Create a component Window** NOTE The components under Pages & Sections are custom components. This article does not cover the topic of custom components, for additional information please contact our support team. #### ## **Global Components** (See **Figure 13**) Global components are used to build your Webflows. They are imported into a Theme using the Add section and edited through variables. Global components are identified by a globe icon (1). ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-3qv0o317.png) **Figure 13: Global Component Globe Indicator** #### ### **Adding Global Components** (See **Figure 14**) Global components are imported and added using the Import component option from the Add section. The option displays the Import Component window, where you can choose the type of component from the dropdown (1), view a preview (2), and set a Display name (3). ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-68fzd0ui.png) **Figure 14: Import Component Window** The components will appear in one of the Theme sections according to their type: - Buttons - Multiple Choice (checkbox and radio question components) - Other - all other global components ##### ### **Global Components Options** Additional options for a global component appear after clicking the ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-exi25vl9.png) icon. **Figure 15** and **Table 3** describe the global component options. ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-6t7gxj01.png) **Figure 15: Global Components Options** **Table 3: Global Components Options** | **Number** | **Icon** | **Name** | **Description** | | --- | --- | --- | --- | | 1 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1652269034718.png) | Rename Component | Enables to rename the component | | 2 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1652269045090.png) | Edit Vars | Enables to edit the variables of the component (for additional information, see the [Edit Global Components](https://kb.easysend.io/docs/themes-overview#edit-global-components) section) | | 3 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1652269051177.png) | Show Component Versions | - Displays the versions of the components - Enables to set the component to a specific version (for additional information, see the [Components Version](https://kb.easysend.io/docs/themes-overview#components-versions) section) | | 4 | ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1652269068212.png) | Delete Component | Enables to delete the component | ##### ### **Edit Global Components** (See **Figure 16** and **Figure 17**) Global components are edited by configuring variables. Clicking the Edit Vars option opens a window that displays a list of variables connected to the component with the following information: - Var Name - Var Type - Var Value - Link ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-tmc1md2q.png) **Figure 16: Global Component Variables** The value of a variable can be set manually using the Var Value column, but if a variable is linked to one of the Theme's variables, the Var Value is then overridden. For example, the width variable (1) is not linked to any Theme variable (2), so its value is set manually to 19 (3). The height variable (4) is linked to the inputSize Theme variable (5), so its value is set according to it, and its manual Var Value (6) is overridden. ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-d13nvhw3.png) **Figure 17: Variables and Values** ### **Why Link to a Theme Variable?** (See **Figure 18** and **Figure 19**) It is important to understand the advantage of linking global components to a Theme variable, it enables you to edit them in bulk. If a few global components are connected to the same Theme variable, when editing it, the changes will be applied to all of them. For example, if the checkbox and the Radio Question global components are connected to the regularFont Theme variable (1), when editing it and changing its font type (2), the changes will be applied to both at once. **![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-f72r1fsi.png)** **Figure 18: Global Components and Variables** **![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-vydrciot.png)** **Figure 19: Edit theme variable window** ### **Components Versions** (See **Figure 20**) Components are updated when a change affects them, for example, a visual change or a change in their code. The change is reflected in the displayed version of each component (1): ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-qlhn2tjq.png) **Figure 20: Component Version** When updating the version of a component, the change can occur in three different levels: - Major - Minor - Patch For example, if the version of the component is v5.0.0, when the update is major, the new version will be v6.0.0, if the update is minor the new version will be v5.1.0, and if the update is a patch then the new version will be v5.0.1. ##### #### **When and How to Perform a Version Update of a component?** (See **Figure 21**) The request to update the version of a global component is received automatically by EasySend as indicated by the indicator (1) appearing next to the version number of the component. ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-hjjdk9sb.png) **Figure 21: Updated Needed Indicator** To update the version of a component, perform the following steps (see **Figure 22** to **Figure 26**): ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-2xtgm8vo.png) **Figure 22: Additional Options Icon** 1. Click the additional options icon (1) of the desired global component. *Result:* Additional options appear: ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-xh9lfc4g.png) **Figure 23: Show Component Versions Option** 1. Click the **Show Component Versions** option (2): *Result:* The **Version History** window appears: ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-1zrnxpd9.png) **Figure 24: Version History Window** 1. Click the additional options icon (3) of the desired version. *Result:* The **Set** option (4) appears: ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-wnpw4a00.png) **Figure 25: Set Option** 1. Click the **Set** option (4). *Result:* The version of the component is updated (5), and the update required indicator disappears: ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-4bx1h6d9.png) **Figure 26: Updated Component Version** ## **Theme Variants** You can use your Theme and create more than one look and feel design in the same digital process. For example, in addition to the main brand, you may want to have a youth brand. To answer this need, EasySend provides the ability to create Theme variants and configure multiple designs in one Theme while maintaining a single process. Theme variants functionality will affect the high-level design of the process which includes: - Images (for background, logo, and icons) - Colors - font family - font size NOTETheme variants do not provide the ability to add multiple behaviors, functionalities, or any other non-design parameters of a component in the same process. This can be done by implementing an additional (separated) Theme and an additional (duplicated) process which requires more maintenance. For additional information, please contact our support team. ### ## How to Create a Theme Variant? (See **Figure 27** to **Figure 40**) To create a Theme variant , perform the following steps: ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-4bhw52kj.png) **Figure 27: Updated Component Version** 1. Click the **Theme Variant** option (1). *Result:* The **Add Theme variant** window appears: ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-ypb3dyha.png) **Figure 28: Add Theme variant Window** 1. Enter the **Variant Name** (2). NOTE The variant name must not be empty and contain only lowercase letters, uppercase letters, numbers, and an underscore ('_'). 1. Click the **OK** button (3). *Result:* The new variant is added under the **Theme variants** section, and it is the active one: ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-x8q9qh1p.png) **Figure 29: New Theme Variant** ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-2c37f1uc.png) **Figure 30: New Theme Variant** Now add a Theme variable, the example will continue with a color Theme variable: 1. Click the **Theme Var option** (4). *Result:* The **Add** **Theme variable** window appears: ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-1noj4dja.png) **Figure 31: Add Theme variable Window** 1. Enter a **Var Name** (5). 2. Select the **Type** (6) (color). 3. Select the color (7). 4. Click the **Ok** button (8). *Result:* The new color Theme variable (9) is added to the Variables section: ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-cjjrzgjo.png) **Figure 32: New Color Theme Variable** The newly added Theme variable appears on both Theme variants but when applying changes to it the changes will be implemented only on the current active selected Theme variant, for example: ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-kkl86ka4.png) **Figure 33: New Color Theme Variable** 1. Click the additional options icon (10) of the added color Theme variable. *Result:* Additional options appear: ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-xbntykq9.png) **Figure 34: Edit Var Option** 1. Click the **Edit Var** option (11). *Result:* The **Edit Theme variable** window appears: ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-radp3tx9.png) **Figure 35: Edit Theme variable Window** 1. Click the dropdown (12) and select a new color. 2. Click the **Choose** button (13). 3. Click the **OK** button (14). *Result:* The color Theme variable has a new color: ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-tsakb3a9.png) **Figure 36: Theme variable with New Color** To verify that the change only occurred on the selected active Theme variant, switch between them: ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-g9efnzu3.png) **Figure 37: Additional Options Icon** 1. Click the additional options icon (15). *Result:* The **Select Variant** option (16) appears: ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-7yv1652c.png) **Figure 38: Selected Variant Option** 1. Click the **Select Variant** option (16). *Result:* The Theme variant is selected as the current active Theme. 1. Locate the color Theme variable and verify the color is different from the one that was set in the second variant. ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/themes-overview-image-1sj18fnn.png) **Figure 39: Color Theme Variable** ## How to Use Theme Variants? To use Theme variants, first use the Process Settings screen to verify that the correct Theme is attached to the Webflow: ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1655964987999.png) **Figure 40: Process Settings Screen - Select a Theme** Second, the name of the Theme variant must appear in the URL of the digital process to be active. For example, by adding the name of the Theme variant to a digital process link that is sent through a workflow step: ![](https://cdn.document360.io/45e1a1b1-1964-46f1-939e-f40bde9b50fa/Images/Documentation/image-1676452924000.png) **Figure 41: Digital Process Link with a Theme Variant Name** When initiating the the digital process, for example through the Journey Sender, the link containing the name of the Theme variant will be received and clicked by the end-user. The process will appear with the design of the theme variant. NOTEIf additional assistance is required when implementing Theme variants, please contact our support team. ## Related - [Building a Webflow](/building-a-webflow.md)