Addon News from September 7, 2026

7. 9. 2026

Improvements

Addon settings pages can follow the administration design and dark mode

Shop administrators can now switch Shoptet administration to the new design and dark mode. Embedded addon settings pages can follow the selected design without a reload.

This change affects pages embedded in the administration through an iframe. It does not affect storefront templates.

We will gradually roll out the new design to clients throughout September, with the option to switch between the new and old design. This option will be removed after some time, leaving only the new design available.

What you need to do

Load the components and @shoptet/ui/index.css from @shoptet/ui version 0.22.0-beta or newer. If you have your own build, import index.less instead.
Add the script below to your settings pages. It applies the class names from the administration to your <body>.

window.addEventListener('message', event => {
  const data = event.data;
  if (!data || data.type !== 'shoptet:admin-theme') {
    return;
  }
  for (const [name, enabled] of Object.entries(data.bodyClasses)) {
    document.body.classList.toggle(name, enabled);
  }
});
window.parent.postMessage({ type: 'shoptet:admin-theme-request' }, '*');

How it works

New design rules are scoped under body.theme-brand and body.theme-dark. The administration page posts its current body classes to the iframe page using postMessage. The script will also apply future classes introduced during the rollout.

Message format

Sent from the administration to your iframe:

{
  type: 'shoptet:admin-theme',
  bodyClasses: {
    'iframe-section': true,
    'theme-brand': true | false,
    'theme-dark': true | false
  }
}

Each class has a boolean value: true adds it and false removes it.
Use the default design until you receive a message.
The administration always sends iframe-section, which supplies the page background.
To accept messages only from the shop, compare event.origin with the shop URL. The addon settings documentation has an example.

Custom UI

The theme sets CSS custom properties on body.theme-brand and overrides administration classes such as .btn, .table and .tag. Use these selectors for custom components:

body.theme-brand when the new design is active,
body.theme-dark when dark mode is active.