Skip to main content

​
Übersicht

In diesem Tab kannst du zusätzliche Mountpoints (Ankerpunkte) für den OnPage Composer aktivieren. So kannst du Portlets an vielen zusätzlichen Stellen in deinem Onlineshop platzieren und erhältst dadurch mehr Gestaltungsfreiheit in deinem Shop.
Was sind Mountpoints?Mountpoints sind vordefinierte Positionen im Shop-Template, an denen du über den OnPage Composer (OPC) Inhalte platzieren kannst. Standardmäßig bietet JTL-Shop bereits viele Mountpoints - mit diesem Tool erhältst du Zugriff auf zusätzliche, erweiterte Positionen.

​
Features

Erweiterte Platzierung

Platziere OPC-Portlets an zusätzlichen Stellen, die standardmäßig nicht verfügbar sind.

Mehr Flexibilität

Erhalte volle Kontrolle über die Positionierung deiner Inhalte im gesamten Shop-Layout.

Einfache Aktivierung

Aktiviere nur die Mountpoints, die du tatsächlich benötigst - kein unnötiger Overhead.

Template-kompatibel

Funktioniert mit allen Standard-Templates und den meisten Custom-Templates.

​
Mountpoint-Verwaltung

​
Mountpoints aktivieren

Mountpoint Settings
1

Gewünschte Mountpoints auswählen

Setze den Haken neben den Mountpoints, die du aktivieren möchtest.
Du kannst mehrere Mountpoints gleichzeitig aktivieren. Aktiviere nur die, die du wirklich benötigst.
2

Einstellungen speichern

Klicke auf “Speichern”, um die Änderungen zu übernehmen.
Die Mountpoints sind sofort im OnPage Composer verfügbar - kein Cache-Leeren erforderlich.
3

Im OPC verwenden

Öffne den OnPage Composer und wähle die neue Position aus der Mountpoint-Liste aus.

​
Verfügbare Mountpoints

Die folgenden zusätzlichen Mountpoints können aktiviert werden:
Top Header
  • Position: Ganz oben, vor dem Haupt-Header
  • Verwendung: Announcement Bars, Top-Banner, Info-Leisten
  • Beispiel: “Kostenloser Versand ab 50€” Banner
  • Versandkostenfrei-Banner
  • Flash Sale Ankündigungen
  • Cookie-Hinweise (oberhalb)
  • Newsletter-Anmeldung (sticky)
  • Wichtige Ankündigungen
After Logo
  • Position: Direkt nach dem Shop-Logo
  • Verwendung: USPs, Trust-Badges, Zusatzinformationen
  • Beispiel: “Seit 1990 Ihr Partner” Badge
Before Navigation
  • Position: Vor der Hauptnavigation
  • Verwendung: Kategorie-Highlights, Promo-Buttons
After Navigation
  • Position: Nach der Hauptnavigation
  • Verwendung: Sub-Navigation, Breadcrumbs-Erweiterung

​
Template-Kompatibilität

Voll kompatibel ✓Alle Mountpoints funktionieren out-of-the-box mit dem NOVA Template.
  • Keine zusätzliche Konfiguration nötig
  • Responsive Design automatisch übernommen
  • Alle Positionen visuell optimal integriert
Voll kompatibel ✓Das EVO Template unterstützt alle erweiterten Mountpoints.
  • Automatische Integration in das Grid-System
  • Mobile-First Ansatz wird beibehalten
  • Styling passt sich automatisch an
Eingeschränkt kompatibel ⚠Bei Custom Templates hängt die Kompatibilität vom Template-Aufbau ab.Was funktioniert:
  • Alle Standard-Hook-Positionen
  • Container-basierte Mountpoints
Was möglicherweise angepasst werden muss:
  • CSS-Styling für optimale Darstellung
  • Responsive Breakpoints
  • Z-Index bei Overlays
Teste neue Mountpoints zunächst im Staging-System, bevor du sie live schaltest.
Voll kompatibel ✓Child Templates erben die Mountpoint-Unterstützung vom Parent Template.
  • Kann in Child Template überschrieben werden
  • Styling kann angepasst werden
  • Funktionalität bleibt erhalten

​
Best Practices

Grundregel: Aktiviere nur Mountpoints, die du wirklich nutztWarum:
  • Jeder aktive Mountpoint bedeutet zusätzliche DOM-Nodes
  • Kann minimale Performance-Auswirkungen haben
  • Übersichtlichkeit im OPC bleibt erhalten
Empfehlung: Starte mit 2-3 Mountpoints und erweitere nach Bedarf
Bei der Platzierung bedenken:
  • Wie sieht der Mountpoint auf mobilen Geräten aus?
  • Ist der Inhalt auch mobil sinnvoll?
  • Beeinträchtigt es die User Experience?
Testing:
  • Teste auf echten Mobilgeräten
  • Prüfe verschiedene Bildschirmgrößen
  • Achte auf Touch-Bedienbarkeit
Nutze im OPC die mobile Vorschau, um Inhalte zu optimieren.
Kritische Bereiche:
  • Header-Mountpoints: Können above-the-fold Performance beeinflussen
  • Sidebar-Mountpoints: Bei vielen Elementen CPU-intensive
  • Checkout-Mountpoints: Sollten leichtgewichtig sein
Optimierung:
  • Bilder lazy loaden
  • Scripts asynchron laden
  • CSS inline für critical content
  • Minimale DOM-Struktur verwenden
Design-Prinzipien:
  • Halte das Design konsistent
  • Verwende Shop-Farben und -Fonts
  • Achte auf einheitliche Abstände
  • Befolge das Grid-System des Templates
Content-Strategie:
  • Klare Hierarchie beachten
  • Nicht zu viele Call-to-Actions
  • Fokus auf User Journey

​
Anwendungsbeispiele

Ziel: Vertrauen beim Checkout steigernMountpoint: Checkout TopInhalt:
  • Zahlungsarten-Icons
  • SSL-Verschlüsselung Badge
  • “Käuferschutz” Siegel
  • “30 Tage Rückgabe” Hinweis
1

Mountpoint aktivieren

Aktiviere “Checkout Top” im Resources & Health Dashboard
2

Portlet erstellen

Erstelle ein HTML-Portlet im OPC mit Trust-Elementen
3

Platzieren

Wähle “Checkout Top” als Position im OPC
4

Styling

Passe CSS an für optimale Darstellung

​
Troubleshooting

Mögliche Ursachen:
  1. Mountpoint nicht aktiviert
  2. Cache nicht geleert
  3. Template nicht kompatibel
  4. OPC-Editor nicht neu geladen
Lösung:
1

Aktivierung prüfen

Kontrolliere ob der Haken gesetzt und gespeichert wurde
2

Cache leeren

Leere Shop-Cache und OPC-Cache
3

OPC neu laden

Schließe den OPC-Editor komplett und öffne ihn neu
4

Template testen

Teste mit Standard-Template ob es funktioniert
Diagnose:
  • Ist das Portlet korrekt zugewiesen?
  • Sind Sichtbarkeits-Regeln gesetzt?
  • Gibt es CSS-Konflikte?
  • Ist der Inhalt vorhanden?
Debugging:
/* Temporär zum Testen hinzufügen */
[data-mountpoint="your-mountpoint"] {
  background: red !important;
  min-height: 50px !important;
  display: block !important;
}
Nutze die Browser-Entwicklertools um zu prüfen ob der Container gerendert wird.
Symptome:
  • Überlappende Elemente
  • Falsche Breiten
  • Responsive Probleme
  • Z-Index Konflikte
Fixes:
/* Container korrekt einbinden */
.your-mountpoint-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Responsive anpassen */
@media (max-width: 768px) {
  .your-mountpoint-content {
    padding: 10px;
  }
}

​
Erweiterte Konfiguration

Für fortgeschrittene Nutzer können Mountpoints auch programmatisch erweitert werden:
Template-Datei bearbeiten:
// In deiner Template-Datei (z.B. index.tpl)
{if $dzm_mountpoint_custom_position}
    <div class="mountpoint-custom-position">
        {$dzm_mountpoint_custom_position}
    </div>
{/if}
Im Plugin registrieren:
// In deinem Plugin oder Child-Template
Shop::Smarty()->assign('dzm_mountpoint_custom_position', 
    $opc->renderMountpoint('custom_position'));
Dies erfordert PHP- und Smarty-Kenntnisse. Für Standard-Anwendungsfälle nutze die vordefinierten Mountpoints.
Erfolg: Du hast jetzt volle Kontrolle über die Platzierung deiner Inhalte im Shop. Nutze die zusätzlichen Mountpoints, um dein Shop-Design auf das nächste Level zu heben!

​
Weiterführende Ressourcen

OnPage Composer Docs

Offizielle JTL-Dokumentation zum OnPage Composer

Template Guide

Template-Entwicklung und -Anpassung

Portlet-Erstellung

Eigene Portlets erstellen und anpassen

Responsive Design

Best Practices für responsives Design