Global Colors

Global Colors lets you create reusable colors and use them throughout your website. Instead of entering the same color value repeatedly, you can save it once as a Global Color and select it wherever a color control supports global values.

When a Global Color is changed, every element using that color is updated automatically. This makes Global Colors especially useful for brand colors, text colors, backgrounds, borders, buttons, icons, and other recurring interface colors.

Global Colors settings
Global Colors

Create and manage the reusable colors available throughout Creative Elements.

Name
Enter a descriptive name for the color. The name is shown in the Global Color selector, so use names that describe the color's purpose rather than only its visual value.
Color
Select the color value assigned to the Global Color.
Tip: Create Global Colors for values you expect to reuse. A small, clearly named palette is usually easier to maintain than a long list of nearly identical colors.

Globals Preview

Use the Globals Preview switch to preview your Global Colors while you are editing them. It lets you switch between the regular content area and a dedicated preview of your global styles, so you can immediately see how changes to your color palette work together.

Globals Preview (Colors)

As you edit a Global Color, the preview updates to reflect your changes, making it easier to check contrast, hierarchy, and the overall balance of your color system before using the colors throughout the website.

Tip: Switch to Globals Preview when adjusting your color palette to see your changes in action without leaving the Global Colors settings.

Creating Global Colors

Global Colors are fully customizable. You can create the colors needed by your own design system instead of working with a predefined set of color roles.

Each Global Color consists of a Name and a Color value. Once created, it becomes available from supported color controls across Creative Elements.

Tip: Name colors by purpose whenever possible. Names such as Brand Primary, Body Text, Muted Text, Surface, Border, or Success are easier to understand later than names such as Blue 1 or Gray 3.

Adding a Global Color

  1. Open Theme Style > Global Colors.
  2. Add a new color.
  3. Enter a clear name.
  4. Select the color value.
  5. Save or update Theme Style.

The new color can then be selected from supported color controls throughout Creative Elements.

Using a Global Color

When editing an element, open a supported color control and switch to the Global Colors list. Select the Global Color you want to use instead of entering a standalone color value.

The element is then linked to that Global Color. If the Global Color is changed later, the linked element uses the new value automatically.

Editing a Global Color

You can rename a Global Color or change its color value at any time.

Changing the Name makes the palette easier to organize but does not change the visual color itself. Changing the Color updates the appearance of elements that use that Global Color.

Global Colors and individual colors

Use a Global Color when the same color has a reusable role in your design. Use an individual color when the value is intentionally unique to a particular element.

Global Color
Best for recurring brand and interface colors that should stay synchronized across the website.
Individual color
Best for one-off design choices that should remain independent from the global palette.

Building a useful color system

There is no required set of Global Colors. Build the palette around the needs of your website.

A typical store may use reusable colors for:

  • Primary brand actions
  • Secondary actions
  • Body text
  • Muted or secondary text
  • Headings
  • Page and card surfaces
  • Borders and dividers
  • Links and hover states
  • Success, warning, or error messages

These are only examples. The names and number of colors should match the actual design system of the store.

Using Global Colors with Theme Style

Global Colors work together with the other Theme Style settings. A color created here can be reused for Typography, Buttons, Icons, Form Fields, Backgrounds, and other supported controls.

This separates the color value from the element style. Global Colors define reusable values, while the Style Elements sections define where and how those values are used.

Example: Create a Global Color named Brand Primary, then use it for Primary buttons, links, icons, and selected accents. If the brand color changes later, update Brand Primary once.

Changing the color scheme of a website

A well-structured Global Color palette makes larger visual changes much easier. If recurring colors throughout the site are linked to Global Colors, changing a few palette values can update a large part of the website consistently.

Important: Only elements that actually use a Global Color are updated. Colors entered manually in individual controls remain unchanged.

Recommended workflow

  1. Identify the recurring colors in the website design.
  2. Create one Global Color for each meaningful reusable role.
  3. Give every color a clear, purpose-based name.
  4. Use Global Colors in Theme Style and widget controls instead of repeatedly entering the same values manually.
  5. Use individual colors only for genuine exceptions.
  6. When the design changes, update the Global Color palette first before editing individual elements.
Good to know: Current Creative Elements projects use the customizable Global Colors list as the active palette. Legacy Default Colors can still exist internally for backwards compatibility when legacy color schemes are enabled, but they are not part of the current Global Colors workflow.
© WebshopWorks - Professional PrestaShop Addons