Theme Editor
No-code websites are essential for modern e-commerce retailers, offering a fast, cost-effective, and scalable way to build digital storefronts without requiring programming expertise.
Miva’s Theme Editor enhances the power of PageBuilder by introducing an intuitive graphical interface for customizing typography, buttons, and layouts. It allows you to create a centralized style guide that can be accessed from Flex components and even referenced in template code. By standardizing styles at the Theme Editor level, merchants can accelerate their workflows and maintain a consistent, professional look—bringing PageBuilder even closer to a fully no-code solution.
Accessing Theme Editor
You can open the Theme Editor in PageBuilder via:
User Interface > Theme Editor in the left-hand navigation, or
The Edit icon below the Page Settings icon within the PageBuilder interface.
Once open, you'll find options for Typography, Buttons, and Layout available both in the center and right side of the screen. These options lead to the same configuration settings.
Note
Miva version 10.12.00 also included Font Manager, which can be accessed by clicking User Interface>Resources and then clicking the Fonts tab. There are 81 fonts loaded into the tab, with 13 set to active by default. You can add fonts through the Add Font button. Fonts that are added can be found in the options for Theme Editor Font Family.
Typography
The Typography section allows you to define custom text styles that apply sitewide or within Flex Components—essentially a visual CSS builder.
Available style settings include:
Color
Font family, weight, style, and size
Line height
Letter spacing
Text transform
Word wrap & white space
Class name (via Advanced Settings)
Headings
Customize each heading level (e.g., H1–H6) individually. Click a heading name on the right panel to expand its settings. Changes preview live on the left side of the screen. You can also configure responsive settings for mobile and tablet views.
Paragraphs
Define default styles for paragraph text using similar settings. As with headings, changes are shown in real-time, and responsive controls are available.
Buttons
The Buttons section lets you customize the appearance of buttons and links across your site.
Customizable settings include:
Class name
Text styles (font, color)
Fill color
Padding & border
Corner radius
Drop shadow
States: default, hover, and disabled
Click any listed button or link to access and configure its styles.
Layouts
Layouts allow you to define breakpoints for responsive design. You can assign specific Typography and Button styles to different screen sizes using start and end values.
After making changes, click the Update Theme button in the upper-right corner to apply them sitewide.
Theme Editor in Practice
Changes made in Theme Editor are global and will reflect throughout your website.
Flex components automatically adopt Theme Editor styles, but these can be overridden locally in the Edit Component view. Use the Select Type icon next to editable fields to do so.
Theme styles can also be managed through XML provisioning. For developer instructions, visit: https://docs.miva.com/developer/developer-resources/xml-provisioning/theme-editor-provisioning/
Switching to Theme Editor Styles if You Upgrade to 10.12.00.
After upgrading to Miva 10.12.00, existing PageBuilder pages will remain unchanged. Legacy settings will be preserved but clearly marked. When editing Flex Components, use the Switch to Theme button to move from Legacy mode to the new Theme Editor styles.
Best Practice for New Stores
Start by reviewing the default styles included in Theme Editor. If they don’t match your brand, have your designer or marketing team define a custom style guide that ensures consistency across all new PageBuilder pages.
Best Practice for Upgraded Stores
If you've repeatedly customized default Flex component settings, save time by standardizing your design preferences in Theme Editor. This provides a consistent foundation and streamlines future page creation.