Skip to content

Theme Editor Integration for Shadows#

Shadows 26.01.00+

This section documents how the Shadows framework integrates with Miva’s Theme Editor. It applies to Shadows 26.01.00 and later. If you are working on a custom theme derived from an earlier version of Shadows and want to enable Theme Editor customization across your storefront, this section is the reference you want.

Reference Version

The template file paths, component names, page listings, and class transition counts throughout this section are based on Shadows 10.13.04 — the last version before Theme Editor integration was introduced in 26.01.00. If your theme was forked from an earlier version of Shadows, some templates may not exist, may have different names, or may have different markup structures. Use the documented patterns as a guide and adapt them to your actual template files.

Overview#

Miva’s Theme Editor lets merchants define typography, button, and link styles once in the Admin and have those styles applied consistently across their entire storefront. Before Shadows 26.01.00, Theme Editor styles only took effect within Flex Components — meaning only a handful of pages (ABUS, CTGY, CTLG, CTUS, FAQS, SARP, PLST, PROD, PATR, PRPO, SFNT, SRCH) picked up merchant customizations automatically. Every other page — the account pages, checkout flow, order history, wishlist pages, the global header, the global footer, and so on — used Shadows’ native c-heading-* and c-button classes, which the Theme Editor has no awareness of.

Shadows 26.01.00 wires the Theme Editor into the entire framework. The mm-theme-* class families are now applied directly in template markup alongside (or in place of) the legacy Shadows classes, so a merchant’s typography and button choices reach every page, every component, and every extension.

Why You Might Need This Section#

You’ll find this section useful if you are:

  • Upgrading a custom theme from an earlier Shadows version and want to bring the same Theme Editor support into your customizations.
  • Maintaining a fork of Shadows that predates 26.01.00 and need to apply the same class updates manually.
  • Building a new custom component or page and need to know which Theme Editor class corresponds to which visual treatment.
  • Debugging why a Theme Editor customization isn’t taking effect on a specific element and need to see which mm-theme-* class should be there.

How the Integration Works#

The Theme Editor outputs a set of CSS rules into the mm-theme-styles CSS resource, which is loaded on every page that has a Page Builder layout (effectively all storefront pages). These rules target specific CSS class names like mm-theme-typography-title-two or mm-theme-button-primary. When a merchant adjusts a style in the Theme Editor UI, the corresponding rule in mm-theme-styles changes — but the classes only take effect on elements where you’ve applied them in markup.

The update in 26.01.00 applies these classes wherever Shadows previously relied on its own classes for the same visual purpose. For example:

  • A <h1> that used to read class="c-heading-delta" now reads class="mm-theme-typography-title-two".
  • A submit button that used to read class="c-button" now reads class="mm-theme-button-primary mm-theme-button-primary__small".
  • A footer menu heading that had no themed class at all now reads class="c-menu__title mm-theme-typography-subheading-small".

Some replacements are one-for-one swaps. Others are additive, layering the Theme Editor class on top of a structural class like c-menu__title or t-basket__product-name. The Migration Guide walks through both patterns in detail.

What’s in This Section#

  • Class Reference

    The complete catalog of Theme Editor classes used in Shadows — typography, buttons, link buttons, navigation buttons, display links, and commerce-specific classes for prices and discounts.

  • Migration Guide

    Step-by-step guidance for applying Theme Editor integration to an existing custom theme or Shadows fork. Covers the replacement patterns, special cases, and search-and-replace strategies.

  • Class Mapping Tables

    The authoritative old-class → new-class lookup tables. Use this when you have an existing c-heading-*, c-button, or utility-styled element and need to know what to change it to.

  • Testing Your Integration

    How to verify your Theme Editor integration is working correctly across every page of your storefront.

  • GitHub Diff — 10.13.04 → 26.01.00

    The canonical line-by-line diff of every template file changed in the Shadows Theme Editor integration. Use this as the authoritative reference when applying or auditing changes in your own theme.

Terminology#

Throughout this section:

Term Meaning
Legacy class A Shadows class like c-heading-delta or c-button that predates Theme Editor integration.
Theme Editor class A class in the mm-theme-* family (e.g. mm-theme-typography-title-two, mm-theme-button-primary) that picks up merchant customizations automatically.
Structural class A class that controls layout or positioning rather than appearance — e.g. c-button--full, c-form-list__item, t-basket__product-name. These are retained unchanged.
Utility class A single-purpose helper like u-text-center, u-color-red, u-hidden. Some utility classes that were standing in for typography (u-font-small, u-text-medium) were replaced with Theme Editor classes during the update; most were left untouched.

Next Steps#

If you’re upgrading an existing theme, start with the Migration Guide. If you’re building something new and just need to know which class to use, the Class Reference is the fastest starting point.