Kann man einen Tab in der mobilen Tableiste mit einem Startseiten-Abschnitt auf Shopify verknüpfen? (Anker-Leitfaden)

Die kurze Antwort: Ja, mit einem Anker-Link

Ja. Weisen Sie dem Startseiten-Abschnitt eine ID zu (beispielsweise reviews) und setzen Sie den Tab-Link auf /#reviews. Browser scrollen zu dem Element, dessen ID dem Teil nach # entspricht. Nutzen Sie eine selbst definierte ID, da dynamische JSON-Template-IDs von Shopify variieren können.

HTML-Anker ermöglichen es Tabs, direkt zu Zielbereichen auf der Startseite zu springen. Der Browser sucht die Element-ID im DOM und bringt sie ins Sichtfeld. Nach Webstandards muss eine ID im Dokument eindeutig sein. Da Shopify dynamische IDs für JSON-Templates generiert, führen Systemcodes bei Änderungen zu fehlerhaften Links. Eine eigene, stabile ID garantiert Sicherheit.

Eine mobile Tableiste ist ein festes Menü am unteren Bildschirmrand. Der Aufbau einer durchdachten Architektur mobiler Tableisten führt Käufer direkt zu Zielen – sei es zu Kollektionen oder per Sprungbefehl zu Kundenbewertungen auf der Startseite.

Wie Anker-Links auf einer Shopify-Startseite funktionieren

Was /#reviews tatsächlich bedeutet

Ein Pfad wie /#reviews liefert drei Vorgaben: / zielt auf die Startseite, # trennt das Fragment und reviews nennt die HTML-ID. Der Browser scrollt Container zur Sichtbarkeit des Elements – analog zu scrollIntoView(). Reines #reviews funktioniert auf der Startseite, scheitert aber auf Produktseiten. Der Schrägstrich stellt die Rückkehr zur Startseite sicher.

Automatisch generierte Section-IDs vs. eigene IDs

Jeder Shopify-Abschnitt liegt in einem div mit class="shopify-section" und einer Kennung ab shopify-section-. Bei statischen Liquid-Abschnitten entspricht die ID dem Dateinamen ohne .liquid. In JSON-Templates generiert Shopify dynamische IDs (siehe Liquid Objects: Section), etwa shopify-section-template--123456__reviews. Das genügt für einen schnellen Test, doch wird der Abschnitt neu erstellt, kann sich die ID ändern und den Link brechen. Eine eigene ID macht den Link unabhängig vom ID-Generator von Shopify.

Schritt 1: Dem Abschnitt eine stabile ID zuweisen

Für einen funktionierenden Sprung benötigt der mobile Browser eine verlässliche Element-ID. Sie haben zwei Möglichkeiten: Das Auslesen der vorhandenen Theme-ID für Schnelltests oder das Einfügen eines dedizierten Anker-Blocks für dauerhaften Betrieb.

Für einen Schnelltest untersuchen Sie das DOM im Desktop-Browser. Abschnitte liegen in einem div mit class="shopify-section" und einer ID wie shopify-section-template--123456__reviews (siehe Section Rendering API). Dies eignet sich für Tests, doch die ID kann sich ändern und den Link brechen.

Der dauerhafte Weg besteht darin, eine eigene ID zu vergeben. Bietet Ihr Theme einen Custom-Liquid- oder Custom-HTML-Block, platzieren Sie diesen im Theme-Editor direkt über dem Abschnitt und fügen Sie einen schlanken Anker-Tag ein:

<div id="reviews"></div>

Verwenden Sie Kleinbuchstaben und Bindestriche. Laut MDN Web Docs id-Attribut muss eine ID im gesamten Dokument einmalig sein. Doppelte IDs machen den Sprung unzuverlässig. Duplizieren Sie Ihr Theme vorab als Backup.

Abbildung 1: Konzeptillustration — Automatisch generierte Section-ID im Vergleich zu einer stabilen, über Custom Liquid gesetzten ID.

Schritt 2: Den Anker-Link im Tab einfügen

Native Theme-Tableisten (Benutzerdefinierte Link-Blöcke)

Manche Themes bringen eine mobile Tableiste mit. Die Zest-Dokumentation beschreibt diesen Block mit der Weiterleitung auf eine verknüpfte Seite. Die Dokumentation erwähnt Anker nicht, also probieren Sie es aus: Öffnen Sie im Editor die mobile Tableiste, tragen Sie /#reviews ein und testen Sie.

Tableisten über Drittanbieter-Apps

Nutzen Sie eine Navigations-App, prüfen Sie deren Dokumentation bezüglich Anker-Eingaben. Manche Apps haben eine eigene Syntax zum Scrollen zu einem Element (zum Beispiel scroll:OnPage in Navi+, weiter unten erläutert).

Verwenden Sie stets /#reviews statt #reviews, wenn die Tableiste global aktiv ist. Auf einer Produktseite sucht ein reiner #reviews-Link erfolglos und bricht ab. Der Schrägstrich / zwingt den Browser, vor dem Ansteuern des Ankers zur Startseite zu wechseln.

Eine detaillierte Betrachtung moderner Navigationsstrukturen in aktuellen Shopify-Themes finden Sie in unserem Horizon Theme Review.

Schritt 3: Auf dem Smartphone testen (weiches Scrollen und Sticky-Header-Versatz)

Das Testen in Desktop-Emulatoren bildet die Touch-Ergonomie nicht vollständig ab. Prüfen Sie den Anker-Tab direkt auf einem echten Smartphone: direkt auf der Startseite sowie von einer Produktseite aus.

Standardmäßig springen Browser unvermittelt zum Ziel. Um einen weichen Übergang zu erzeugen, ergänzen Sie CSS scroll-behavior: smooth;. Laut MDN Web Docs CSS scroll-behavior steuert dies das Scrollen bei Navigationsaktionen:

html {
  scroll-behavior: smooth;
}

Vermeiden Sie das Überdecken durch Kopfzeilen. Da Browser das Element oben ausrichten, verdeckt ein Sticky Header die Überschrift. Laut MDN Web Docs Element: scrollIntoView() schafft scroll-margin-top den nötigen Abstand bei fixierten Headern:

#reviews {
  scroll-margin-top: 80px; /* Adjust according to your sticky header height */
}

Hinweis: Der Wert 80px ist ein Beispiel – messen Sie Ihre mobile Header-Höhe und passen Sie den Pixelwert an. Prüfen Sie zudem, dass die untere Tableiste keine Buttons am Ende des Abschnitts verdeckt.

Abbildung 2: Konzeptillustration — Durch Sticky Header verdeckte Überschrift im Vergleich zur optimalen Darstellung mit scroll-margin-top.

Wenn der Anker-Link nicht funktioniert

Reagiert der mobile Tab nicht oder springt an eine falsche Stelle, prüfen Sie diese fünf typischen Ursachen:

1. ID nach Theme-Änderung erneuert: Wenn Sie eine generierte ID nutzten, hat das Neuanordnen die ID verändert. Wechseln Sie zu einer eigenen ID über Custom Liquid.

2. Doppelte IDs vorhanden: Mehrfach vergebene IDs veranlassen Browser, nur das erste Element anzusteuern. Stellen Sie sicher, dass jede ID im Dokument einmalig ist.

3. Drittanbieter-Widgets: Asynchrone Abschnitte von Bewertungs-Apps bieten oft kein ID-Feld. Platzieren Sie ein leeres <div id="reviews"></div> direkt darüber.

4. Layout-Shifts durch Lazy-Loading: Abschnitte mit nachladenden Bildern können die Seitenhöhe verschieben. Prüfen Sie mobil, ob ein zweites Antippen die Ausrichtung korrigiert.

5. Geöffnetes Drawer-Menü: Bleibt ein seitliches mobiles Drawer-Menü offen, verdeckt es den Bildschirm. Stellen Sie sicher, dass Tab-Klicks das Menü schließen.

Anker-Link im Vergleich zu einer separaten Seite oder Kollektion

Obwohl das Verknüpfen eines Tabs mit einem Startseiten-Abschnitt eine bequeme Abkürzung darstellt, passt es nicht zu jedem Inhalt. Die Wahl zwischen On-Page-Sprungzielen und separaten Seiten verlangt eine Abwägung zwischen Suchindexierung und mobiler Bedienbarkeit.

Anker-Links brillieren, wenn Inhalte auf die Startseite gehören – wie Kundenstimmen, Lookbooks oder kurze FAQs. Käufer prüfen Vertrauenssignale sofort, ohne einen Seiten-Reload abzuwarten oder ihre Position im Shop zu verlieren.

Für SEO-Sichtbarkeit sind URL-Fragmente jedoch ungeeignet. Google unterstützt Fragmente im Allgemeinen nicht für eigenständige Inhalte (siehe Google Search Central URL Structure). Rechnen Sie nicht damit, dass /#reviews als eigene Seite in den Suchergebnissen erscheint. Für Rankings von Bewertungsarchiven oder Kollektionen sollten Sie eigene URLs anlegen (wie /pages/reviews oder /collections/all).

Tableisten dienen dem Wechsel übergeordneter Ansichten. Zu viele Anker überfrachten die Navigation. Beschränken Sie Anker auf maximal ein bis zwei wichtige Abschnitte. Weitere Grundlagen finden Sie im Leitfaden zur Navigation jenseits des Hamburger-Menüs.

Wo Navi+ ins Spiel kommt

Verwalten Sie Ihre mobile Navigation mit der Navi+ Tab Bar für Shopify, ist das direkte Ansteuern von Abschnitten nahtlos integriert.

Im Navi+-Dashboard verfügt jeder Tab über ein Link-To-Feld. In den Tarifen Business und Elite verarbeitet dieses Feld die Syntax scroll:OnPage(#reviews) für weiches Scrollen zum entsprechenden CSS-Selektor.

Navi+ folgt eindeutigen Konventionen: Bleibt Link-To leer, führt der Tab zur Startseite. Interne Links nutzen kurze Pfade ohne Domain (z. B. /collections/all). Ein einzelnes # ist übergeordneten Ausklapppunkten ohne Weiterleitung vorbehalten – verwechseln Sie dies nicht mit scroll:OnPage(#reviews).

Auch mit App-Syntax bleiben die Grundlagen unverzichtbar: Ihr Abschnitt benötigt eine stabile ID (Schritt 1) und Sie müssen den Sticky-Header-Versatz via scroll-margin-top auf dem Smartphone prüfen (Schritt 3). Da scroll:OnPage zu einem Element auf der aktuellen Seite scrollt, testen Sie den Tab von der Startseite und von anderen Seiten, bevor Sie sich darauf verlassen.

Wenn Sie die Navi+ Tab Bar nutzen, tragen Sie scroll:OnPage(#reviews) in das Link-To-Feld des Tabs ein und testen Sie das Verhalten auf Ihrem Smartphone – die vollständige Übersicht aller unterstützten Pfade finden Sie im Navi+ Help Center. Konsultieren Sie die offizielle Anleitung zu den Navi+ Link-Typen für Details.

Aktions-Checkliste

• Wählen Sie den Startseiten-Abschnitt für den mobilen Schnellzugriff aus.
• Platzieren Sie ein leeres Custom Liquid (<div id="reviews"></div>) für eine stabile ID.
• Setzen Sie den Tab-Link auf /#your-id (oder App-Syntax wie scroll:OnPage(#your-id)).
• Ergänzen Sie html { scroll-behavior: smooth; } im CSS für weiches Scrollen.
• Definieren Sie scroll-margin-top im CSS, um Header-Überdeckungen zu verhindern.
• Testen Sie auf einem Smartphone von der Startseite und von einer Produktseite aus.
• Notieren Sie die ID intern, damit künftige Theme-Edits den Block nicht löschen.

Häufig gestellte Fragen (FAQ)

Wo finde ich die ID eines Shopify-Abschnitts?

Jeder Abschnitt liegt in einem div mit einer ID wie shopify-section-.... Untersuchen Sie ihn per Rechtsklick im Desktop-Browser.

Warum funktioniert mein Anker-Link plötzlich nicht mehr?

Shopify vergibt dynamische IDs für JSON-Templates. Bei Neuerstellung ändert sich die ID. Eine eigene ID via Custom Liquid bietet dauerhafte Stabilität.

Warum wird die Überschrift nach dem Sprung vom Header verdeckt?

Browser richten das Element oben aus, sodass Sticky Header Überschriften überdecken. Die CSS-Regel scroll-margin-top schafft den nötigen Abstand.

Kann ich dieselbe ID mehrfach auf einer Seite verwenden?

Nein. Laut HTML-Spezifikation muss jedes id-Attribut im gesamten Dokument eindeutig sein. Doppelte IDs führen zu unvorhersehbaren Sprüngen.

Wird Google /#reviews als eigenständige Seite indexieren?

Nein. Google Search unterstützt URL-Fragmente im Allgemeinen nicht für eigenständige Inhalte. Für Rankings sollten Sie eigene Seiten anlegen.

Unterstützt Navi+ die Verknüpfung eines Tabs mit einem Abschnitt?

Ja. Tragen Sie in der Navi+ Tab Bar scroll:OnPage(#section-id) in das Link-To-Feld ein für weiches Scrollen zum CSS-Selektor (Business/Elite).

Quellen

• Shopify Developer Documentation: Liquid Objects: Section
• Shopify Developer Documentation: Section Rendering API
• MDN Web Docs: HTML id attribute
• MDN Web Docs: Element: scrollIntoView() method
• MDN Web Docs: CSS scroll-behavior
• Google Search Central: URL Structure Guidelines
• FoxEcom Zest Theme Documentation: Mobile Navigation Bar
• Navi+ Help Center: Menu Item Link Types