Benutzerdefinierten Code zur Instant Site hinzufügen
Mit benutzerdefiniertem Code können Sie die Eigentümerschaft der Instant Site prüfen und eine Vielzahl neuer Elemente und Inhalte wie Chat- oder Kontaktformular-Widgets zu Ihrer Website hinzufügen. Sie können auf diese Weise auch Dienste von Drittanbietern (z. B. Buchungen) in die Instant Site integrieren.
Es gibt zwei Stellen der Instant Site, an denen Sie Code hinzufügen können: den Kopf bzw. Header und den Inhaltsbereich bzw. Body. Sie können auch spezielle Abschnitte mit benutzerdefiniertem Code zu einzelnen Instant-Site-Seiten hinzufügen.
Wo der Code hinzugefügt wird
Das Hinzufügen von Code zur Instant-Site-Kopfzeile oder zum Body ermöglicht es Ihnen, Code auf alle Website-Seiten anzuwenden. Das Einfügen von Code in einen Instant-Site-Abschnitt ermöglicht es Ihnen, benutzerdefinierten Code zu einer bestimmten Website-Seite hinzuzufügen, zu der dieser Abschnitt gehört.
Wenn Sie zwischen dem Header und dem Body der Instant Site als Platz für Ihren benutzerdefinierten Code wählen, sollten Sie den Code selbst und Ihren Anwendungsfall berücksichtigen.
Im Allgemeinen wird empfohlen, JavaScript in den Body der Website zu implementieren, da dies die Geschwindigkeit der Seite erhöht. Es gibt jedoch Fälle (z. B. die Überprüfung der Domaineigentümerschaft), in denen Ihr Code in den Kopfbereich eingefügt werden muss.
Lesen Sie unbedingt die Anweisungen für den Code/das Widget von Drittanbietern, um zu erfahren, wo Sie diesen Code am besten einfügen sollten.
Code im Header der Instant Site
Das Einfügen von Code in die Kopfzeile der Instant Site ist die beste Option, wenn Sie die Eigentümerschaft einer Website oder einer Domain verifizieren müssen (z. B. beim Verkaufen oder Werben auf Facebook). Sie können mehrere Codes in den Kopfbereich einfügen.
So fügen Sie benutzerdefinierten Code in den Header der Instant Site ein:
- Gehen Sie von Ihrer Shop-Verwaltung aus zu Webseite (oder Übersicht → Instant Site verwalten).
- Scrollen Sie nach unten zu den SEO-Einstellungen und klicken Sie unter Header-Meta-Tags und Websiteverifizierung auf Code hinzufügen :
- Im erscheinenden Feld geben Sie Ihren Code ein.
- Speichern Sie Ihre Änderungen.
Aktualisieren Sie die Seite der Instant Site in Ihrem Browser, um die Änderungen zu sehen.
Code im Body der Instant Site
Das Einfügen von Code in den Body der Instant Site ist die beste Option, wenn Sie ein benutzerdefiniertes Skript implementieren möchten. Beispielsweise, wenn Sie ein Zendesk-Chat-Fenster oder ein Kontaktformular-Widget auf Ihrer Website haben möchten. Sie können so viel Code in den Body-Abschnitt einfügen, wie Sie benötigen.
So fügen Sie benutzerdefinierten Code in den Body der Instant Site ein:
- Gehen Sie von Ihrer Shop-Verwaltung aus zu Webseite (oder Übersicht → Instant Site verwalten).
- Scrollen Sie nach unten zu den erweiterten Website-Einstellungen und klicken Sie unter Benutzerdefinierter JavaScript-Code auf Code hinzufügen:
- Im erscheinenden Feld geben Sie Ihren Code ein (nicht länger als 4000 Symbole).
- Speichern Sie Ihre Änderungen.
Aktualisieren Sie die Seite der Instant Site in Ihrem Browser, um die Änderungen zu sehen.
Hinzufügen benutzerdefinierter Code-Abschnitte zu einzelnen Website-Seiten
Sie können einen speziellen Website-Abschnitt mit benutzerdefiniertem Code (HTML, CSS oder JavaScript) zu jeder beliebigen Instant-Site-Seite hinzufügen. Zum Beispiel, wenn Sie ein Google-Kalender-Widget auf Ihrer Startseite benötigen, damit Kunden Ihre Musiklektionen buchen können, oder Sie Käufern auf der Kontakt-Seite eine 3D-Ansicht Ihres Geschäfts zeigen möchten.
So fügen Sie einen Website-Abschnitt mit benutzerdefiniertem Code hinzu:
- Gehen Sie in Ihrer Shop-Verwaltung zu Webseite → Website bearbeiten.
- (falls Sie mehrere Seiten zu Ihrer Website hinzugefügt haben) Wählen Sie aus der Dropdown-Liste Seite: Startseite in der linken oberen Ecke die Seite aus, zu der Sie Ihren Code hinzufügen möchten.
- Klicken Sie auf Abschnitt hinzufügen und scrollen Sie dann zu Erweiterte Lösungen.
- Klicken Sie im Block Einbetten & benutzerdefinierter Code auf Benutzerdefinierten Code-Abschnitt hinzufügen:
- Fügen Sie Ihren Code in das Feld ein.
- Klicken Sie auf Zurück und ziehen Sie den Abschnitt in der Abschnittsliste per Drag & Drop, um seine Position auf der Website-Seite zu ändern.
- Wenn Sie mit der Bearbeitung Ihrer Website fertig sind, klicken Sie auf Veröffentlichen in der oberen rechten Ecke des Editors.
Geschafft! Sie haben Ihren benutzerdefinierten Code zu einem Instant-Site-Abschnitt auf einer Seite hinzugefügt. Aktualisieren Sie die Seite in Ihrem Browser, um die Änderungen zu sehen.