Ein Ankerlink (auch Sprungmarke genannt) bringt Besucher mit einem Klick an eine bestimmte Stelle einer Seite – etwa von einem Button im Seitenkopf direkt zu den FAQ weiter unten, oder aus der Navigation gezielt zu einem Abschnitt. In Shopify brauchen Sie dafür die passende Section ID. Dieser Ratgeber zeigt Schritt für Schritt, wie Sie sie finden, den Link einbauen und ihn so anlegen, dass er dauerhaft hält.
Was ist ein Ankerlink in Shopify?
Jeder Abschnitt einer Shopify-Seite wird im HTML in einen Wrapper mit einer eindeutigen ID verpackt, zum Beispiel id="shopify-section-template--123__rich_text". Ein Link, der auf #shopify-section-template--123__rich_text zeigt, scrollt die Seite genau zu diesem Abschnitt. Das # ist der Kern jeder Sprungmarke: Es verweist auf ein Element mit genau dieser ID.
Schritt 1: Die Section ID finden
Am schnellsten geht das mit unserem kostenlosen Shopify Section ID Finder: Seite eingeben, optional den Text der Zielstelle angeben – Sie erhalten die passende Section ID und den fertigen Ankerlink zum Kopieren.
Alternativ manuell: Öffnen Sie die Seite im Browser, Rechtsklick auf den gewünschten Abschnitt → „Untersuchen". Gehen Sie im HTML nach oben, bis Sie den umschliessenden <div id="shopify-section-…"> sehen. Dieser Wert ist Ihr Sprungziel.
Schritt 2: Den Ankerlink einbauen
Wie Sie den Link setzen, hängt davon ab, woher gesprungen wird:
Auf derselben Seite (z. B. ein Button, der nach unten springt): Verwenden Sie als Ziel nur den Anker mit #:
#shopify-section-template--123__rich_text
In einem Button- oder Custom-HTML-Block sieht das so aus:
<a href="#shopify-section-template--123__rich_text">Zu den Details</a>
Von einer anderen Seite (z. B. aus dem Menü in der Navigation): Verwenden Sie die vollständige URL plus Anker. In den Shopify-Navigationsmenüs tragen Sie den Link als relativen Pfad mit Anker ein:
/pages/ueber-uns#shopify-section-template--123__rich_text
Schritt 3 (empfohlen): Dauerhafte, eigene Anker setzen
Die automatisch generierten Section-IDs (template--…__name_xxxxxx) hängen an der jeweiligen Sektion. Löschen Sie die Sektion und legen sie neu an – oder wechseln Sie das Theme –, ändert sich die ID, und bestehende Ankerlinks laufen ins Leere.
Für Links, die dauerhaft halten sollen (z. B. in Kampagnen, Newslettern oder der Navigation), vergeben Sie darum besser eine eigene, feste ID. Fügen Sie dort, wo gesprungen werden soll, einen Custom-Liquid- oder HTML-Block ein und setzen Sie ein unsichtbares Ziel-Element:
<div id="angebot"></div>
Verlinken Sie anschliessend einfach auf #angebot. Dieser Anker bleibt stabil, egal was mit den umliegenden Sektionen passiert.
Zwei nützliche Feinheiten
- Weiches Scrollen: Mit
html { scroll-behavior: smooth; }im Theme-CSS gleitet die Seite sanft zum Ziel statt hart zu springen. - Sticky-Header-Versatz: Haben Sie einen fixierten Header, verdeckt er sonst den Anfang des Ziels. Mit
scroll-margin-top: 100px;auf dem Ziel-Element (Höhe des Headers) landet die Sprungmarke sauber darunter.
Fazit
Ankerlinks sind in Shopify schnell gesetzt – wichtig ist nur die richtige Section ID und die Entscheidung zwischen schnellem Ist-Zustand und dauerhaft stabilem Anker. Für den schnellen Weg nutzen Sie den Shopify Section ID Finder; für dauerhafte Links setzen Sie eine eigene ID.
Sie möchten Sprungmarken, Menüs oder Theme-Anpassungen sauber und wartungsfrei umgesetzt haben? Als Shopify Agentur bauen wir das so ein, dass es hält. Melden Sie sich für ein kostenloses Erstgespräch.
