Das Wichtigste in Kürze
- Im Shopify-Seiteneditor wählst du den Text aus und klickst auf das Link-Symbol in der Werkzeugleiste, um einen Hyperlink hinzuzufügen.
- In Textblöcken des Theme-Editors gibt es teilweise ein spezielles 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.
Um in Shopify einen Link zu einem Text hinzuzufügen, markierst du den Text im Seiten- oder Blog-Editor, klickst auf das Ketten-Symbol und gibst die URL ein. Textblöcke im Theme-Editor und im Theme-Code funktionieren etwas anders; beides wird im Folgenden behandelt.
Warum du uns vertrauen kannst
Wir haben hunderte von Shopify-Storefronts aufgebaut und angepasst. Außerdem haben wir Fudge entwickelt, den KI-Operator für Shopify-Stores, mit einer 4.9-Sterne-Bewertung im Shopify App Store.
So fügst du im Shopify-Seiteneditor einen Link zu Text hinzu
Das gilt für Text in Onlineshop → Seiten oder Onlineshop → Blog-Beiträge.
Schritt 1. Gehe zu Onlineshop → Seiten (oder Blog-Beiträge) und öffne die Seite, die du bearbeiten möchtest.
Schritt 2. Markiere im Inhaltsbereich den Text, den du in einen Link umwandeln möchtest. Hebe ihn mit dem Mauszeiger hervor.
Schritt 3. Klicke auf das Link-Symbol in der Werkzeugleiste des Editors (es sieht aus wie ein Kettenglied). Ein Popup erscheint, in dem nach der URL gefragt wird.
Schritt 4. Gib die URL ein. Verwende für interne Links den relativen Pfad: /products/my-product, /collections/sale, /pages/about. Für externe Links verwendest du die vollständige URL einschließlich https://.
Schritt 5. Klicke auf Anwenden oder Einfügen und speichere dann die Seite.
Der ausgewählte Text ist nun ein klickbarer Hyperlink, der entsprechend den Standard-Link-Styles deines Themes formatiert ist.
Wie du Links zu Bildern hinzufügst, erfährst du unter Einen Link zu einem Bild in Shopify hinzufügen.
Wie man einen Text-Link in einem neuen Tab öffnen lässt
Wenn sich der Link in einem neuen Tab öffnen soll, klickst du auf das Link-Icon in der Toolbar, gibst die URL ein und suchst nach einer “In neuem Tab öffnen”-Checkbox (Open in new tab), bevor du bestätigst. Bei externen Links ist es meist sinnvoll, sie in einem neuen Tab zu öffnen; bei internen Links ist das nicht nötig.
So fügst du im Shopify Theme Editor einen Link zu Text hinzu
Textblöcke innerhalb der Abschnitte des Theme-Editors funktionieren anders als Seiteninhalte.
Schritt 1. Gehe zu Onlineshop → Themes → Anpassen.
Schritt 2. Klicke auf den Abschnitt oder Block, der deinen Text enthält.
Schritt 3. Suche im Einstellungsfeld auf der rechten Seite nach einem Link- oder URL-Feld unterhalb der Texteingabe. Manche Textblöcke haben das; andere nicht.
Schritt 4. Gib das Link-Ziel 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 via 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 im Rich-Text-Feld und suche nach dem Link-Symbol in dieser Mini-Werkzeugleiste.
So fügst du mit HTML einen Link zu Text hinzu
Für die genaue Kontrolle kannst du ein HTML-Anchor-Tag direkt im Seiteninhalt deiner Shopify-Seite oder in Theme-Dateien verwenden.
Grundlegende Syntax:
<a href="/products/my-product">Kollektion shoppen</a>In einem neuen Tab öffnen:
<a href="https://example.com" target="_blank" rel="noopener">Seite besuchen</a>Wo man das verwendet:
- Wechsle im Shopify-Seiteneditor in die HTML-Ansicht (suche nach
< >oder “HTML anzeigen” in der Werkzeugleiste) und füge das Tag direkt ein. - Gehe für Theme-Dateien (Sections, Snippets, Templates) zu Onlineshop → Themes, klicke auf das Drei-Punkte-Menü (…) neben deinem Theme und dann auf Code bearbeiten.
Verwende immer rel="noopener", wenn du auf externe URLs mit target="_blank" verlinkst.
So verlinkst du Text auf ein Produkt, eine Kategorie oder eine Seite in Shopify
Shopify-URLs folgen einem einheitlichen Muster:
| Ziel | URL-Format |
|---|---|
| Produkt | /products/product-handle |
| Kategorie (Collection) | /collections/collection-handle |
| Seite | /pages/page-slug |
| Blog | /blogs/news |
| Blog-Beitrag | /blogs/news/post-slug |
| Warenkorb (Cart) | /cart |
| Extern | https://full-url.com |
Der “Handle” oder “Slug” ist die URL-freundliche Version des Namens – klein geschrieben, Bindestriche statt Leerzeichen. Du findest den Handle eines Produkts im Shopify Adminbereich → Produkte → klicke auf das Produkt → schau auf die URL oder in den SEO-Bereich ganz unten.
So fügst du in Shopify einen Link mit Fudge zu Text hinzu
Wenn du Links an Stellen benötigst, die der Theme-Editor von Haus aus nicht unterstützt – in einem benutzerdefinierten Abschnitt, in einer Tabelle oder mit einem vom Standard abweichenden Styling –, beschreibe es Fudge, dem KI-Operator für Shopify-Stores, in seinem Store-Editor:
„Füge einen ‘Mehr erfahren’-Link zum zweiten Absatz des Produkt-Feature-Abschnitts auf meiner Startseite hinzu, der auf /pages/how-it-works verweist.“
Fudge erstellt die Codeänderung als Entwurf, den du überprüfen kannst, bevor etwas live geht. Bei jeder veröffentlichten Änderung bleibt die vorherige Version erhalten, sodass du sie bei Bedarf später wiederherstellen kannst.
FAQ
Warum ist mein Hyperlink im Seiteneditor nicht klickbar?
Meistens wurde der Link nicht auf den ausgewählten Text angewendet – für das Link-Symbol in der Werkzeugleiste muss der Text markiert sein, bevor es aktiv wird. Andere Ursachen: eine CSS-Regel im Theme, 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, wodurch das Anchor-Tag kaputt ging.
Wie entferne ich einen Link aus einem Text in Shopify?
Wähle im Seiteneditor den verlinkten Text aus und klicke erneut auf das Link-Symbol – im Popup gibt es normalerweise die Option "Link entfernen" oder "Verknüpfung aufheben". Alternativ kannst du in die HTML-Ansicht wechseln und die <a href="...">-Tags um den Text herum entfernen.
Was ist der Unterschied zwischen einer relativen URL und einer absoluten URL in Shopify?
Eine relative URL wie /products/my-product funktioniert in jeder Storefront und folgt 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 diese für externe Links und überall außerhalb deines Stores (E-Mails, Social-Media-Posts).
Kann ich in Shopify ein `nofollow`-Attribut zu einem Link hinzufügen?
Die Link-Benutzeroberfläche des Seiteneditors bietet keine Nofollow-Option. Um es hinzuzufügen, wechsle in die HTML-Ansicht und bearbeite das Anchor-Tag direkt: <a href="..." rel="nofollow">. Für gesponserte Links verwendest du rel="sponsored". Für Bereiche mit viel User-Generated-Content wie Kommentare benutzt du rel="ugc".
Warum sehen meine Links genauso aus wie normaler Text?
Dein Theme weist wahrscheinlich Text und Links die gleiche Farbe zu oder entfernt Unterstreichungen global. Überprüfe Theme-Editor → Theme-Einstellungen → Farben → Links oder überschreibe es im CSS. Um die Suche nach der richtigen CSS-Klasse zu überspringen, beschreibe Fudge einfach, was du willst ("mache Body-Links blau mit underline-on-hover, lass Navigation und Buttons unberührt") und es schreibt das passende CSS für dich. Siehe Linkfarbe in Shopify ändern für die vollständige Anleitung.
