Startseite gestalten

Hero-Bereiche, Banner und Sektionen auf Ihrer Shop-Startseite einrichten und verwalten

5 Min. Lesezeit
startseitehomepageherobannersections

Startseite gestalten

Die Startseite ist der erste Eindruck, den Kunden von Ihrem Corporate Shop erhalten. Mit dem Startseiten-Editor können Sie ansprechende Hero-Bereiche, Banner und weitere Sektionen erstellen, die Ihre Marke repräsentieren und Kunden gezielt zu Produkten oder Aktionen fuehren.

Aufbau der Startseite

Die Startseite Ihres Shops besteht aus einzelnen Sektionen, die Sie frei anordnen können. Jede Sektion nimmt die volle Breite der Seite ein und kann individuell konfiguriert werden. Die häufigsten Sektionstypen sind:

  • Hero-Sektion - Großflaechiges Bild mit Text und Call-to-Action-Button
  • Banner - Kleinere Bild-Text-Kombination für Aktionen und Ankündigungen
  • Produktempfehlungen - Automatisch generierte oder manuell gepflegte Produktauswahl

Hero-Sektionen erstellen

Hero-Sektionen sind die prominentesten Bereiche Ihrer Startseite. Sie bestehen typischerweise aus einem grossflaechigen Hintergrundbild, einem Titel, einem Beschreibungstext und einem Call-to-Action-Button.

Neue Hero-Sektion anlegen

  1. Navigieren Sie zu Einstellungen > Homepage
  2. Klicken Sie auf Sektion hinzufügen
  3. Wählen Sie den Typ Hero
  4. Füllen Sie die folgenden Felder aus:

Hintergrundbild

  • Klicken Sie auf Bild hochladen oder wählen Sie ein vorhandenes Bild aus der Mediathek
  • Empfohlene Größe: Mindestens 1920 x 800 Pixel für eine optimale Darstellung auf großen Bildschirmen
  • Unterstützte Formate: JPG, PNG, WebP
  • Das Bild wird automatisch auf die volle Breite skaliert und bei verschiedenen Bildschirmgrößen zugeschnitten

Tipp: Verwenden Sie Bilder mit hoher Aufloesung, die auch an den Rändern beschnitten werden können. Platzieren Sie wichtige Bildinhalte in der Mitte.

Titel

  • Geben Sie einen kurzen, prägnanten Titel ein
  • Der Titel wird gross und auffällig über dem Hintergrundbild angezeigt
  • Empfohlen: maximal 5-7 Woerter

Beschreibungstext

  • Ergaenzen Sie den Titel mit einem kurzen Beschreibungstext
  • Dieser Text wird unterhalb des Titels in kleinerer Schrift angezeigt
  • Empfohlen: 1-2 Saetze

Call-to-Action-Button (CTA)

Der CTA-Button ist der zentrale Handlungsaufruf Ihrer Hero-Sektion:

  • Button-Text: Geben Sie einen klaren Handlungsaufruf ein (z.B. "Jetzt entdecken", "Zur Kollektion", "Shop besuchen")
  • Link-Ziel: Geben Sie die URL ein, zu der der Button fuehren soll

Mögliche Link-Ziele:

ZielBeispiel-URLBeschreibung
Kategorie/category/teamwearFührt zu einer bestimmten Produktkategorie
Produkt/product/12345Führt direkt zu einem einzelnen Produkt
Externe Seitehttps://www.ihre-firma.de/aktionFührt zu einer externen Website
Registrierung/registerFührt zur Registrierungsseite
  1. Klicken Sie auf Speichern

Hero-Sektion bearbeiten

  1. Navigieren Sie zu Einstellungen > Homepage
  2. Klicken Sie auf die zu bearbeitende Sektion
  3. Nehmen Sie die gewünschten Änderungen vor
  4. Klicken Sie auf Speichern

Sektionen ordnen und verwalten

Reihenfolge per Drag & Drop ändern

Die Reihenfolge der Sektionen auf Ihrer Startseite bestimmt, was Kunden zuerst sehen. So ändern Sie die Reihenfolge:

  1. Navigieren Sie zu Einstellungen > Homepage
  2. Greifen Sie eine Sektion am Anfasser-Symbol (sechs Punkte links neben der Sektion)
  3. Ziehen Sie die Sektion an die gewünschte Position
  4. Lassen Sie los, um die Sektion abzulegen
  5. Die neue Reihenfolge wird automatisch gespeichert

Tipp: Platzieren Sie die wichtigste oder aktuellste Sektion immer ganz oben. Kunden scrollen selten bis zum Ende der Startseite.

Sektionen ein- und ausblenden

Sie können einzelne Sektionen ausblenden, ohne sie zu löschen. Dies ist besonders nützlich für saisonale Inhalte, die Sie später wiederverwenden möchten:

  1. Navigieren Sie zu Einstellungen > Homepage
  2. Klicken Sie auf den Sichtbarkeits-Schalter neben der Sektion
  3. Eine ausgeblendete Sektion wird im Admin ausgegraut dargestellt
  4. Im Shop ist die Sektion für Kunden nicht sichtbar

Sektionen löschen

  1. Navigieren Sie zu Einstellungen > Homepage
  2. Klicken Sie auf das Löschen-Symbol neben der Sektion
  3. Bestätigen Sie die Loeschung im Dialog

Achtung: Das Löschen einer Sektion kann nicht rückgängig gemacht werden. Wenn Sie eine Sektion nur vorübergehend entfernen möchten, nutzen Sie stattdessen die Funktion zum Ausblenden.

Datumsbereiche für saisonale Inhalte

Mit Datumsbereichen können Sie Sektionen zeitgesteuert anzeigen lassen. So planen Sie saisonale Banner oder Aktionen im Voraus:

Datumsbereich festlegen

  1. Navigieren Sie zu Einstellungen > Homepage
  2. Öffnen Sie die zu bearbeitende Sektion
  3. Setzen Sie den Starttermin (ab wann die Sektion sichtbar sein soll)
  4. Setzen Sie den Endtermin (bis wann die Sektion sichtbar sein soll)
  5. Klicken Sie auf Speichern

Anwendungsbeispiele

AnlassStartterminEndterminInhalt
Winterkollektion01.10.28.02.Banner mit Winterprodukten
Weihnachtsaktion01.12.26.12.Sonder-Hero mit Weihnachtsangebot
Sommersale01.07.31.08.Rabattaktion für Sommerartikel
Vereinsjubilaeum15.03.15.04.Sonder-Banner zum Jubilaeum

Hinweis: Sektionen mit einem abgelaufenen Datumsbereich werden automatisch ausgeblendet. Sie bleiben jedoch im Admin sichtbar und können für das nächste Jahr angepasst und wiederverwendet werden.

Sektionen ohne Datumsbereich

Sektionen ohne festgelegten Datumsbereich werden dauerhaft angezeigt (sofern sie nicht manuell ausgeblendet sind). Dies ist der Standard für allgemeine Inhalte wie Ihre Haupt-Hero-Sektion.

Was Ihre Kunden sehen

Die Startseite wird Ihren Kunden wie folgt angezeigt:

  • Desktop: Hero-Sektionen werden in voller Breite angezeigt. Text und CTA-Buttons sind über dem Hintergrundbild positioniert.
  • Tablet: Das Layout passt sich an und zeigt Sektionen in einer für Tablets optimierten Größe an.
  • Smartphone: Auf kleinen Bildschirmen werden die Sektionen untereinander gestapelt. Hintergrundbilder werden zugeschnitten, Text und Buttons bleiben gut lesbar.

Alle Sektionen sind vollständig responsiv - das heisst, sie passen sich automatisch an die Bildschirmgröße des Endgeräts an.

Empfehlungen für eine ansprechende Startseite

Inhaltliche Tipps

  • Beginnen Sie mit einer starken Hero-Sektion, die Ihr Kernangebot zeigt
  • Verwenden Sie maximal 3-5 Sektionen, um die Seite übersichtlich zu halten
  • Nutzen Sie klare, handlungsorientierte CTA-Texte ("Jetzt entdecken" statt "Mehr erfahren")
  • Aktualisieren Sie die Startseite regelmäßig, um wiederkehrende Besucher mit neuen Inhalten zu ueberraschen

Technische Tipps

  • Komprimieren Sie Bilder vor dem Upload, um schnelle Ladezeiten zu gewaehrleisten
  • Testen Sie die Startseite auf verschiedenen Geräten (Desktop, Tablet, Smartphone)
  • Prüfen Sie, dass alle Links und CTA-Buttons auf die richtigen Zielseiten fuehren

Häufige Fragen

Wie viele Sektionen kann ich maximal anlegen?

Es gibt keine feste Obergrenze. Wir empfehlen jedoch maximal 5 Sektionen, um die Ladezeit und Übersichtlichkeit nicht zu beeintraechtigen.

Kann ich die gleiche Sektion auf mehreren Seiten verwenden?

Nein, die Startseiten-Sektionen werden ausschliesslich auf der Startseite angezeigt. Für Kategorieseiten oder Produktseiten stehen andere Gestaltungsmöglichkeiten zur Verfügung.

Meine Bilder werden zugeschnitten - was kann ich tun?

Hero-Bilder werden automatisch auf die volle Bildschirmbreite skaliert und können an den Rändern beschnitten werden. Verwenden Sie Bilder mit wichtigen Inhalten in der Mitte und genug "Luft" an den Rändern.

Kann ich Videos als Hintergrund verwenden?

Aktuell unterstützt softwear.prints nur statische Bilder als Hintergrund für Hero-Sektionen. Video-Unterstützung ist für ein zukünftiges Update geplant.

Weiter zu