Die kurze Antwort
Im Builder kannst du an drei Stellen eigenen Code hinzufügen: in einem Abschnitt Eigener Code auf einer Seite, in den Einstellungen Benutzerdefiniertes CSS und in den Einstellungen Benutzerdefiniertes Javascript. Es gibt kein Feld, um Code in den Head-Bereich deines Shops einzufügen. Für Tags im Head nutzt du die passende App (siehe Liste unten).
Welches Werkzeug für welche Aufgabe
- Meinen Shop bei Google Search Console verifizieren oder ein
google-site-verification-Meta-Tag hinzufügen: die App Domain-Prüfer. Sie übernimmt auch die Domain-Verifizierung für Facebook (Meta), TikTok und Snapchat. - Google Analytics, Google-Ads-Tags oder jedes Tag, das du im Google Tag Manager verwaltest: die App Google Tag Manager.
- Pixel von Facebook, TikTok, Snapchat, ChatGPT, Pinterest, X oder Google Ads: siehe Facebook, TikTok, Snapchat, ChatGPT, Pinterest und X oder Google-Ads-Conversions.
- Produktfeed für das Google Merchant Center: siehe Google Merchant Center. Für die Search Console nutzt du den Domain-Prüfer.
- Heatmaps und Sitzungsaufzeichnungen: siehe Microsoft Clarity oder Contentsquare.
- Ein Widget oder eine Einbettung auf einer Seite (ein Buchungsformular, ein Video, eine Karte): der Abschnitt Eigener Code weiter unten.
- Stile für den ganzen Shop oder einen Abschnitt: siehe Benutzerdefiniertes CSS.
- Ein Skript auf jeder Seite: siehe Benutzerdefiniertes JavaScript.
Warum Code im Builder deine Website nicht verifizieren kann
Google, Meta und andere Plattformen suchen bei der Verifizierung nach ihrem Tag im Head deiner Seite. Ein Abschnitt Eigener Code setzt deinen Code in den Body der Seite, dorthin, wo der Abschnitt steht. Benutzerdefiniertes Javascript läuft im Browser des Kunden, nachdem die Seite geladen ist. Keins von beiden setzt ein Tag so in den Head, wie diese Plattformen es brauchen, deshalb schlägt die Verifizierung fehl. Der Domain-Prüfer fügt das Tag für dich an der richtigen Stelle ein.
Abschnitt Eigener Code
Ein Abschnitt, den du auf jeder Seite hinzufügen kannst, bis zu 2 pro Seite. Öffne den Tab Abschnitte, klicke auf Neuen Abschnitt hinzufügen und wähle Eigener Code. Er hat drei Felder:
- HTML: Markup, das in diesem Abschnitt angezeigt wird.
- CSS: Stile, die nur für diesen Abschnitt gelten, damit sie den Rest deiner Seite nicht kaputt machen können.
- JavaScript: läuft jedes Mal, wenn der Abschnitt angezeigt wird. Dein Code erhält den Abschnitt als
container, nutze alsocontainer.querySelector(...), um dein eigenes Markup zu erreichen.
Breite, Farbschema und Innenabstand stellst du wie bei jedem Abschnitt ein. Mit Auf alle Seiten anwenden kopierst du ihn auf andere Seiten, die schon einen Abschnitt Eigener Code haben.
Tipps
- Prüfe deinen Code in der Builder-Vorschau, veröffentliche dann und teste deinen Live-Shop auf einem Handy und einem Computer.
- Wenn die Seite nach einer Änderung kaputt aussieht, entferne den Code, veröffentliche und füge ihn Stück für Stück wieder hinzu.
- Skripte von Drittanbietern können deinen Shop verlangsamen. Füge nur hinzu, was du brauchst.
- Ein KI-Assistent, der mit deinem Shop verbunden ist, kann eigenen Code nur ändern, wenn der Shop-Inhaber es erlaubt. Siehe Zugriff von KI-Assistenten verwalten.