Fonts & Colors

Changing Global Fonts and Colors for your Theme

Theme Fonts & Colors

In your Visual Design Editor, click on the Gear icon, then select Theme Fonts & Colors

This will open your Fonts & Colors Editor

Fonts & Formatting

The Fonts & Formatting screen is used for setting the Font or Font style for Headings, Paragraph text, Links, Buttons and form fields.

You can set Font family, size, line-height, margin bottom, letter spacing, decoration, transform, as well as borders, border radius and padding for buttons and forms.

📘

Add Custom Font to Your Theme

Color Palettes

Design V2 introduces the concept of Theme Color Palettes allowing you to quickly and easily brand any theme to match your company's colors.

Primary Color Palette

The Primary Palette is used for just about all of the major drag & drop blocks in your theme as well as for all system pages that are not in your design editor (Shopping Cart, Login/Register etc...)

Secondary Color Palette

The Secondary Palette is used for "Accent Colors" that compliment your theme. Some of our V2 Designs utilize these accent colors for various drag & drop blocks to give more variety and color to the theme.

Alerts Color Palette

The Alerts Palette is used for the standard Success, Warning and Error messaging seen throughout the store-front user journey i.e. add to cart success, checkout minimum warning, and out of stock error.

🚧

Theme Fonts & Colors work best with Design V2 Themes

Please note that if your theme was migrated from Design V1 to V2 or if you are using a V1 version of your theme, some settings in the Theme Fonts & Colors may not have an impact on your theme.