Skip to content

Global elements

This page describes system elements that are automatically injected into templates. Their HTML structure and behavior are controlled by the system — in the template you can only affect their appearance via CSS.

Global variables available in all templates (cart, customer, shop, repository, etc.) can be found in the object reference.

Announcements

In the admin panel under Texts / Announcements, you can create informational announcements that are displayed above the website. Announcements have a defined validity period, display style, and an optional close button. The styles are predefined and announcements should work without any template modifications.

To test announcements while working on a template, you can trigger a placeholder announcement by adding a URL parameter:

  • ?_previewAnnouncement=info
  • ?_previewAnnouncement=warning
  • ?_previewAnnouncement=important

The HTML is fixed and generated automatically, but you can adjust the appearance via CSS in the template. When modifying the appearance, only cosmetic tweaks should be made — matching the announcement color shade, font size, and similar. Larger changes should always be made centrally in the system.

Likewise, it is not possible to attach custom JavaScript to announcements in the template.

In the admin panel, announcements currently support switching between these classes:

  • global-announcement--info
  • global-announcement--warning
  • global-announcement--important
html
<div class="global-announcement global-announcement--warning global-announcement--has-close">
  <div class="global-announcement__inner">
      Announcement text with a <a href="/">link</a> and <strong>highlighting</strong>
    <a class="global-announcement__close" href="#" onclick="..."></a>
  </div>
</div>