Das Wichtigste in Kürze
- Wähle im Shopify-Seiteneditor Text aus und klicke auf das Link-Symbol in der Symbolleiste, um einen Hyperlink hinzuzufügen.
- In Textblöcken des Theme-Editors haben einige ein eigenes Link-Feld – hier ist keine Textauswahl nötig.
- Für die volle Kontrolle über das Styling und die Platzierung von Links verwendest du HTML-Anchor-Tags im Code-Editor oder über Fudge.
- Du kannst auf interne Seiten, Produkte, Kategorien (Collections) oder externe URLs verlinken.
Das Hinzufügen eines klickbaren Links zu Text in Shopify hängt davon ab, wo sich dieser Text befindet. Die Methode unterscheidet sich für Seiteninhalte, Theme-Editor-Abschnitte und Code. Dieser Guide behandelt alle drei Möglichkeiten.
Warum du uns vertrauen kannst
Wir haben hunderte von Shopify-Storefronts erstellt und angepasst. Wir haben auch Fudge entwickelt – einen KI-Storefront-Editor mit einer 5.0-Bewertung im Shopify App Store.
So fügst du einen Link zu Text im Shopify-Seiteneditor hinzu
Dies gilt für Texte unter Online-Shop → Seiten oder Online-Shop → Blog-Beiträge.
Schritt 1. Gehen Sie zu Online-Shop → Seiten (oder Blog-Beiträge) und öffnen Sie die Seite, die Sie bearbeiten möchten.
Schritt 2. Markieren Sie im Inhaltsbereich den Text, den Sie in einen Link umwandeln möchten. Heben Sie ihn mit dem Cursor hervor.
Schritt 3. Klicken Sie in der Editor-Symbolleiste auf das Link-Symbol (es sieht aus wie ein Kettenglied). Ein Popup erscheint, das nach der URL fragt.
Schritt 4. Geben Sie die URL ein. Verwenden Sie für interne Links den relativen Pfad: /products/mein-produkt, /collections/sale, /pages/ueber-uns. Verwenden Sie für externe Links die vollständige URL inklusive https://.
Schritt 5. Klicken Sie auf Anwenden oder Einfügen und speichern Sie die Seite.
Der ausgewählte Text ist nun ein anklickbarer Hyperlink, der im Standard-Link-Stil Ihres Themes formatiert ist.
Ähnliche Themen: Navigationsmenüs in Shopify bearbeiten.
Ähnliche Themen: Linkfarbe in Shopify ändern.
Ähnliche Themen: Eine neue Seite in Shopify erstellen.
Ähnliche Themen: Einen Link zu einem Bild in Shopify hinzufügen.
Wie füge ich einen anklickbaren Link in Text ein?
Wenn der Link in einem neuen Tab geöffnet werden soll, klicke auf das Link-Symbol in der Toolbar, gib die URL ein und suche nach dem Kontrollkästchen “In neuem Tab öffnen”, bevor du bestätigst. Externe Links profitieren meist davon, in einem neuen Tab geöffnet zu werden; bei internen Links ist das nicht nötig.
So fügst du einen Link zu Text im Shopify Theme Editor hinzu
Textblöcke innerhalb von Theme-Editor-Abschnitten funktionieren anders als Seiteninhalte.
Schritt 1. Gehe zu Onlineshop → Themes → Anpassen (Customize).
Schritt 2. Klicke auf den Abschnitt oder Block, der deinen Text enthält.
Schritt 3. Suche im Einstellungsbereich auf der linken Seite nach einem Link- oder URL-Feld unterhalb der Texteingabe. Manche Textblöcke haben dies, andere nicht.
Schritt 4. Gib das Linkziel ein und speichere.
Wenn ein Textblock kein Link-Feld hat, kannst du diesen spezifischen Text nicht allein über den Theme Editor in einen Hyperlink umwandeln. Dafür müsstest du ihn über den Code oder Fudge hinzufügen.
Hinweis: Rich-Text-Blöcke im Theme Editor (Abschnitte mit einem WYSIWYG-Editor) unterstützen Inline-Links – markiere den Text innerhalb des Rich-Text-Feldes und suche nach dem Link-Symbol in der Mini-Toolbar.
So fügst du einen Link zu Text mittels HTML hinzu
Für präzise Kontrolle kannst du einen HTML-Anchor-Tag direkt in deinen Shopify-Seiteninhalt oder in Theme-Dateien einfügen.
Basissyntax:
<a href="/products/mein-produkt">Kollektion shoppen</a>In einem neuen Tab öffnen:
<a href="https://example.com" target="_blank" rel="noopener">Website besuchen</a>Wo du dies verwenden kannst:
- Im Shopify-Seiteneditor: Wechsle in die HTML-Ansicht (suche nach
< >oder „HTML anzeigen“ in der Toolbar) und füge den Tag direkt ein. - In Theme-Dateien (Sections, Snippets, Templates): Bearbeite diese über Onlineshop → Themes → Aktionen → Code bearbeiten.
Verwende immer rel="noopener", wenn du mit target="_blank" auf externe URLs verlinkst.
So verlinkst du Text mit einem Produkt, einer Kollektion oder einer Seite in Shopify
Shopify-URLs folgen einem einheitlichen Muster:
| Ziel | URL-Format |
|---|---|
| Produkt | /products/produkt-handle |
| Kollektion | /collections/kollektion-handle |
| Seite | /pages/seiten-slug |
| Blog | /blogs/news |
| Blogbeitrag | /blogs/news/beitrags-slug |
| Warenkorb | /cart |
| Extern | https://ganze-url.com |
Der „Handle“ oder „Slug“ ist die URL-freundliche Version des Namens – kleingeschrieben, Bindestriche statt Leerzeichen. Du findest den Handle eines Produkts im Shopify-Admin → Produkte → Klicke auf das Produkt → schaue dir die URL oder den SEO-Bereich ganz unten an.
So fügst du einen Link zu Text in Shopify mit Fudge hinzu
Wenn du Links an Stellen benötigst, die der Theme Editor nicht von Haus aus unterstützt – in einer Custom Section, in einer Tabelle oder anders gestylt als die Standard-Links – beschreibe es einfach Fudge:
“Füge dem zweiten Absatz der Product Feature Section auf meiner Startseite einen ‘Mehr erfahren’-Link hinzu, der auf /pages/how-it-works verweist.”
Fudge erstellt die Code-Änderung als Entwurf, den du in Ruhe überprüfen kannst, bevor irgendetwas live geht.
FAQ
Meistens wurde der Link nicht auf den ausgewählten Text angewendet – das Link-Symbol in der Symbolleiste erfordert, dass Text markiert ist, bevor es aktiv wird. Andere Ursachen: Eine Theme-CSS-Regel, die Pointer-Events auf dem übergeordneten Container deaktiviert, oder der Link wurde eingefügt, aber später über die HTML-Ansicht in ein anderes Element gewickelt (wrapped), was das Anchor-Tag unbrauchbar gemacht hat.
Wähle im Seiteneditor den verlinkten Text aus und klicke erneut auf das Link-Symbol – im Pop-up gibt es normalerweise eine Option wie "Link entfernen". Alternativ wechsle in die HTML-Ansicht und entferne die <a href="...">-Tags um den Text.
Eine relative URL wie /products/my-product funktioniert auf jeder Storefront und richtet sich nach der Domain, auf der du dich befindest (gut für interne Links – sie funktionieren weiterhin, wenn sich deine Domain ändert). Eine absolute URL enthält den vollständigen Pfad: https://yourstore.com/products/my-product – verwende dies für externe Links und überall außerhalb deines Shops (E-Mails, Social-Media-Posts).
Die Link-Benutzeroberfläche des Seiteneditors bietet keine nofollow-Option. Um sie hinzuzufügen, wechsle in die HTML-Ansicht und bearbeite das Anchor-Tag direkt: <a href="..." rel="nofollow">. Verwende für gesponserte Links rel="sponsored". Für UGC-lastige Bereiche wie Kommentare verwende rel="ugc".
Dein Theme wendet wahrscheinlich dieselbe Farbe auf Texte und Links an oder entfernt Unterstreichungen global. Prüfe dies unter Theme-Editor → Theme-Einstellungen → Farben → Links (Theme settings → Colors → Links) oder überschreibe es im CSS. Um dir das zeitraubende Suchen nach der richtigen CSS-Klasse zu sparen, beschreibe Fudge einfach, was du möchtest ("Mache Body-Links blau mit Underline-on-Hover, Navigation und Buttons ignorieren") und es generiert das passende scoped CSS. Siehe unseren Guide Link-Farbe in Shopify ändern für das komplette Tutorial.
