Best Practices für Theme-Entwickler

Templates

• Immer Defaults angeben: {{ section.settings.heading | default: 'Überschrift' }}.

• Leere Felder prüfen: {% if section.settings.heading != blank %}.

• section.id für eindeutige IDs verwenden.

• Leerzustand für Sections mit Blocks anbieten.

• Für jede Section mindestens ein Preset mit realistischen Inhalten.

Schema

• Setting-IDs kurz und sprechend (bg_color, show_cta).

• info für Hinweise nutzen, z. B. „Empfohlen: 1920 × 1080 px“.

• category setzen – sie erscheint als Filter im Section-Dialog.

• Header-/Footer-Sections mit enabled_on einschränken.

CSS

• Theme-Einstellungen als CSS Custom Properties, Sections nutzen var(--…).

• BEM-Klassen und eine zentrale .container-Klasse.

• In <style> immer | css_safe.

Performance

• Assets nur über | asset_url.

• Bilder mit loading="lazy" und decoding="async".

• JavaScript gekapselt und idempotent, Re-Init auf pb:patch.

• Kein document.write().

Editor

• Ein Root-Element pro Section.

• Richtext in einem eigenen <div>, nie escapen.

• editor_attributes bei gefilterten Blocks und Menü-Links.

Recht

• {% consent_banner %} im Layout, {% consent_link %} im Footer.

• Eine Section mit {% consent_declaration %}.

• Drittinhalte hinter {% consent_placeholder %}.

• Keine Tracking-Skripte fest im Theme.

Vor der Übergabe testen

1. Jede Section im PageBuilder hinzufügen, bearbeiten, duplizieren, ausblenden.

2. Mobil (375 px), Tablet und Desktop prüfen.

3. Seite veröffentlichen und auf der Vorschau-Domain im Inkognito-Fenster ansehen.

4. Banner: akzeptieren, ablehnen, widerrufen.

5. Lighthouse auf der Live-Seite ausführen.