Image Editor Settings

Provide predefined data sources and fonts when editing templates in the Editor

Image Editor Settings Overview

Image Editor Settings allow administrators to configure standardized resources within the image editing tool, which is particularly useful for managing designs for user groups required to work with templates (These are users whose settings are configured as SETTING. Must use Image Editor Templates.)

⚠️ User Right Required: User must have the permission: “Is Client Admin - User can manage the Client Profile”.

The core components include:

• Data Source Management: This feature allows you to provide predefined data sources for the entire account. It enables users to quickly apply consistent and accurate values when editing templates, eliminating the need for manual data entry.

• Font Asset Integration: Linked font assets are made available to all users with permission to access the Image Editor.

  • Font Weight Customization: Using the "Font Weight" slider, admins can assign specific weights to each font file or URL based on the selected font family.

  • Smart Auto-matching: To ensure a seamless design experience, the editor automatically matches fonts to the closest available weight if an exact match is not found.

You should enable the Image Editor Settings, if you want to:

• Enable admins to standardize data and fonts used within templates.

• Reduce display errors (e.g., missing fonts, incorrect content).

• Accelerate the design process for users.

• Help admins maintain easier control over content.

How to use Data Source

What is a Data Source?

The Data Source feature allows you to provide predefined data sources for the entire Account, helping users apply consistent values quickly when editing templates in the Editor. Data Sources provide predefined values to:

• Use in Text Layers with dropdown type.

• Use in Image Layers with dropdown type.

👉 This allows:

• Users to select values from a predefined list, avoiding manual entry errors.

• Consistent values across all templates in the Account.

How to add a Data Source

🔹 Step 1: Navigate to Image Editor Settings

• Go to Client Profile → Settings → Image Editor Settings (previously known as Template Settings)

• Inside this section, you will find: Data Source

🔹 Step 2: Add Data Source

• Click “Add Data Source” to create a new data source.

• Enter the following information

  • Data Source Name: to identify it easily when using in templates.

  • Values: list of values you want to provide for the dropdown.

• You can create multiple data sources as needed (e.g., branch locations, brand names, brand guideline colors, contact lists, etc.).

How to use Data Sources in the Editor

When editing a Template:

🔹 Step 1: Open the Template in the HIVO Editor

• Select the template you wish to modify.

🔹 Step 2: Select the data input Type (Data Source)

• Go to Design tab -> For Text Layers or Image Layers -> Select Type: Data Source.

• When you click on a Text Layer or Image Layer that is linked to a Data Source, instead of a regular input field, you'll see a dropdown menu.

• This list will display all the values defined in the relevant Data Source.

🔹 Step 3: Select the desired value

• Simply click the dropdown arrow and choose the appropriate value from the list.

• The content of the text or image layer will automatically update with your selected value.

How to set up Available Fonts

Available Fonts is a feature that allows administrators to centrally manage all fonts used in the Image Editor at the Client level.

• With Available Fonts, all fonts are now managed in one dedicated location. This removes the dependency on Brand Fonts, simplifies setup, reduces rendering issues, and gives administrators better visibility when fonts are missing or incorrectly configured.

• This feature becomes the single source of truth for all fonts used in the Image Editor.

The Font Family name must exactly match the font used in the original design file, including imported Adobe files and existing templates.

Any font asset linked inside Available Fonts becomes available to all users who have permission to access the Image Editor.

Where to Find It

• Go to: Client Profile → Settings → Image Editor Settings (previously known as Template Settings)

• Inside this section, you will find: Available Fonts

Font Configuration

Available Fonts is built as a list of font entries, where each entry represents a font family used in the Image Editor.

For every font entry, administrators must configure:

• Font Family (required)

• Font Source (required)

• Font Weight (required, default is 400)

1. Font Family

This is the main font name used by the Image Editor and must exactly match the font family used in the original design file, such as Adobe templates or imported assets. If the Font Family does not match exactly, the font may not render correctly. For examples:

• Outfit

• Helvetica Neue

• Montserrat

Adding font families supports three main methods (see details below):

Manually adding new fonts

Importing existing fonts from Brands

Loading missing fonts detected from templates

2. Font Source

Each font must have a source so the system knows where to load the font from. There are two supported source types:

• HIVO Asset - a font file uploaded and stored inside HIVO

• Font URL - an externally hosted font link, such as Google Fonts or a company CDN

In the Font Source section, users can turn the toggle on or off to switch between font source options.

🔹 Add Fonts Using HIVO Assets

You can upload font files directly into HIVO and link them inside Available Fonts.

• This is the recommended approach when you want centralized font management, stronger access control, and better consistency across templates.

• This is especially useful for proprietary fonts, internal brand fonts, or any font files your team wants to manage directly within the system.

🔹 Add Fonts Using Font URL

• You can also link fonts using externally hosted Font URLs. This is useful when fonts are already managed outside of HIVO through platforms such as Google Fonts, CDNs, internal servers, or enterprise font libraries.

• Even when using a URL, you still need to define the Font Family and Font Weight so the system can properly map the font to imported templates.

3. Font Weight

Font Weight is used to distinguish multiple font files under the same Font Family.

• This is especially important when one font family has several variations such as Light, Regular, Medium, or Bold. The default Font Weight is 400.

• In the Font Weight section, users can drag the dot on the Font Weight slider to adjust the font thickness.

⚠️ If the same font has the same font weights, the system will notify.

👉 3 methods to add Font Family

🔹 Method 1: Manually Adding new Font

⚠️ Avoiding Duplicate Font Entries

If you add a font and the same Font Family already exists in Available Fonts, the system will not create a duplicate entry.

Instead, it will automatically switch to Add Source for Another Weight Range.

For example:

• if Outfit already exists with: Outfit Regular → weight 400

• and if you're trying to enter the new font family name as outfit

• Then, the system will automatically treat this as another source under the existing Outfit family rather than creating a second separate entry.

This keeps font management cleaner and improves rendering consistency.

🔹 Method 2: Import fonts from Brands

To support migration from the previous Brand Font setup, administrators can import fonts directly from existing Brand Fonts into Available Fonts.

Admins can manually re-import fonts from Brands whenever needed, such as when:

• new fonts are added to a Brand later

• older fonts need to be re-synced

• admins want to reduce manual configuration work

This is not a continuous automatic sync. Changes made to Brand Fonts after migration will not automatically update Available Fonts unless manually imported.

🔹 Method 3: Load Missing Fonts from Templates

If a template contains a font that does not yet exist in Available Fonts, administrators can use the Import Missing Fonts tool.

• This tool scans all templates and detects font families that are missing from Available Fonts.

• Instead of fully configuring the font automatically, the system only creates placeholder entries for those missing fonts.

• At this stage, the fonts are not yet ready for use. Admins must manually complete the setup by assigning a HIVO Asset or a Font URL, and reviewing it before saving:

  • Font Family

  • Font Weight

⚠️ If no source is assigned, the font will not be linked and the template may continue showing rendering issues.

🔹 Warning Banner for Missing Fonts (Admin Only)

If a template contains fonts that do not have a linked asset or Font URL, administrators will see a yellow warning banner inside the Image Editor.

The warning will display:

• the list of affected fonts

• a shortcut to open Available Fonts settings

👉 This helps admins quickly identify missing fonts and resolve rendering issues before they affect other users.

If you have any questions, don't hesitate to ask, we're always here to help!