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/product-handle |
| Kategorie | /collections/collection-handle |
| Seite | /pages/page-slug |
| Blog | /blogs/news |
| Blogbeitrag | /blogs/news/post-slug |
| Warenkorb | /cart |
| Extern | https://full-url.com |
Das „Handle“ oder der „Slug“ ist die URL-freundliche Version des Namens – kleingeschrieben, Bindestriche statt Leerzeichen. Du findest das Handle eines Produkts im Shopify-Adminbereich → Produkte → auf das Produkt klicken → auf die URL oder den SEO-Bereich ganz unten schauen.
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 wird, bevor es aktiv wird. Weitere 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 gepackt, was den Anchor-Tag zerstört hat.
Wähle im Seiten-Editor den verlinkten Text aus und klicke erneut auf das Link-Symbol – im Popup gibt es normalerweise eine Option zum "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 richtet sich nach der Domain, auf der du dich befindest (gut für interne Links – sie funktionieren auch dann noch, wenn sich deine Domain ändert). Eine absolute URL enthält den vollständigen Pfad: https://yourstore.com/products/my-product – nutze dies für externe Links und überall außerhalb deines Shops (E-Mails, Social-Media-Posts).
Die Link-UI des Seiten-Editors bietet keine Nofollow-Option. Um sie hinzuzufügen, wechsle in die HTML-Ansicht und bearbeite den Anchor-Tag direkt: <a href="..." rel="nofollow">. Für gesponserte Links verwendest du rel="sponsored". Für Bereiche mit viel User-Generated Content (UGC) wie Kommentare nutzt du rel="ugc".
Dein Theme wendet wahrscheinlich dieselbe Farbe für Text und Links an oder entfernt Unterstreichungen global. Überprüfe den Theme-Editor → Theme-Einstellungen → Farben → Links, oder überschreibe es im CSS. Um dir die Suche nach der richtigen CSS-Klasse zu sparen, beschreibe einfach Fudge, was du willst ("mache Body-Links blau mit Underline-on-Hover, lasse Nav und Buttons unberührt") und es schreibt das passende Scoped CSS für dich. Unter Linkfarbe in Shopify ändern findest du die komplette Anleitung.
