Tutorials

So fügst du HTML-Code zu Shopify hinzu: Der ultimative Guide

Melden

Hier ist ein umfassendes Tutorial, wie du HTML-Code in deinen Shopify-Shop einfügst – verständlich und Schritt für Schritt erklärt.

Shopify ist ein mächtiges Tool, aber manchmal reichen die Standard-Einstellungen nicht aus. Egal, ob du ein externes Widget einbetten, einen Tracking-Pixel installieren oder das Design deiner Seite individuell anpassen möchtest – das Hinzufügen von HTML-Code ist eine grundlegende Fähigkeit.

In dieser Anleitung zeigen wir dir die drei gängigsten Methoden.

Vorbereitung: Sicherheit geht vor!

Bevor du Änderungen am Code vornimmst, solltest du immer ein Backup deines Themes erstellen.

  1. Gehe zu Onlineshop > Themes.
  2. Klicke neben deinem aktuellen Theme auf die drei Punkte (Aktionen).
  3. Wähle Duplizieren.

Methode 1: HTML in Seiten, Blogbeiträgen oder Produktbeschreibungen hinzufügen

Dies ist der einfachste Weg, wenn du Code (z. B. ein YouTube-Video, ein Kontaktformular oder einen speziellen Text-Stil) direkt in einen Inhalt einbetten möchtest.

  1. Öffne im Shopify-Adminbereich die Seite, das Produkt oder den Blogbeitrag.
  2. Suche im Texteditor (Rich Text Editor) das Symbol < > (HTML anzeigen) oben rechts in der Symbolleiste.
  3. Klicke darauf. Nun siehst du den HTML-Quellcode des Textes.
  4. Füge deinen HTML-Code an der gewünschten Stelle ein.
  5. Klicke erneut auf das < > Symbol, um zur normalen Ansicht zurückzukehren, und drücke auf Speichern.

Methode 2: Den Theme-Editor nutzen (Custom Liquid/HTML)

Seit der Einführung von Shopify Online Store 2.0 bieten die meisten modernen Themes (wie Dawn) die Möglichkeit, Code-Abschnitte direkt im Editor hinzuzufügen, ohne die Hauptdateien zu bearbeiten.

  1. Gehe zu Onlineshop > Themes und klicke auf Anpassen (Customize).
  2. Navigiere zu der Seite, auf der der Code erscheinen soll (z. B. Startseite).
  3. Klicke in der linken Seitenleiste auf Abschnitt hinzufügen.
  4. Suche nach Custom Liquid oder Benutzerdefiniertes HTML.
  5. Wähle den Block aus und füge deinen Code in das Textfeld auf der rechten Seite ein.
  6. Klicke auf Speichern.

Methode 3: HTML direkt in die Theme-Dateien einfügen

Diese Methode ist für fortgeschrittene Anpassungen gedacht, wie z. B. das Hinzufügen von Meta-Tags oder Skripten in den <head>-Bereich deiner Website.

  1. Gehe zu Onlineshop > Themes.
  2. Klicke auf die drei Punkte neben "Anpassen" und wähle Code bearbeiten.
  3. Suche im Ordner Layout die Datei theme.liquid. Dies ist die Hauptdatei deines Shops.
  4. Für Skripte (wie Google Analytics oder Facebook Pixel): Suche den Tag </head> und füge deinen Code direkt darüber ein.
  5. Für Elemente im Footer: Suche den Tag </body> am Ende der Datei und füge den Code darüber ein.
  6. Klicke auf Speichern.

Zusammenfassung: Welche Methode ist die richtige?

  • Methode 1 (Editor): Ideal für Einmalige Inhalte in Blogs oder Produkten.
  • Methode 2 (Custom Liquid): Perfekt für Design-Elemente oder Widgets auf der Startseite.
  • Methode 3 (Theme-Code): Notwendig für shopweite Skripte, Tracking-Codes oder tiefgreifende Änderungen.

Tipps für den Erfolg:

  • Fehlersuche: Wenn dein Code nicht funktioniert, überprüfe, ob alle Tags korrekt geschlossen sind (z. B. jedes <div> braucht ein </div>).
  • Apps nutzen: Für sehr komplexe HTML-Änderungen gibt es im Shopify App Store spezialisierte "Page Builder" wie PageFly oder Shogun, die HTML-Blöcke per Drag-and-Drop ermöglichen.

Nun bist du bereit, deinen Shopify-Store mit individuellem HTML-Code auf das nächste Level zu heben!

0