Skip to content

Typography#

The typography property type allows Page Builder users to select a style from the Typography section of Theme Editor. It aligns Flex Components with the store’s global typography styling, improving brand consistency and maintainability.

typography Definition#

{
  "code": "typography_theme",
  "prompt": "Typography Theme",
  "supports_customization": true,
  "supports_legacy": true,
  "type": "typography"
}

Supported Fields#

Field Type Required Description
type string Yes Must be "button"
code string Yes Unique key used in l.settings:instance.
prompt string Yes Label shown in the admin interface.
supports_legacy boolean No Enables fallback to legacy buttons if theme buttons are unavailable
supports_customization boolean No Allows customization of style properties like font, color, etc.
required boolean No Requires a valid button selection before saving
preview_property_selector string No Targets DOM node for preview binding
visibility_conditions object No Used for conditional display logic

Field Behavior: supports_legacy#

When supports_legacy is set to true, the component will allow fallback to legacy button configurations. This is useful when:

  • Migrating older components that used separate select or text fields for button styles.
  • The Theme Editor is not in use, or Typography has not yet been configured.

theme_mode#

The theme_mode setting can be added to the defaults so that legacy components will allow for Theme Editor integration.

If theme_mode is false, the system will attempt to use legacy fallback values if available. 

"defaults": {
  "typography_theme": {
    "code": "primary",
    "size": "m",
    "theme_mode": true
  }
}

Field Behavior: supports_customization#

When supports_customization is true, Page Builder allows the user to override specific visual styles of the selected theme button. This includes:

  • Font Settings
  • Text Settings
  • Layout Settings

The values are stored in l.settings:instance within the customizations object. The default settings will be in styles and there is also a breakpoint_styles object that will contain the layout styles that can be customized.

Render Customizations#

When customizations are set in PageBuilder a stylesheet member will be added to the l.settings:instance structure that will contain the CSS to overwrite the style. 

typography_theme:stylesheet=.mm-theme-typography-display-one.flex_c32849080cef74745d46db494570a53d { font-size: 76px; font-weight: 700; font-style: normal; font-family: Inter, sans-serif; color: #fd1111; } @media screen and (max-width: 39.999em) { .mm-theme-typography-display-one.flex_c32849080cef74745d46db494570a53d { font-size: 32px; line-height: 1.25em; letter-spacing: inherit; } }

l.settings:instance#

When a Typography style is selected via PageBuilder:

:typography_theme:classname=mm-theme-typography-display-one+flex_c32849080cef74745d46db494570a53d
:typography_theme:code=display-1
:typography_theme:customizations:breakpoint_styles:mobile:font_size:unit=px
:typography_theme:customizations:breakpoint_styles:mobile:font_size:value=32
:typography_theme:customizations:breakpoint_styles:mobile:letter_spacing:unit=px
:typography_theme:customizations:breakpoint_styles:mobile:line_height:unit=em
:typography_theme:customizations:breakpoint_styles:mobile:line_height:value=1.25
:typography_theme:customizations:breakpoint_styles:mobile:overwrite_text_settings=1
:typography_theme:customizations:breakpoint_styles:tablet:font_size:unit=px
:typography_theme:customizations:breakpoint_styles:tablet:font_size:value=40
:typography_theme:customizations:breakpoint_styles:tablet:letter_spacing:unit=px
:typography_theme:customizations:breakpoint_styles:tablet:line_height:unit=em
:typography_theme:customizations:breakpoint_styles:tablet:line_height:value=1.2
:typography_theme:customizations:breakpoint_styles:tablet:overwrite_text_settings=1
:typography_theme:customizations:styles:color:value=%23fd1111
:typography_theme:customizations:styles:font:code=inter
:typography_theme:customizations:styles:font:font:active=0
:typography_theme:customizations:styles:font:font:code=inter
:typography_theme:customizations:styles:font:font:family=Inter%2C+sans-serif
:typography_theme:customizations:styles:font:font:google_font_name=Inter
:typography_theme:customizations:styles:font:font:name=Inter
:typography_theme:customizations:styles:font:font:styles:italic=1
:typography_theme:customizations:styles:font:font:styles:normal=1
:typography_theme:customizations:styles:font:font:type=google
:typography_theme:customizations:styles:font:font:weights:300=1
:typography_theme:customizations:styles:font:font:weights:400=1
:typography_theme:customizations:styles:font:font:weights:500=1
:typography_theme:customizations:styles:font:font:weights:600=1
:typography_theme:customizations:styles:font:font:weights:700=1
:typography_theme:customizations:styles:font:style=normal
:typography_theme:customizations:styles:font:weight=700
:typography_theme:customizations:styles:font_size:unit=px
:typography_theme:customizations:styles:font_size:value=76
:typography_theme:customizations:styles:letter_spacing:unit=px
:typography_theme:customizations:styles:letter_spacing:value=10
:typography_theme:customizations:styles:line_height:unit=em
:typography_theme:customizations:styles:line_height:value=1.1
:typography_theme:customizations:styles:overflow_wrap:value=normal
:typography_theme:customizations:styles:overwrite_color=1
:typography_theme:customizations:styles:overwrite_font=1
:typography_theme:customizations:styles:overwrite_text_settings=1
:typography_theme:customizations:styles:text_transform:value=none
:typography_theme:customizations:styles:white_space:value=normal
:typography_theme:theme_available=1
:typography_theme:theme_mode=1
:typography_theme:type=heading

Note

The customizations structure will depend on the themes setup in Theme Editor. The example uses the default Paragraph Theme.

Template Usage#

<mvt:if expr="l.settings:instance:typography_theme:theme_available">
  <mvt:if expr="NOT ISNULL l.settings:instance:typography_theme:stylesheet">
    <template data-theme-stylesheet>
      &mvt:instance:typography_theme:stylesheet;
    </template>
  </mvt:if>
</mvt:if>

JavaScript Access#

var instance = <mvt:eval expr="miva_json_encode( l.settings:instance, '' )" />;
var code = instance.typography_theme.code;
var size = instance.typography_theme.size;
var customizations = instance.typography_theme.customizations;

console.log(code, size, customizations);

Best Practices#

  • Use supports_legacy: true when migrating older components.
  • Use supports_customization: true if you want to allow style overrides in Page Builder.
  • Combine with preview_property_selector for live preview alignment.
  • Render stylesheet if customizations are set.