Diese Anleitungen beschreiben Toimii nach dem Start. Das Dashboard und die Abrechnung sind noch nicht verfügbar — Toimii wird 2026 veröffentlicht.

Kontaktformular auf Shopify mit Custom Liquid einbetten

Ein Custom-Liquid-Bereich in jedem Theme. Keine App-Installation, keine Liquid-Kenntnisse erforderlich – einfach die zwei Zeilen einfügen.

<script src="https://cdn.toimii.io/components/your-code.js" async></script>
<toimii-contact></toimii-contact>

Funktioniert das wirklich?

Ja – bei jedem Shopify-Theme, das Online Store 2.0 unterstützt (Dawn und jedes moderne Theme). Der Custom-Liquid-Bereich ist in Shopify integriert; für die meisten Seiten ist keine App-Installation und keine Bearbeitung des Theme-Codes erforderlich.

Schritt für Schritt

Theme-Editor öffnen

Gehen Sie in Ihrem Shopify-Adminbereich zu Online Store → Themes → Anpassen des gewünschten Themes.

Custom-Liquid-Bereich hinzufügen

Wählen Sie die Seite aus, auf der das Formular erscheinen soll (eine Seite, die Kontaktseite oder eine beliebige Seitenvorlage). Klicken Sie auf „Bereich hinzufügen“ und wählen Sie „Custom Liquid“.

Einbettungscode einfügen

Fügen Sie die zwei Zeilen aus Ihrem Toimii-Dashboard in das Liquid-Feld ein. Liquid leitet reinen HTML-Code unverändert weiter, sodass Script-Tag und benutzerdefiniertes Element wie vorgesehen funktionieren.

Theme speichern

Speichern Sie im Theme-Editor. Das Formular ist sofort im Storefront live.

Auf dem Live-Storefront testen

Öffnen Sie die Live-Seite (nicht die Vorschau) und senden Sie eine Testnachricht, um zu bestätigen, dass alles einwandfrei funktioniert. Falls etwas nicht stimmt, beachten Sie die Hinweise unten.

Häufige Fallstricke

Direkte theme.liquid-Bearbeitungen werden bei Theme-Updates überschrieben. Verwenden Sie den Custom-Liquid-Bereich im Theme-Editor (seitenweise gespeichert) oder duplizieren Sie das Theme, bevor Sie zentrale Dateien bearbeiten.
Custom Liquid auf Checkout-Seiten erfordert Shopify Plus. Bei Standard-Plänen betten Sie stattdessen auf Kontakt-, FAQ- oder Produktseiten ein.
Einige Themes haben eine integrierte CSP, die Drittanbieter-Scripts blockiert. Wenn das Formular nicht angezeigt wird, erlauben Sie cdn.toimii.io und api.toimii.io in script-src / connect-src.
Die Vorschau im Theme-Editor lädt Bereiche manchmal lazy, was das erste Rendering benutzerdefinierter Elemente beeinträchtigen kann. Rufen Sie die Seite über die Live-Storefront-URL auf (oder verwenden Sie die Schaltfläche „Ansehen"), um dies zu bestätigen – die Vorschau ist nicht maßgeblich.
Wenn Sie das Formular in einen Liquid-{% if %}-Block einschließen, lädt das Script trotzdem auf jeder Seite. Um Daten zu sparen, versehen Sie das Script-Tag mit derselben Bedingung.

Häufig gefragt

Benötige ich eine Shopify-App aus dem App Store?

Nein. Custom Liquid ist ein integrierter Shopify-Theme-Bereich — jedes Theme ab Dawn aufwärts unterstützt ihn. Im App Store gibt es zahlreiche „Kontaktformular“-Apps; für Toimii benötigen Sie keine davon.

Kann ich es auf der Checkout-Seite einbetten?

Nicht bei Standard-Plänen. Custom Liquid auf Checkout-Seiten erfordert Shopify Plus. Bei Shops ohne Plus-Abo betten Sie das Formular stattdessen auf einer Kontaktseite, FAQ-Seite oder der Bestellstatusseite nach dem Kauf ein.

Werden meine Einbettungscodes durch Theme-Updates überschrieben?

Ja – direkte Bearbeitungen von Theme-Dateien (theme.liquid, sections/*.liquid) werden beim Aktualisieren oder Wiederherstellen des Themes überschrieben. Zwei sicherere Optionen: Verwenden Sie einen Theme-Bereich mit Custom-Liquid-Block (seitenweise im Theme-Editor gespeichert) oder duplizieren Sie das Theme vor der Bearbeitung.

Mein Shop hat eine Content-Security-Policy – blockiert das Toimii?

Einige Shops verwenden eine strenge Content-Security-Policy über Theme-Einstellungen oder Apps. Wenn das Formular nicht angezeigt wird, erlauben Sie Folgendes in script-src: cdn.toimii.io und api.toimii.io.

Funktioniert es auf einer benutzerdefinierten Storefront-API-Website (Hydrogen, Next.js)?

Ja. Verwenden Sie die App Bridge, um einen HTML-Container zu rendern, und fügen Sie dann das Script-Tag und das benutzerdefinierte Element ein. Gleiche Vorgehensweise: zwei Codezeilen, das benutzerdefinierte Element erledigt den Rest.

Einbetten auf einer anderen Plattform?

Dieselben zwei Codezeilen, für jede Plattform einzeln erklärt.

WordPress

Benutzerdefinierter HTML-Block, Block-Editor oder Classic Editor. Keine Plugin-Installation. Ein Vorbehalt — Ihre Benutzerrolle benötigt die Berechtigung unfiltered_html.

Vollständige Anleitung lesen

Squarespace

Fügen Sie einen Code-Block auf einer beliebigen Seite ein. Erfordert den Core-Plan (2025 umbenannt von Business) oder höher.

Vollständige Anleitung lesen

Webflow

Das Code-Embed-Element fasst bis zu 50.000 Zeichen. Benutzerdefinierter Code erfordert den Basic-Plan oder höher. Zum Anzeigen veröffentlichen.

Vollständige Anleitung lesen

Wix

Wix kapselt das Embed-Widget in einer Sandbox, daher verwenden wir eine geteilte Methode — Script über Einstellungen → Benutzerdefinierter Code, Tag über Widget einbetten. Ein ehrlicher Leitfaden.

Vollständige Anleitung lesen

Statische Websites

Astro, Hugo, 11ty, Jekyll — dieselben zwei Zeilen in Ihrer Layout-Vorlage. Builds bleiben schnell.

Vollständige Anleitung lesen

HTML / Benutzerdefiniert

Eine einfache HTML-Seite genügt. Öffnen Sie sie in einem beliebigen Texteditor, fügen Sie den Code ein, speichern Sie, laden Sie hoch. Drei Schritte — und Sie sind live.

Vollständige Anleitung lesen

React / Vue / Angular

Verwenden Sie das Custom Element direkt in JSX, Vue-Templates oder Angular-Komponenten. Kein Wrapper, kein zusätzliches Paket.

Vollständige Anleitung lesen

Bereit zum Ausprobieren?

30 Tage kostenlos testen. Keine Kreditkarte. In wenigen Minuten eingerichtet.

Keine Kreditkarte nötig. In 2 Minuten startklar.