Skip to content

Testing Your Integration#

After applying Theme Editor integration to a custom theme, you’ll want to verify that every heading, button, link, and navigation element is actually picking up merchant customizations. This page walks through a practical testing approach.

How Verification Works#

The Theme Editor outputs CSS that targets specific mm-theme-* classes. If an element has the correct class, a merchant’s customization applies. If it doesn’t, the element renders with its default (Shadows-provided) styling. Testing comes down to confirming that the visible styling of each element actually responds to Theme Editor changes.

The most reliable way to check this is to configure the Theme Editor with a distinctive set of colors — one per typography and button category — and then walk through your storefront confirming that each type of element picks up the expected color.

Setting Up a Test Theme#

Import or manually configure a Theme Editor profile that uses a unique, distinctive color for each typography and button class. Recommended mapping:

Typography Colors#

Theme Editor typography Color
Display One Red
Display Two Green
Display Three Blue
Title One Orange
Title Two Purple
Title Three Yellow
Title Four Pink
Subheading Large Brown
Subheading Small Gold
Subheading Extra-Small Lime
Paragraph Large Dark Red
Paragraph Small Dark Blue
Paragraph Extra-Small Dark Green
Theme Editor button / link Color
Primary Red
Secondary Orange
Display Link Green
Primary Link Blue
Secondary Link Purple

Choose distinct font families as well if you want to test typography selection independently from color.

Reading the Results#

With the test theme applied, every element you’ve converted should render in the expected color. Any element still in black, gray, or its original color indicates that the Theme Editor class is either missing or wrong.

When you spot an unconverted element, work backward: view the page source, find the class="" attribute, and cross-reference it with the Class Mapping Tables to confirm what class it should have.

Verification Checklist#

Walk through these pages with the test theme applied. For each page, confirm the listed elements render in the expected color.

Global Chrome#

On any page:

  • Site header hamburger/search icons — should be in the Primary Navigation color (Blue).
  • Header basket link — Primary Navigation (Blue).
  • Account toggle — Primary Navigation (Blue).
  • Main navigation links — Secondary Navigation (Purple).
  • Footer menu headings (“Customer Service,” etc.) — Subheading Small (Gold).
  • Footer menu links — Secondary Navigation (Purple).
  • Minibasket item names — Primary Navigation (Blue).
  • Minibasket total — Subheading Small (Gold).
  • Minibasket checkout button — Primary (Red).

Customer Login (LOGN)#

  • “Welcome Back” heading — Title Four (Pink).
  • “Forgot Password?” link — Secondary Link (Purple).
  • “Log In” button — Primary (Red).
  • “New Customers” heading — Title Four (Pink).
  • “Create My Account” button — Secondary (Orange).

Account Landing (ACLN)#

  • Page title — Title Two (Purple).
  • Section labels in the sidebar — Title Four (Pink).
  • Sidebar menu action links — Secondary Link (Purple).
  • Primary action buttons — Primary (Red).

Create / Edit Account (via customer.htm)#

  • Page title — Title Two (Purple).
  • “Log In Information,” “Contact Info” section headings — Title Four (Pink).
  • Labels above field groups — Subheading Extra-Small (Lime).
  • “Save” button — Primary (Red).
  • Any in-form action links — Secondary Link (Purple).

Address Book#

  • Page title — Title Two (Purple).
  • “Default Shipping Address,” “Default Billing Address” headings — Title Four (Pink).
  • “Additional Addresses” heading — Title Three (Yellow).
  • “Edit,” “Delete,” “Set as Default Shipping/Billing” links — Secondary Link (Purple).
  • “Add An Address” button — Primary (Red).
  • “Delete This Address” button — Secondary Link (Purple) with red override.

Cart (BASK)#

  • “Your Cart” title — Title Three (Yellow).
  • Product names — Primary Navigation (Blue).
  • Product attributes / options — Paragraph Extra-Small (Dark Green).
  • Discount/strikethrough prices — Discount Extra-Small color.
  • “Edit,” “Save for Later,” “Remove” links — Secondary Link (Purple).
  • “Start Shopping” button (empty cart) — Primary (Red).
  • “Update Cart,” “Checkout” buttons — Primary (Red).
  • “Continue Shopping” link/button — Primary (Red) or Secondary (Orange) depending on role.

Order Customer (OCST)#

  • Order summary sidebar subheadings (“Shipping To,” “Billing To,” “Payment Method”) — Subheading Extra-Small (Lime).
  • Order summary body text — Paragraph Extra-Small (Dark Green).

Order Selection / Order Payment (OSEL / OPAY)#

  • Page title — Title Two (Purple).
  • Section headings (“Shipping Method,” “Payment Method,” “Billing Address”) — Title Four (Pink).
  • CVV help link — Secondary Link (Purple).
  • Continue / Place Order button — Primary (Red).
  • Back links styled as secondary action — Secondary Link (Purple).

Invoice (INVC)#

  • Page title — Title Two (Purple).
  • Order confirmation heading — Title Four (Pink).
  • Thank-you subheading — Subheading Small (Gold).
  • Order metadata labels — Subheading Extra-Small (Lime).
  • Continue shopping button — Primary (Red).

Order History (ORHL)#

  • Page title — Title Two (Purple).
  • “Customer Service” heading — Title Four (Pink).
  • “Contact Customer Service” button — Secondary (Orange).
  • Customer Service link — Secondary Link (Purple).
  • (The sort-header buttons are intentionally not themed — they will remain in their native styling.)

Order Detail / View Order (ORDL, ORDS)#

  • Page title — Title Two or Title Four (depending on page).
  • Section headings — Title Four (Pink).
  • Print, Track Shipment buttons — Display Link (Green) or Primary (Red).
  • Reorder button — Primary (Red).

Wish List (WISH, WLST)#

  • Page title — Title Two (Purple).
  • Sub-headings — Title Four (Pink).
  • Move-to-cart / Remove buttons — Primary (Red) and Secondary (Orange).
  • Pagination links — Secondary (Orange).

Static Pages (ABUS, FAQS, CTUS)#

  • Page titles — Title Two (Purple).

Category Tree (sidebar nav on category and product pages)#

  • Tree heading — Title Four (Pink).
  • Tree links — Secondary Navigation (Purple).
  • Tree sublabels — Subheading Extra-Small (Lime).

Dialogs (address validation, shipping estimate, CVV help, etc.)#

  • Dialog titles — Title Three or Title Four (Yellow or Pink) depending on dialog.
  • Dialog action buttons — Primary (Red) or Secondary (Orange).

Mobile / Tablet Views#

On a mobile or narrow viewport:

  • Mobile nav menu titles — Subheading Small (Gold).
  • Mobile nav collapsible toggles — Subheading Small (Gold).
  • Mobile nav links — Secondary Navigation (Purple).

What to Do If an Element Is Off#

When you find an element rendering in the wrong color:

  1. View page source or inspect the element in browser devtools.
  2. Copy the full class="" attribute value.
  3. Cross-reference with the Class Mapping Tables.
  4. Determine whether the element is missing a Theme Editor class, has the wrong Theme Editor class, or is on the Classes Deliberately Left Unchanged list.
  5. If it’s a real miss, update the relevant template file, re-deploy, and re-verify.

Reverting the Test Theme#

Once verification is complete, revert the Theme Editor to your merchant’s intended configuration. The classes in markup stay the same — only the CSS output by the Theme Editor changes — so no template updates are required to revert styling.

Automated Verification#

For larger themes or as part of CI, you can run text-level checks against the deployed templates:

# Every c-heading-* outside of print templates should have a paired mm-theme-typography-*
# on the same element. A discrepancy indicates a missed conversion.
grep -rnE 'class="[^"]*c-heading-(alpha|bravo|charlie|delta|echo|foxtrot)[^"]*"' templates/ properties/readytheme_contentsection/ \
  | grep -v printer_friendly \
  | grep -v 'mm-theme-typography-'

# Every c-button outside of utility exceptions should be paired with an mm-theme-button-*
grep -rnE 'class="[^"]*\bc-button\b[^"]*"' templates/ properties/readytheme_contentsection/ \
  | grep -v 'mm-theme-button-' \
  | grep -vE 'c-button--(as-link|as-text|flush|full|full-small|clear)'

These grep expressions flag specific patterns that should have Theme Editor partners. Any matches are either oversights or intentional exceptions — review each one against the Classes Deliberately Left Unchanged list.