Miva’s Theme Editor provides a centralized way to define and manage your store’s typography, buttons, and layout styles. These styles are consistently applied across built-in Shadows templates and can be used across Flex components and directly within template code.
This allows you to maintain a consistent presentation across both PageBuilder content and core storefront experiences while reducing the need for one-off styling and simplifying ongoing design changes.
Accessing Theme Editor
Theme Editor is available within PageBuilder:
User Interface > Theme Editor, or
The Edit icon below Page Settings
The editor opens as a side panel with controls for Typography, Buttons, and Layout, alongside a live preview of the storefront.
Note: Fonts are managed through Font Manager (User Interface > Resources > Fonts). Fonts enabled or added there are available in the Font Family settings within Theme Editor.
Typography
The Typography section defines reusable text styles for headings and paragraph content.
Available settings include:
Color
Font family, weight, style, and size
Line height
Letter spacing
Text transform
Word wrap and white space
Class name (Advanced Settings)
Headings
Heading styles are defined per level (H1–H6) and can be configured independently, including responsive adjustments for different screen sizes.
Paragraphs
Paragraph styles define the default text formatting used throughout the storefront, with the same set of configurable properties and responsive controls.
Buttons
The Buttons section defines styles for buttons and links used throughout the storefront.
Available settings include:
Class name
Text styles (font and color)
Fill color
Padding and border
Corner radius
Drop shadow
States (default, hover, disabled)
Layouts
The Layouts section defines responsive breakpoints used across the storefront.
Typography and Button styles can be assigned to specific screen sizes using start and end values.
Changes are applied globally when the theme is updated.
Theme Editor in Practice
Theme Editor styles are applied globally across the storefront.
Typography and button styles extend beyond PageBuilder content to built-in Shadows templates, including:
Customer account pages
Checkout
MivaPay
Wish lists
Static pages
Order history
Gift certificates
Affiliate areas
Note. These changes only exist in the version of shadows released with Miva 26R1. The template changes are significant but could be retro-actively added to older Shadows versions with developer assistance.
Flex components use Theme Editor styles by default, with the option to override styles locally within the component.
Theme styles can also be managed through XML provisioning. For developer documentation, see:
https://docs.miva.com/developer/developer-resources/xml-provisioning/theme-editor-provisioning/
Legacy Styles
If you upgraded to Miva 10.12.00 your flex components may present "Legacy Styles". You can improve efficiency by using the Theme Editor to create a global style guide, and replace these legacy styles with your newly created styles.