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.
To install the Theme Editor Add-on log in to the web app (app.pepperi.com) as an admin user.
Go to Settings
Select the Theme Editor Add-on from the Add-on Manager and select Install from the menu.
The Theme Editor add-on will be added to the Settings menu under the Branded App Section:
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.
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.
Set the roundness styles for your buttons.
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.
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.
Set multiple theme configurations (holiday / seasonal) , export them, and then import them when needed.