Wichtige Erkenntnisse
- Markiere im Shopify-Seiteneditor den Text und klicke auf das Link-Symbol in der Toolbar, um einen Hyperlink hinzuzufügen.
- In den Textblöcken des Theme Editors verfügen einige über ein eigenes Link-Feld – hier ist keine Textauswahl erforderlich.
- Für die volle Kontrolle über Link-Styling und Platzierung verwende HTML-Anchor-Tags im Code-Editor oder über Fudge.
- Du kannst auf interne Seiten, Produkte, Kollektionen oder externe URLs verlinken.
Das Hinzufügen eines anklickbaren 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 deckt alle drei Bereiche ab.
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 – für das Link-Icon in der Toolbar muss Text markiert sein, damit es aktiv wird. Weitere Ursachen: eine CSS-Regel im Theme, die Pointer-Events für den übergeordneten Container deaktiviert, oder der Link wurde eingefügt, aber später über die HTML-Ansicht in ein anderes Element verpackt, was den Anchor-Tag zerstört hat.
Markiere im Seiten-Editor den verlinkten Text und klicke erneut auf das Link-Icon – im Popup gibt es normalerweise eine Option für „Link entfernen“. Alternativ kannst du in die HTML-Ansicht wechseln und die <a href="...">-Tags um den Text herum entfernen.
Eine relative URL wie /products/my-product funktioniert auf jeder Storefront und orientiert sich an 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 kompletten Pfad: https://deinshop.com/products/my-product – nutze diese für externe Links und überall außerhalb deines Shops (E-Mails, Social Media).
Das Link-Menü im Seiten-Editor bietet keine Nofollow-Option. Um diese hinzuzufügen, wechsle in die HTML-Ansicht und bearbeite den Anchor-Tag direkt: <a href="..." rel="nofollow">. Nutze für gesponserte Links rel="sponsored". Für Bereiche mit viel UGC (wie z. B. Kommentare) nutze rel="ugc".
Dein Theme wendet wahrscheinlich die gleiche Farbe auf Text und Links an oder entfernt Unterstreichungen global. Überprüfe das unter Theme Editor → Theme-Einstellungen → Farben → Links oder überschreibe es im CSS. Um dir die lästige Suche nach CSS-Klassen zu ersparen, beschreibe Fudge einfach, was du vorhast („mache Body-Links blau mit Underline-on-Hover, lasse Nav und Buttons unberührt“) und das Tool schreibt dir das passende Scoped CSS. Ein komplettes Tutorial findest du unter Link-Farbe in Shopify ändern.
