Theme Editor enables you to link your brand colors, fonts, shadows and styling to the look and feel of your B2B commerce storefront, giving you more control over your customer's experience.

Theme Editor is a free add-on available to all B2B Web Storefront customers. (For information on more Pepperi Add-ons click here).

Through simple configuration, you can define:

• All button colors
• Primary, secondary, confirmation, and caution colors.
• Fonts and sizes, as well as spacing and shadow for the catalog card views

This article explains how to:

• Set your theme in the Colors, Fonts and Styles sections of the configuration
• Assign the theme components to the Top Bar, Interface Color, Buttons, Quantity Selector, and Cards
• Publish your theme

For a live demo watch a short 16-min Themes Editor Webinar.

Installation

Configuration

Colors

Fonts

Styles

Assign

Publish/Restore

Import/Export

Installation

The Theme Editor add-on appears in the Settings menu under the Branded App Section:

Configuration

Colors

In this section set the Primary, Secondary and Main System colors for your theme. You'll assign them to the different elements of the UI in the Assign tab later.

You'll see an immediate preview of the colors you select, however your changes will not be applied until you click Publish.

• Primary color is the color most associated with your brand 
• Secondary color is used to add a second brand color to the theme design. Having a secondary color is optional.
• Main System color is used for text
• Link color is used in link fields and to highlight focus on buttons
• Caution color is used for notifications on destructive actions (such as confirm delete, exit) or to highlight errors.
• Confirmation color is used for notifications on successful actions, mainly in notification banners.

Note that each color has a Strong / Regular / Weak variation used in different UI components.

Fonts

Set the font and font size from the list provided. The font is used for all text on your storefront, including item information in the Order Center, Activity Lists, and buttons.

Styles

Set the roundness styles for your buttons.

Assign

For each element, assign one of the colors you set in the Colors configuration.

You can choose colors and settings from the menus to preview them. Changes will not be applied until you click Publish.

Publish/Restore

You'll see an immediate preview of the theme configurations in your browser, however changes will not be published to other users until you click Publish.

Click Restore to go back to Pepperi's default theme.

Import/Export

Set multiple theme configurations (holiday / seasonal) , export them, and then import them when needed.