Zum Inhalt springen
Hilfe
Builder-Abschnitte und -Blöcke

Wie füge ich meinem Shop einen Zurück-nach-oben-Button hinzu?

Füge den Abschnitt Zurück nach oben hinzu: ein runder Pfeil-Button in einer unteren Ecke, der nach dem Scrollen erscheint und Kunden wieder nach oben bringt. Lege Ecke, Größe, Scrollfortschritt-Ring und Farbschema fest und zeige ihn auf jeder Seite.

3 Min. Lesezeit

Der Abschnitt Zurück nach oben fügt einen runden Pfeil-Button in einer unteren Ecke des Bildschirms hinzu. Wenn Kunden darauf tippen, springt die Seite wieder nach oben. Das hilft auf langen Seiten, zum Beispiel einer Produktseite mit vielen Fotos und Bewertungen.

Hinzufügen

  1. Öffne den Builder und geh auf die gewünschte Seite.
  2. Klicke im Tab Abschnitte auf Neuen Abschnitt hinzufügen und wähle Zurück nach oben in der Gruppe Layout.
  3. Lege Ecke, Größe und Farben fest und klicke dann auf Veröffentlichen.

Du kannst einen pro Seite hinzufügen, auf jeder Seite. Seine Stelle in der Abschnittsliste spielt keine Rolle, denn der Button schwebt immer in der Ecke.

Wann er erscheint

Oben auf der Seite ist der Button versteckt. Er erscheint, sobald der Kunde etwa einen Bildschirm weit nach unten gescrollt hat, und verschwindet wieder, wenn er zurück in der Nähe des Seitenanfangs ist. Im Builder ist er sichtbar, solange der Abschnitt ausgewählt ist, damit du ihn gestalten kannst, ohne zu scrollen.

Kunden, die auf ihrem Gerät reduzierte Bewegung eingeschaltet haben, springen sofort nach oben, statt sanft zu gleiten.

Einstellungen

Layout

  • Position: Ecke Start oder Ende unten auf dem Bildschirm. Sie richten sich nach der Sprache deines Shops: In einer Sprache, die von links nach rechts geschrieben wird, wie Deutsch, ist Start die linke Ecke und Ende die rechte. In einer Sprache, die von rechts nach links geschrieben wird, wie Arabisch, ist es umgekehrt. Standard ist Ende.
  • Größe: die Größe des Buttons, von 44 bis 80 Pixeln (Standard 48). Selbst die kleinste Größe ist auf dem Handy gut antippbar.

Erscheinungsbild

  • Scrollfortschritt: zeigt einen Ring um den Pfeil, der sich füllt, während der Kunde die Seite nach unten scrollt. Standardmäßig eingeschaltet. Schalte ihn für einen schlichten Button aus.
  • Farbschema: Der Button nutzt die Farben des primären Buttons aus dem gewählten Farbschema (Hintergrund, Pfeil und Hover-Farben). Um sie zu ändern, bearbeite dieses Farbschema in Farbschemata.

Auf jeder Seite anzeigen

Jede Seite hat ihre eigenen Abschnitte. Füge den Button also einmal hinzu und nutze Auf alle Seiten anwenden. Das aktualisiert nur Seiten, die schon einen Abschnitt Zurück nach oben haben, füge ihn also zuerst auf den anderen Seiten hinzu. Siehe Abschnitte und Blöcke.

Gut zu wissen

  • Der Button erscheint nicht: Die Seite ist vielleicht zu kurz, um einen ganzen Bildschirm weit zu scrollen. Probier es mit einer längeren Seite.
  • Er sitzt höher als erwartet: Auf Seiten mit einer fixierten Kaufleiste unten rutscht der Button nach oben, damit sich beide nicht verdecken.
  • Andere schwebende Elemente: Ein fixierter Newsletter-Button nutzt die untere linke Ecke. Wenn du beide verwendest, setze Zurück nach oben auf die andere Seite, damit sie sich nicht überlappen.
  • Schwer zu sehen: Wähle ein Farbschema, dessen primäre Button-Farbe sich von deinem Seitenhintergrund abhebt.
  • Vorübergehend ausblenden: Nutze das Augensymbol am Abschnitt. Seine Einstellungen bleiben erhalten. Ausblenden oder Löschen ändert nur die Seite, auf der du gerade bist.

Brauchen Sie noch Hilfe?

Schreiben Sie uns, wir antworten Ihnen.

Kontaktieren Sie uns