So finden Sie den CSS-Selektor eines Startseiten-Abschnitts für einen Tab-Bar-Link (Shopify)

Schnelle Antwort

Öffnen Sie Ihre Live-Startseite, klicken Sie mit der rechten Maustaste auf den Abschnitt und wählen Sie „Untersuchen“ (Inspect). Suchen Sie das übergeordnete Element, dessen ID mit shopify-section- beginnt, setzen Sie ein # davor und führen Sie $$('#diese-id').length in der Konsole aus. Ergibt das Ergebnis 1, ist dieser Selektor ein einsatzbereites Scroll-Ziel.

Beim Einrichten einer unteren Tableiste oder mobilen Navigation werden Shop-Betreiber häufig nach einem „CSS-Selektor“ gefragt. Da Browser das Scrollen durch Lokalisieren passender Knotenpunkte im DOM Ihres Shops ausführen, führt ein ungenauer oder mehrfach vorhandener Selektor dazu, dass der Tab an die falsche Stelle springt oder gar nicht reagiert. Die Überprüfung mit Entwicklertools stellt eine saubere Navigation sicher, bevor Sie Änderungen veröffentlichen.

Selektor, Abschnitts-ID und Anker: Was ein Tab-Link-Ziel benötigt

Bevor Sie Code in Ihre Navigationseinstellungen einfügen, sollten drei eng verwandte Begriffe klar unterschieden werden: CSS-Selektor, HTML-Abschnitts-ID und Anker-Link. Navigations-Apps und Theme-Einstellungen verwenden diese Bezeichnungen unterschiedlich, und die Eingabe eines falschen Formats verhindert den korrekten Sprung.

Ein CSS-Selektor ist ein Muster, das von Stylesheets und Skripten verwendet wird, um ein oder mehrere HTML-Elemente zu adressieren. Typische Beispiele sind #reviews (zielt auf das Element mit der genauen ID reviews) oder .featured-collection (spricht jedes Element mit dieser Klasse an). Gemäß der MDN Web Docs Spezifikation für das id-Attribut muss eine id im gesamten Dokument eindeutig sein. Auch die Dokumentation von Section Store betont diesen Grundsatz: Eine ID gehört nur zu einem einzigen Element und landet daher immer an der richtigen Stelle.

Ein Anker-Link (Anchor Link) hingegen ist eine vollständige oder relative URL mit einem Fragmentbezeichner wie /#reviews. Webbrowser lesen das Rautezeichen # in der Adressleiste und scrollen zum passenden Element. Wenn Ihre Navigations-App ein spezielles Eingabefeld für einen „CSS-Selektor“ anbietet, erwartet dieses einen Selektorausdruck (wie #reviews) und keine vollständige Web-Adresse. Für Shops, die reguläre URL-Fragment-Anker einrichten möchten, verweisen wir auf unseren Leitfaden zu mobilen Tab-Ankern.

Die direkte Anbindung mobiler Käufer an wichtige Startseiten-Inhalte ist ein zentraler Bestandteil einer durchdachten Architektur mobiler Tab-Leisten. Die folgende Tabelle verdeutlicht die Unterschiede in der Praxis:

Schritt 1: Untersuchen Sie den Abschnitt auf Ihrer Live-Startseite

Um einen geeigneten Selektor zu finden, betrachten Sie Ihren Shop so, wie ein Kunde ihn sieht, anstatt den Shopify Theme Customizer zu nutzen. Die Live-Seite ist das, was Kunden tatsächlich laden – dort lesen Sie das echte Markup am sichersten aus.

Öffnen Sie einen neuen Browser-Tab, rufen Sie Ihre Live-Startseite auf und scrollen Sie zu dem Abschnitt, den Ihr Tab ansteuern soll (z. B. Kundenbewertungen, FAQ oder Produkt-Highlights). Klicken Sie mit der rechten Maustaste direkt auf die Überschrift oder den Hintergrund des Abschnitts und wählen Sie Untersuchen (Inspect).

Sie können die Entwicklertools auch über Tastenkombinationen öffnen:

• macOS: Drücken Sie Cmd + Option + C (Chrome DevTools Open)
• Windows: Drücken Sie Ctrl + Shift + C (Chrome DevTools Open)

Tastenkürzel zum Öffnen des Element-Inspektors:
macOS:   Cmd + Option + C
Windows: Ctrl + Shift + C

Lesen Sie den shopify-section-Wrapper aus

Sobald sich das Elements-Panel öffnet, hebt der Inspektor genau die Textzeile oder das Bild hervor, auf das Sie geklickt haben. Für ein stabiles Scroll-Ziel müssen Sie in der DOM-Hierarchie nach oben navigieren, um den Container zu finden, der den gesamten Abschnitt umschließt.

1. Bewegen Sie im Elements-Panel den Cursor im Quellbaum nach oben zu den übergeordneten Tags.
2. Suchen Sie nach einem äußeren Container-Element – meist ein <div> –, das den gesamten Abschnitt umschließt.
3. Lokalisieren Sie dessen id-Attribut. In Shopify-Themes beginnt diese Wrapper-ID standardmäßig mit shopify-section-.

Wie in der offiziellen Shopify Dokumentation zum Section-Objekt beschrieben, werden die IDs für Abschnitte in JSON-Templates dynamisch von Shopify generiert. Eine ID kann etwa wie shopify-section-template--18492048593__featured_collection aussehen, Ihre wird aber abweichen – kopieren Sie sie daher von Ihrer eigenen Seite.

<!-- Beispiel für einen Shopify Section-Wrapper -->
<div id="shopify-section-template--18492048593__reviews" class="shopify-section">
  <!-- Der Inhalt des Abschnitts wird hier gerendert -->
</div>

Zeile in einen Selektor umwandeln (# für ID, . für Klasse)

Sobald Sie die Wrapper-Zeile lokalisiert haben, wandeln Sie das HTML-Attribut in gültige CSS-Syntax um:

• Wenn Sie den Wert der id nutzen, setzen Sie ein Rautezeichen # davor: #shopify-section-template--18492048593__reviews
• Wenn Sie eine class nutzen, setzen Sie einen Punkt . davor: .featured-reviews-grid
• Wenn ein Element mehrere durch Leerzeichen getrennte Klassen besitzt, verketten Sie diese mit Punkten: div.shopify-section.reviews-container

Chrome DevTools bietet zudem eine praktische Abkürzung: Klicken Sie mit der rechten Maustaste auf den markierten Wrapper-Knoten im Elementbaum, wählen Sie Copy und dann Copy JS Path (Chrome DevTools DOM). Chrome kopiert einen Ausdruck in Ihre Zwischenablage:

document.querySelector("#shopify-section-template--18492048593__reviews")

Kopieren Sie den Text zwischen den Anführungszeichen heraus. Dieser String ist Ihr Selektor-Kandidat. Bevor Sie ihn in Ihrer Navigation eintragen, müssen Sie sicherstellen, dass er ausschließlich auf diesen einen Abschnitt verweist.

Schritt 2: Prüfen Sie, dass der Selektor genau ein Element trifft

Ein häufiger Irrglaube unter Händlern ist die Annahme, dass jeder aus den DevTools kopierte Selektor automatisch funktioniert. Wenn Ihr Selektor jedoch mehrere Abschnitte anspricht oder auf mobilen Displaygrößen ins Leere läuft, scheitert der Sprung des Tabs.

Die Entwickler von UpCharge weisen darauf hin, dass gezielt nach eindeutigen Klassen oder IDs gesucht werden sollte. Die Eindeutigkeitsprüfung mit den integrierten Entwicklertools geht schnell.

Das Elements-Panel durchsuchen (Strg/Cmd+F)

Die schnellste Erstprüfung erfolgt direkt im DOM-Baum. Laut der Chrome DevTools DOM Dokumentation können Sie den DOM-Baum nach Textstrings, CSS-Selektoren oder XPath durchsuchen.

1. Klicken Sie in das Elements-Panel.
2. Drücken Sie Strg + F (Windows) bzw. Cmd + F (macOS), um die Suchleiste am unteren Rand des Panels einzublenden.
3. Fügen Sie Ihren Selektor inklusive führendem # ein (z. B. #shopify-section-template--18492048593__reviews).
4. Prüfen Sie den Trefferzähler rechts im Suchfeld (z. B. 1 of 1).

Suchprüfung im Elements-Panel:
Ausdruck: #shopify-section-template--18492048593__reviews
Ziel-Ergebnis: 1 of 1

Zeigt der Zähler 1 of 1, verweist Ihr Selektor auf genau einen Knoten im gesamten Dokumentbaum.

Treffer in der Konsole zählen

Für eine verbindliche Auswertung aus Sicht der Browser-Skripte wechseln Sie zum Tab Console in den DevTools.

Gemäß der Chrome DevTools Console Utilities API gibt die Hilfsfunktion $$(selector) ein Array aller Elemente zurück, die dem Selektor entsprechen. Alternativ steht die reguläre Web-API-Methode document.querySelectorAll(selector) (MDN querySelectorAll) zur Verfügung.

Geben Sie einen der folgenden Befehle in die Konsole ein und drücken Sie die Eingabetaste:

$$('#shopify-section-template--18492048593__reviews').length

document.querySelectorAll('#shopify-section-template--18492048593__reviews').length

Bewerten Sie die ausgegebene Zahl anhand folgender Kriterien:

Wiederholen Sie diese Konsolenprüfung stets in der mobilen Ansicht. Klicken Sie dazu auf das Symbol Toggle device toolbar. Manche Shopify-Themes binden für Desktop und Mobilgeräte getrennte Abschnitte ein, wodurch Selektoren auf Smartphones abweichen können.

Konzeptillustration: Trefferanzahl in der Browser-Konsole prüfen, um sicherzustellen, dass der Selektor genau ein Element adressiert.

Schritt 3: Wählen Sie einen Selektor, der Theme-Bearbeitungen übersteht

Obwohl ein automatisch erzeugter Wrapper-Name mit shopify-section- schnelle Tests ermöglicht, birgt die dauerhafte Verwendung erhebliche Risiken im laufenden Betrieb.

In Shopifys Online-Store-Architektur werden die IDs für Abschnitte in JSON-Templates dynamisch von Shopify generiert (Shopify Section Object). Der Theme-Entwickler Fluorescent beschreibt diese Einschränkung treffend: “Shopify dynamically generates ids for sections but these ids are not stable.” (Shopify generiert IDs dynamisch, aber diese sind nicht stabil). Da diese IDs nicht stabil sind, kann ein darauf aufgebauter Tab-Link nach Layout-Änderungen ausfallen – prüfen Sie ihn daher nach jeder Änderung erneut.

Vermeiden Sie zudem lange, unübersichtliche Ketten wie div:nth-child(4) > div.grid > div:first-child. Sobald sich ein Element im Layout ändert, können diese Pfade brechen.

Der robuste Weg: Eigene ID per Custom Liquid anlegen

Um einen Selektor zu erhalten, der über alle Bearbeitungen hinweg stabil bleibt, vergeben Sie direkt im Theme-Customizer eine eigene permanente ID:

1. Navigieren Sie im Shopify-Adminbereich zu Online Store > Themes.
2. Duplizieren Sie Ihr Live-Theme, um vor strukturellen Änderungen ein Backup zu erstellen.
3. Klicken Sie beim Arbeits-Theme auf Anpassen (Customize).
4. Klicken Sie im Startseiten-Layout direkt über dem gewünschten Abschnitt auf Abschnitt hinzufügen oder Block hinzufügen.
5. Wählen Sie Custom Liquid (oder Custom HTML, je nach Theme).
6. Fügen Sie ein einfaches HTML-Anker-Tag mit Ihrer Wunsch-ID ein:

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

Verwenden Sie für die ID ausschließlich Kleinbuchstaben und Bindestriche (z. B. kundenbewertungen, faq-bereich oder bestseller). Nach der MDN id-Attribut-Referenz muss dieser Bezeichner im gesamten Dokument eindeutig sein.

Das folgende Video von EcomGraduates demonstriert praxisnah, wie Abschnitte untersucht und eigene Anker-IDs in Shopify-Themes hinterlegt werden:

Schwierige Fälle: Keine klare ID, verschachtelte Abschnitte, Sonderzeichen

Besondere Theme-Konfigurationen können zu Situationen führen, in denen Standard-Wrapper schwer zu greifen sind. Ein strukturiertes Vorgehen verhindert Verbindungsabbrüche.

Fehlende oder unklare ID am Abschnitt

Manche Custom-Sections oder Seitenbau-Apps geben keine regulären IDs am äußeren Container aus. Anstatt mehrere Klassennamen mühsam aneinanderzureihen – was bei Theme-Updates leicht bricht –, nutzen Sie die Custom-Liquid-Methode aus Schritt 3. Das leere <div id="ihre-id"></div> direkt über dem Abschnitt stellt ein sauberes Ziel bereit, ohne dass Theme-Dateien direkt editiert werden müssen.

Verschachtelte Abschnitte und App-Blöcke

Wenn Sie auf einen App-Block innerhalb eines bestehenden Abschnitts zielen (beispielsweise ein Bewertungs-Widget in einem Produktraster), kann das direkte Ansteuern des inneren App-Containers zu einer unerwarteten Scrollposition führen, testen Sie es daher immer. Zielen Sie stattdessen auf den äußeren shopify-section-Wrapper oder platzieren Sie den Anker-Block direkt oberhalb.

Reine Mobil- oder Desktop-Abschnitte

Viele Händler richten für Desktop- und Mobilansichten unterschiedliche Banner ein. Wenn der Desktop-Abschnitt eine ID besitzt, der Mobil-Abschnitt aber ein anderer Block ist, schlägt der Tab auf Smartphones fehl. Prüfen Sie die Startseite stets im Device-Modus der DevTools und adressieren Sie das Element, das tatsächlich auf Mobilgeräten gerendert wird.

Ungültige Zeichen und CSS-Escaping

Gemäß der MDN querySelector Dokumentation müssen Klassen- oder ID-Werte, die keine gültigen CSS-Bezeichner darstellen (z. B. IDs, die mit Zahlen beginnen oder Doppelpunkte, Punkte oder Fragezeichen enthalten), mit CSS.escape() maskiert werden. Eine ID wie 123-reviews erfordert in reinem CSS eine Maskierung.

Um Syntaxprobleme in Navigations-Apps zu vermeiden, verzichten Sie gänzlich auf Sonderzeichen. Verwenden Sie für Ihre IDs nur Kleinbuchstaben, Zahlen und Bindestriche und meiden Sie Anführungszeichen oder Klammern in Link-Feldern.

Den Selektor als Scroll-Ziel des Tabs verwenden

Sobald sichergestellt ist, dass Ihr Selektor genau einen Knoten adressiert, tragen Sie ihn in Ihre mobile Navigationsleiste ein.

Prüfen Sie zunächst die Dokumentation Ihrer Navigations-App oder Ihres Themes. Klären Sie, ob das Link-Feld eine vollständige URL mit Anker-Fragment (wie /#reviews) oder einen direkten CSS-Selektorausdruck (wie #reviews) erwartet.

Wenn Ihre App ein dediziertes Selektorfeld anbietet:

1. Fügen Sie den in Schritt 2 geprüften Selektor ein (z. B. #reviews oder #shopify-section-template--custom).
2. Stellen Sie sicher, dass die Syntax den Vorgaben der App entspricht.
3. Speichern Sie die Menükonfiguration ab.

Beachten Sie, dass Scroll-Routinen immer im aktiven Dokument ausgeführt werden. Tippt ein Kunde auf einen Tab mit lokalem On-Page-Selektor, während er sich auf einer Kategorieseite befindet, liefert die Selektorabfrage null zurück (MDN querySelector), und es findet kein Bildlauf statt. Testen Sie den Tab-Link daher immer ausgehend von der Startseite.

Halten Sie Ihre vergebenen IDs in den internen Shop-Notizen fest, damit Teammitglieder den Custom-Liquid-Block bei zukünftigen Aufräumarbeiten nicht versehentlich entfernen.

Fehlerbehebung: Tab scrollt nicht, landet unter dem Header oder am falschen Ort

Sollte der Bildlauf auf Smartphones nicht wie gewünscht funktionieren, prüfen Sie folgende Ursachen:

Der Tab scrollt überhaupt nicht

Öffnen Sie die Konsole auf Ihrer Live-Startseite und führen Sie $$('#ihr-selektor').length erneut aus. Ergibt das Ergebnis 0, existiert das Element auf der aktuellen Seite nicht, die ID wurde durch ein Theme-Update verändert oder der Selektor enthält einen Tippfehler. Unpassende Selektoren liefern null zurück und stoppen die Ausführung (MDN querySelector).

Der Tab scrollt an die falsche Stelle

Springt der Bildschirm an den Seitenanfang oder das Seitenende statt zum gewünschten Block, trifft Ihr Selektor mehrere Elemente. In diesem Fall wählt querySelector immer das erste Vorkommen im DOM (MDN querySelector). Nutzen Sie die Konsole zur Identifikation doppelter IDs und ersetzen Sie diese durch eine eindeutige Custom-Liquid-ID.

Die Abschnittsüberschrift wird vom fixierten Header verdeckt

Standardmäßig richten Browser die Oberkante des Ziel-Elements bündig an der Oberkante des Viewports aus. Verfügt Ihr Shop über einen fixierten (Sticky) Header, liegt dieser genau über dem Titel des Abschnitts.

Laut MDN scrollIntoView Dokumentation lässt sich dieser Versatz über die CSS-Eigenschaft scroll-margin-top beheben: “To define a custom spacing, use scroll-margin-top or scroll-margin-bottom. This is often useful when there’s a fixed header on the page.” (Um einen benutzerdefinierten Abstand festzulegen, verwenden Sie scroll-margin-top oder scroll-margin-bottom. Dies ist oft nützlich, wenn sich auf der Seite ein fixierter Header befindet).

Messen Sie die Header-Höhe in den DevTools und hinterlegen Sie einen entsprechenden Abstand im Custom CSS Ihres Themes:

/* Abstand unter dem fixierten mobilen Header herstellen */
#reviews {
  /* Replace 80px with your own header height */
  scroll-margin-top: 80px;
}

Ein geöffnetes Drawer-Menü verdeckt den Bildschirm

Wird neben der unteren Tableiste ein seitliches Drawer-Menü genutzt, kann das Antippen eines Tabs bei geöffnetem Menü zu Überlagerungen führen. Bewährte Standards für ein mobiles Drawer-Menü stellen sicher, dass Menü-Overlays sauber schließen, sobald ein externer Link ausgelöst wird.

Lazy-Loading von Bildern verschiebt die Endposition

Enthält die Startseite oberhalb des Zielabschnitts große Bannerbilder, die verzögert geladen werden, können sich die Seitenabmessungen nach Abschluss der Scroll-Animation noch verändern. Testen Sie den Tab-Sprung erst, nachdem alle Medieninhalte vollständig geladen sind.

Konzeptillustration: Vermeidung verdeckter Abschnittsüberschriften unter fixierten Headern durch den gezielten Einsatz von CSS scroll-margin-top.

Kompromisse: Wann ein Selektor-Ziel das falsche Werkzeug ist

Das Scrollen zu Abschnitten auf derselben Seite bietet zwar eine flüssige Benutzererfahrung, ist aber nicht für jede Struktur im Online-Handel die beste Wahl.

Umfangreiche Inhalte, die eine eigene Seite brauchen

Wenn die verlinkten Inhalte einen umfangreichen Produktkatalog, ausführliche Richtlinien oder detaillierte Support-Antworten umfassen, sind sie in einem einzigen Startseitenabschnitt schwerer zu finden und zu teilen. Eigene Kategorie- oder Richtlinienseiten haben jeweils eine eigene URL, auf die ein Tab direkt verlinken kann, statt sich auf einen Scroll auf der Seite zu verlassen.

Überfrachtung der mobilen Navigationsleiste

Eine mobile Tab-Leiste dient dem schnellen Daumenwechsel zwischen den Hauptbereichen des Shops. Werden mehrere Tabs für interne Startseitenabschnitte reserviert, wirkt die Leiste schnell überladen und verliert auf Unterseiten ihren Nutzen. Wie in unserem Leitfaden zur Navigation jenseits des Hamburger-Menüs dargelegt, sollten Tabs prioritären Zielen vorbehalten bleiben.

Theme-Abhängigkeit und Wartungsaufwand

Jeder an automatischen Theme-Code gebundene Selektor muss bei Theme-Wechseln erneut geprüft werden. Stoßen Standardmenüs an strukturelle Barrieren, empfiehlt sich ein Blick auf die Grenzen von Standard-Theme-Menüs, um zu prüfen, wann eine spezialisierte App mehr Nachhaltigkeit bietet.

Wo sich Navi+ einfügt

Navi+ stellt für Shopify-Händler maßgeschneiderte Steuerelemente über seine Tab-Bar- und Mobile-Menu-Module bereit. Jeder Menüpunkt verfügt über ein separates Link To-Feld, das sowohl reguläre Web-URLs als auch funktionale Interaktionsbefehle unterstützt.

Für ein nahtloses Scrollen unterstützt Navi+ die Syntax scroll:OnPage(#section-id), im offiziellen Help Center dokumentiert als „Scroll to a section by CSS selector“ (Navi+ Link-Typen). Dieses Feature ist in den Tarifen Business und Elite verfügbar.

Tragen Sie hierbei exakt den in Schritt 2 verifizierten Selektor ein, der genau ein Element trifft. Da das On-Page-Scrollen auf dem DOM des aktiven Dokuments basiert, muss der Zielabschnitt auf der aktuell geöffneten Seite vorhanden sein. Testen Sie Ihre Konfiguration stets auf einem echten Smartphone ausgehend von der Startseite.

Wenn Sie die Navi+ Tab Bar nutzen, fügen Sie den geprüften Selektor als scroll:OnPage(#ihre-id) in das Feld Link To des Tabs ein und testen Sie den Aufruf auf Ihrem Smartphone von der Startseite aus. Die vollständige Liste aller Link-Typen finden Sie im Navi+ Help Center.

Checkliste für Maßnahmen

Nutzen Sie diese 7-Punkte-Checkliste zur sicheren Einrichtung Ihres Abschnitts-Selektors:

• Öffnen Sie Ihre Live-Startseite auf dem Desktop (außerhalb des Theme-Customizers).
• Klicken Sie mit rechts auf den Zielabschnitt, wählen Sie „Untersuchen“ und finden Sie den äußeren Wrapper, dessen ID mit shopify-section- beginnt.
• Notieren Sie die Wrapper-ID und wandeln Sie diese mit führendem # in einen Selektor-Kandidaten um.
• Führen Sie $$('#ihr-selektor').length in der DevTools-Konsole aus und stellen Sie sicher, dass das Ergebnis exakt 1 beträgt.
• Aktivieren Sie den Device-Modus in den DevTools, um die Eindeutigkeit auf Mobilbildschirmen zu prüfen.
• Fügen Sie für dauerhafte Stabilität einen Custom-Liquid-Block mit <div id="ihre-id"></div> über dem Abschnitt ein.
• Hinterlegen Sie den Selektor in den Tab-Einstellungen, ergänzen Sie bei Bedarf scroll-margin-top gegen Header-Verdeckungen und testen Sie auf einem Smartphone.

Häufig gestellte Fragen (FAQ)

Wo sehe ich die ID eines Abschnitts in Shopify?

Abschnitts-IDs werden im Standard-Adminbereich von Shopify nicht angezeigt. Um eine ID einzusehen, öffnen Sie Ihren Live-Shop im Browser, klicken mit der rechten Maustaste auf den Abschnitt, wählen „Untersuchen“ und lesen das id-Attribut am äußeren shopify-section-Wrapper ab (Shopify Section Object, MDN querySelectorAll).

Warum funktioniert der Selektor meines Abschnitts plötzlich nicht mehr?

Shopify generiert IDs für Abschnitte in JSON-Templates dynamisch. Diese IDs können sich ändern, sobald Abschnitte bearbeitet oder neu angelegt werden (Shopify Section Object, Fluorescent). Das Einfügen einer statischen ID über einen Custom-Liquid-Block schafft dauerhafte Stabilität.

Wie erkenne ich, ob mein Selektor nur ein einzelnes Element trifft?

Öffnen Sie den Reiter Console in den Entwicklertools und führen Sie $$(selector).length oder document.querySelectorAll(selector).length aus (Chrome DevTools Console Utilities, Chrome DevTools DOM). Der Rückgabewert 1 bestätigt die Eindeutigkeit im aktuellen Dokument.

Sollte ich die Funktion „Copy selector“ aus den DevTools nutzen?

Die Funktion „Copy selector“ oder „Copy JS Path“ eignet sich als erster Anhaltspunkt. Die resultierenden langen Selektorketten brechen jedoch leicht bei Layoutanpassungen. Es ist deutlich sicherer, den Ausdruck auf eine eindeutige Abschnitts-ID zu reduzieren.

Was passiert, wenn der Selektor auf mehrere Abschnitte zutrifft?

Trifft ein Selektor auf mehrere Elemente zu, wählen JavaScript-Methoden wie querySelector immer nur das erste passende Element in der Dokumentenreihenfolge aus (MDN querySelector). Das Antippen des Tabs kann dadurch zu einem unerwünschten Abschnitt weiter oben führen.

Warum wird die Abschnittsüberschrift nach dem Scrollen vom Header verdeckt?

Browser richten die Oberkante des angesprungenen Elements bündig am oberen Bildschirmrand aus. Besitzt der Shop einen fixierten Header, verdeckt dieser den Titel. Das Hinzufügen der CSS-Eigenschaft scroll-margin-top am Zielelement schafft den erforderlichen Sichtabstand (MDN scrollIntoView).

Quellen

• Shopify Developer Documentation: Section Liquid Object — Details zur dynamischen Generierung von Abschnitts-IDs in JSON-Templates.
• Fluorescent Documentation: Custom Liquid Developer Guide — Erläuterungen zur Instabilität dynamischer IDs und Implementierung eigener Anker-IDs.
• MDN Web Docs: HTML id global attribute — Formale Spezifikation zur dokumentenweiten Eindeutigkeit des ID-Attributs.
• MDN Web Docs: Document.querySelector() — Technische Rückgabewerte, First-Match-Verhalten, Null-Bedingungen und Escaping-Regeln.
• MDN Web Docs: Document.querySelectorAll() — Funktionsweise statischer NodeLists bei Selektorabfragen.
• MDN Web Docs: Element.scrollIntoView() — Viewport-Ausrichtung und Abstandskompensation via scroll-margin-top.
• Chrome for Developers: Chrome DevTools DOM Inspection — Suche im DOM-Baum und Kopieren von Element-Pfaden.
• Chrome for Developers: Console Utilities API — Dokumentation zur Selektorabfrage mit der Hilfsfunktion $$.
• Chrome for Developers: Open Chrome DevTools — Tastenkombinationen zum Aufrufen der Entwicklertools.
• Section Store Help: Custom Placement: Finding a CSS Selector — Hinweise zur Eindeutigkeit von Element-IDs.
• UpCharge Help Center: Selector Settings Guide — Praxisleitfaden zur Ermittlung eindeutiger Klassen und IDs.
• Navi+ Help Center: Navigation Item Link Types — Offizielle Spezifikation der Syntax scroll:OnPage(#section-id) für Business- und Elite-Tarife.