Shopware Design

Migration

If you're using older sw- components, here's how to transition to Meteor.

Component mapping

  • sw-buttonmt-button
  • sw-text-fieldmt-text-field
  • sw-cardmt-card
  • sw-bannermt-banner
  • sw-checkboxmt-checkbox
  • sw-switch-fieldmt-switch
  • sw-selectmt-select
  • sw-datepickermt-datepicker

Design tokens

Replace custom CSS variables or hard-coded colors with Meteor tokens:

/* Use Meteor tokens directly */
color: var(--color-icon-primary-default);

Icons

The component name is the same. The tag just changes from sw-icon to mt-icon. See the Icons page for the full icon set and usage guidance.

<mt-icon name="regular-checkmark-circle" />

From admin-extension-sdk to meteor-admin-sdk

The @shopware-ag/admin-extension-sdk package was archived in March 2024 and replaced by @shopware-ag/meteor-admin-sdk.

npm uninstall @shopware-ag/admin-extension-sdk
npm install @shopware-ag/meteor-admin-sdk

Update your imports:

// Before
import { notification } from "@shopware-ag/admin-extension-sdk";

// After
import { notification } from "@shopware-ag/meteor-admin-sdk";

For the full API and usage guidance, see the Admin SDK documentation.

Gradual migration

Meteor works alongside existing components. Migrate page by page rather than all at once:

  1. Install Meteor alongside your existing setup
  2. Replace components one at a time
  3. Update styling to use design tokens progressively
  4. Test each step before continuing

Between Meteor versions

When upgrading between major versions of Meteor packages, check the changelog for breaking changes. Each release includes a changelog entry that lists renamed props, removed components, and token renames.

For minor and patch releases, upgrades are safe without additional migration steps.