GompperDigitalagentur

Start  /  Referenzen  /  Anhängerland Baden-Württemberg

Shopware 6 · 2026

Startseite von Hand, ohne den Shop anzufassen.

Ein Shop lief bereits, und er sollte weiterlaufen. Gefragt war nur die Startseite — die aber richtig: nicht aus vorgefertigten Blöcken zusammengeschoben, sondern gebaut. Die Schwierigkeit liegt dabei weniger im Entwurf als in der Rücksicht auf alles, was schon da ist.

Gebaut haben wir die Startseite. Das Shopsystem, die Artikeldaten, die Kategorien und der übrige Auftritt stammen nicht von uns. Zahlen zu Besuchern oder Umsatz nennen wir nicht — sie liegen uns nicht vor.

Die Kennzahlen zählen erst hoch, wenn sie ins Bild kommen — vorher passiert nichts.
Messehinweis auf der Startseite mit Laufband, Standnummer und Countdown
Der Messehinweis: Laufband, Standnummer und ein Countdown, der sich nach dem letzten Messetag von selbst abschaltet.
Vier Karten nebeneinander: Anhänger mieten, kaufen, Ersatzteile, Werkstatt
Die vier Geschäftsbereiche stehen gleichwertig nebeneinander — jeder mit einem Satz und einem Weg.
Die Aufgabe

Worum es ging.

Anhängerland Baden-Württemberg vermietet und verkauft Anhänger, führt Ersatzteile und hat eine eigene Werkstatt. Vier Geschäftsbereiche, die alle auf dieselbe Startseite wollen — und jeder mit gutem Grund.

Die übliche Antwort darauf ist ein Baukasten: Der Shop bringt fertige Blöcke mit, man setzt sie untereinander und ist fertig. Das Ergebnis funktioniert, sieht aber aus wie jeder andere Shop mit denselben Blöcken, und an den Stellen, wo es besonders werden müsste, geht es nicht weiter.

Also: eigene Seite. Eigenes HTML, eigenes CSS, eigenes JavaScript — eingesetzt in ein HTML-Element der Shopware-Erlebniswelt. Damit bleibt der Shop unverändert, und die Startseite ist trotzdem keine Stangenware.

Der Unterschied

Was ein Standardshop nicht kann.

Jeder Punkt hier ist eigener Code — kein gekauftes Modul, keine Erweiterung aus dem Store, die man anklickt.

Alles unter einem Dach eingesperrt

Sämtliche Gestaltung hängt an einer einzigen Klasse. Kein Stil greift auf Warenkorb, Produktseite oder Bestellabschluss durch. Das ist der unspektakulärste Teil der Arbeit und der wichtigste: Eine Startseite, die den Rest des Shops verstellt, ist teurer als gar keine.

Ein Messehinweis, der sich selbst abschaltet

Start- und Endzeitpunkt stehen im Code. Vorher läuft ein Countdown, während der Messe wechselt der Block auf einen Live-Hinweis, danach verschwindet er. Niemand muss daran denken, ihn zu entfernen — und im November steht nicht mehr „Besuchen Sie uns“ auf der Startseite.

Kennzahlen, die erst zählen, wenn man hinsieht

Die Zahlenreihe läuft nicht beim Laden der Seite hoch, sondern wenn sie ins Bild kommt. Wer sofort weiterscrollt, verschwendet keine Rechenzeit; wer hinschaut, sieht die Bewegung von Anfang an.

Gebaut für ein System, das langsam fertig wird

Shopware setzt Erlebniswelt-Inhalte teils nachträglich ein. Das Skript rechnet damit und sucht seine Elemente notfalls ein zweites Mal, statt stillschweigend nichts zu tun. Solche Fälle merkt man sonst erst, wenn ein Kunde anruft.

Warum nicht einfach der Baukasten

Shopware bringt eine Erlebniswelt mit, und für viele Shops ist die richtige Wahl. Sie hat nur eine Grenze: Man kann darin anordnen, was es gibt, und nichts, was es nicht gibt. Ein Countdown mit drei Zuständen, eine Zahlenreihe mit Animation beim Hereinscrollen, eine Kartenreihe, die vier Geschäftsbereiche gleichwertig nebeneinanderstellt — dafür gibt es keinen Block.

Der Ausweg ist ein HTML-Element in der Erlebniswelt. Darin steht dann alles, was der Baukasten nicht kann, und der Betrieb kann die Seite trotzdem weiter im gewohnten Shopware-Backend öffnen.

Vier Bereiche, eine Seite

Mieten, Kaufen, Ersatzteile, Werkstatt: Für den Betrieb sind das vier Geschäfte, für den Besucher sind es vier verschiedene Anliegen. Wer einen Anhänger für Samstag braucht, hat mit dem Ersatzteilkatalog nichts zu tun.

Deshalb steht direkt unter dem Einstieg eine Reihe aus vier Karten, eine je Bereich, mit einem Satz und einem Knopf. Kein Bereich ist dem anderen untergeordnet. Was darunter folgt — Angebote, Kennzahlen, Vorteile — ist Begründung, nicht Navigation.

Rücksicht auf das, was schon läuft

Ein bestehender Shop ist kein leeres Blatt. Es gibt ein Theme, es gibt Kategorien, es gibt Kunden mit Lesezeichen. Jede Zeile CSS, die zu weit greift, ist ein Fehler, der irgendwo anders sichtbar wird — meistens dort, wo man nicht hinsieht.

Die Gestaltung hängt deshalb durchgehend an einer eigenen Klasse, die Farben und Abstände liegen in eigenen Variablen, und die Seite bringt ihr eigenes Verhalten mit, statt das des Shops zu verändern. Zurückbauen hieße: ein HTML-Element leeren.

Für Technikinteressierte

Was darunter liegt.

Dieser Abschnitt ist für Leser, die wissen wollen, wie es gebaut ist. Wenn Sie das nicht interessiert, verpassen Sie nichts.

Aufbau

  • Eigenes HTML in einem HTML-Element der Shopware-Erlebniswelt
  • 146 Selektoren, alle unter einer eigenen Wurzelklasse
  • 16 CSS-Variablen für Farben, Radien, Schatten und Breite
  • Kein Framework, keine Abhängigkeit zum Theme des Shops

Gestaltung

  • 15 Rasterbereiche mit CSS Grid
  • 9 Größen über clamp() statt fester Stufen
  • Breakpoints bei 1100, 1024, 992, 720 und 600 Pixeln
  • Eigenes Druck-Stylesheet

Verhalten

  • Zahlenanimation über IntersectionObserver, Schwelle 10 Prozent
  • easeOutQuart über 1,5 Sekunden, Ausgabe mit deutscher Tausendertrennung
  • Rückfallweg ohne IntersectionObserver für alte Browser
  • Messe-Countdown mit drei Zuständen, Abgleich alle 30 Sekunden
  • Wiederholversuch, falls Shopware das Element später einsetzt

Zugänglichkeit

  • 74 ARIA-Angaben, jeder Abschnitt über aria-labelledby benannt
  • Bewegte Elemente stehen still bei prefers-reduced-motion
  • Bilder mit Alternativtext, nachrangige Bilder mit loading="lazy"
Häufige Fragen dazu

Was Interessenten wissen wollen.

Ja. Die Seite lebt in einem HTML-Element der Erlebniswelt. Der Shop selbst wird dafür nicht angefasst, und der alte Stand bleibt als Erlebniswelt erhalten, solange man ihn nicht löscht.
Nein, und genau das ist der Punkt. Ein eigenes Theme ist der größere Eingriff und lohnt sich, wenn der ganze Shop anders aussehen soll. Geht es nur um die Startseite, ist dieser Weg schneller und ohne Risiko für den laufenden Betrieb.
Texte und Bilder ja, über die Erlebniswelt und die verlinkten Kategorien. Wer am Aufbau selbst etwas ändern will, arbeitet im HTML — dafür sind wir erreichbar. Was sich häufig ändert, gehört ohnehin nicht fest in die Seite.
Weil Hinweise auf Termine sonst stehen bleiben. Ein Messebanner, das im Dezember noch zur Messe im September einlädt, kostet mehr Vertrauen, als der Hinweis vorher eingebracht hat.
Nächster Schritt

Sie haben etwas Vergleichbares vor?

Im Erstgespräch klären wir, ob sich der Aufwand für Ihr Sortiment rechnet — und sagen es auch, wenn nicht.

WhatsApp