Class Mapping Tables#
This page lists every legacy Shadows class and the Theme Editor class that replaces or pairs with it. Use this page when converting templates from pre-26.01.00 Shadows to the current integration.
If you’re writing new templates from scratch, use the Class Reference instead.
Reference Version
The class transitions on this page reflect the canonical migration from Shadows 10.13.04 to 26.01.00. If your theme is based on an earlier version of Shadows, the class names being replaced should still apply — but some patterns may not appear in your templates at all.
How to Read These Tables#
- Left column: The legacy class (or structural class the Theme Editor class is appended to) as it appeared in Shadows 10.13.04 templates.
- Right column: The class attribute value it becomes in 26.01.00+.
Some transitions replace the legacy class entirely; others layer the Theme Editor class on top of a structural class that stays. The right-hand column shows exactly what the final class="" attribute should contain for that element, preserving any retained classes.
Headings to Typography#
The core heading conversion. Search for these c-heading-* classes and replace them with the matching mm-theme-typography-* class. Adjacent utility classes (like u-text-center, u-color-red, u-hidden) should be retained unchanged.
| Legacy heading | Theme Editor replacement |
|---|---|
c-heading-alpha |
mm-theme-typography-display-two |
c-heading-bravo |
mm-theme-typography-display-three |
c-heading-charlie |
mm-theme-typography-title-one |
c-heading-delta |
mm-theme-typography-title-two |
c-heading-echo |
mm-theme-typography-title-three |
c-heading-foxtrot |
mm-theme-typography-title-four |
Subheadings#
| Legacy subheading | Theme Editor replacement |
|---|---|
c-heading--subheading--x-small |
mm-theme-typography-subheading-extra-small |
c-heading--subheading--small |
mm-theme-typography-subheading-small |
c-heading--subheading--large |
mm-theme-typography-subheading-large |
c-heading--subheading (unsized) |
mm-theme-typography-subheading-small |
Padlock icons
The c-heading--subheading--x-small u-icon-secure combination (used next to SSL/secure checkout padlocks) drops the subheading class entirely — the element inherits its typography from a parent container in converted markup. Don’t re-add the subheading class here.
Primary and Secondary Buttons#
| Legacy button | Theme Editor replacement |
|---|---|
c-button c-button--small |
mm-theme-button-primary mm-theme-button-primary__extra-small |
c-button |
mm-theme-button-primary mm-theme-button-primary__small |
c-button c-button--large |
mm-theme-button-primary mm-theme-button-primary__medium |
c-button c-button--secondary c-button--small |
mm-theme-button-secondary mm-theme-button-secondary__extra-small |
c-button c-button--secondary |
mm-theme-button-secondary mm-theme-button-secondary__small |
c-button c-button--secondary c-button--large |
mm-theme-button-secondary mm-theme-button-secondary__medium |
Structural classes are retained
When converting buttons, keep any c-button--full, c-button--full-small, or other layout/positioning modifiers. Only the styled button portion (c-button, c-button--secondary, c-button--small, c-button--large) is replaced with Theme Editor classes. The position of the retained structural class in the final class="" attribute (before or after the Theme Editor classes) is not significant.
Size offset
Shadows button modifiers don’t map one-to-one to Theme Editor sizes:
- Shadows
--small→ Theme Editor__extra-small - Shadows default (no modifier) → Theme Editor
__small - Shadows
--large→ Theme Editor__medium
As-Link and As-Text Buttons#
c-button--as-link and c-button--as-text are not converted during the Theme Editor integration. Leave every occurrence of these classes exactly as it is in the template — do not replace or append a Theme Editor class. See Classes Deliberately Left Unchanged.
Navigation, Menus, and Chrome Links#
These are additive — the legacy structural class stays, and the Theme Editor class is appended.
| Structural class | Theme Editor addition |
|---|---|
t-basket__product-name |
mm-theme-button-primary-navigation mm-theme-button-primary-navigation__medium |
t-global-account-toggle |
mm-theme-button-primary-navigation mm-theme-button-primary-navigation__medium |
t-site-header__basket-link |
mm-theme-button-primary-navigation mm-theme-button-primary-navigation__medium |
x-mini-basket__item-name |
mm-theme-button-primary-navigation mm-theme-button-primary-navigation__medium |
c-menu__link |
mm-theme-button-secondary-navigation mm-theme-button-secondary-navigation__medium |
c-menu__text |
mm-theme-button-secondary-navigation mm-theme-button-secondary-navigation__medium |
c-navigation__link |
mm-theme-button-secondary-navigation mm-theme-button-secondary-navigation__medium |
c-navigation__text |
mm-theme-button-secondary-navigation mm-theme-button-secondary-navigation__medium |
x-fasten-header__navigation-link |
mm-theme-button-secondary-navigation mm-theme-button-secondary-navigation__medium |
x-transfigure-navigation__footer-link |
mm-theme-button-secondary-navigation mm-theme-button-secondary-navigation__medium |
x-search-preview__item-name |
mm-theme-button-secondary-navigation mm-theme-button-secondary-navigation__medium |
u-icon-cross (minibasket close) |
mm-theme-button-primary-navigation mm-theme-button-primary-navigation__extra-small |
When to use primary-navigation vs. secondary-navigation:
- Primary-navigation — destination links: basket link, account toggle, product names that lead to product pages.
- Secondary-navigation — site chrome: main nav, menus, footer nav, category tree, breadcrumbs.
Category Tree#
The category tree extension has its own class family. Most entries are additive.
| Legacy class | Theme Editor replacement / addition |
|---|---|
x-category-tree__heading |
x-category-tree__heading mm-theme-typography-title-four |
x-category-tree__label x-collapsible-content__toggle |
x-category-tree__label x-collapsible-content__toggle mm-theme-typography-subheading-extra-small |
x-category-tree__link-set |
mm-theme-typography-subheading-small |
x-category-tree__link |
x-category-tree__link mm-theme-button-secondary-navigation mm-theme-button-secondary-navigation__medium |
x-category-tree__link x-category-tree__link--current |
x-category-tree__link mm-theme-button-secondary-navigation mm-theme-button-secondary-navigation__medium x-category-tree__link--current |
x-category-tree__text |
x-category-tree__text mm-theme-button-secondary-navigation mm-theme-button-secondary-navigation__medium |
x-category-tree__link u-text-underline |
mm-theme-button-secondary-link mm-theme-button-secondary-link__medium x-category-tree__link |
Utility-Styled Text to Theme Typography#
These are the hardest transitions to find with search-and-replace, because there’s no c-heading-* class to grep for. These elements used utility classes to achieve the typography they needed, and now use Theme Editor classes instead.
| Legacy class | Theme Editor replacement |
|---|---|
u-font-small |
mm-theme-typography-paragraph-extra-small |
u-font-tiny u-text-regular |
mm-theme-typography-paragraph-extra-small |
u-color-gray-600 (small body text) |
mm-theme-typography-paragraph-extra-small |
u-color-black u-text-medium |
mm-theme-typography-subheading-extra-small |
u-text-bold |
mm-theme-typography-subheading-extra-small |
u-text-bold u-block |
u-text-bold u-block mm-theme-typography-price-extra-small |
Utility-Styled Text to Link Buttons#
Utility classes that were styling inline text-links are replaced with the link-button family.
| Legacy class | Theme Editor replacement |
|---|---|
u-text-medium |
mm-theme-button-secondary-link mm-theme-button-secondary-link__medium |
u-text-regular |
mm-theme-button-secondary-link mm-theme-button-secondary-link__medium |
t-input-font-size |
mm-theme-button-secondary-link mm-theme-button-secondary-link__medium |
t-input-font-size u-text-medium |
mm-theme-button-secondary-link mm-theme-button-secondary-link__medium |
u-color-gray-600 u-text-medium |
mm-theme-button-secondary-link mm-theme-button-secondary-link__medium |
u-color-gray-600 (inline link) |
mm-theme-button-secondary-link mm-theme-button-secondary-link__medium |
u-color-gray-50 |
mm-theme-button-secondary-link mm-theme-button-secondary-link__medium |
u-color-gray-50 u-font-small |
mm-theme-button-secondary-link mm-theme-button-secondary-link__extra-small |
u-color-gray-600 u-font-small |
mm-theme-button-secondary-link mm-theme-button-secondary-link__extra-small |
u-block u-text-center (full-width text CTA) |
c-button--full mm-theme-button-display-link mm-theme-button-display-link__medium |
t-input-font-size u-block u-text-center u-text-medium |
mm-theme-button-display-link mm-theme-button-display-link__medium c-button--full |
Dialog Titles#
c-dialog__title is a structural class and is retained; only the heading portion is swapped.
| Legacy class | Theme Editor replacement |
|---|---|
c-dialog__title c-heading-foxtrot |
c-dialog__title mm-theme-typography-title-four |
c-dialog__title c-heading-echo |
c-dialog__title mm-theme-typography-title-three |
c-dialog__options-title c-heading-foxtrot |
c-dialog__options-title mm-theme-typography-title-four |
c-dialog__option-title u-text-bold |
c-dialog__option-title mm-theme-typography-subheading-extra-small |
Compound Heading Classes#
Heading classes combined with c-form-list__item, o-layout__item, or c-table-simple__cell structural classes. The structural portion is retained; only the heading class is swapped.
| Legacy class | Theme Editor replacement |
|---|---|
o-layout__item o-layout--no-grow c-heading-foxtrot |
o-layout__item o-layout--no-grow mm-theme-typography-title-four |
c-form-list__item c-form-list__item--full c-heading-foxtrot |
c-form-list__item c-form-list__item--full mm-theme-typography-title-four |
c-form-list__item c-form-list__item--full o-layout__item c-heading-foxtrot |
c-form-list__item c-form-list__item--full o-layout__item mm-theme-typography-title-four |
c-table-simple__cell c-heading--subheading--small o-layout--justify-between u-flex |
c-table-simple__cell o-layout--justify-between u-flex mm-theme-typography-subheading-small |
c-table-simple__cell u-flex o-layout--justify-between c-heading-foxtrot u-text-bold |
c-table-simple__cell u-flex o-layout--justify-between mm-theme-typography-title-four |
Price and Discount Markers#
Brand-new class family for commerce-specific typography.
| Legacy class | Theme Editor replacement |
|---|---|
u-flex u-color-red (discount price) |
u-flex mm-theme-typography-discount-extra-small |
u-block u-color-red (discount price) |
u-block mm-theme-typography-discount-extra-small |
t-product-charge__amount-original |
t-product-charge__amount-original mm-theme-typography-additional-price-extra-small |
t-product-charge__amount-total |
t-product-charge__amount-total mm-theme-typography-price-extra-small |
u-text-bold u-block (wishlist price cell) |
u-text-bold u-block mm-theme-typography-price-extra-small |
Classes Deliberately Left Unchanged#
The following patterns are intentionally not converted. Do not apply Theme Editor classes to these elements when migrating.
| Class | Reason |
|---|---|
c-button c-button--flush c-button--full |
Icon-only utility buttons (hamburger menu trigger, search trigger) — structural, not themed |
c-button c-control-group__button |
Form control group buttons (attached search submit) — structural, not themed |
c-button--as-link (all occurrences) |
Not converted — leave as-is |
c-button--as-text (all occurrences) |
Not converted — leave as-is |
All classes inside components/printer_friendly_content.htm |
Print-only template; Theme Editor doesn’t affect print output |