Ck Sections Documentation

So installieren Sie die App

Aufrufen des App-Menüs

Um mit der Installation zu beginnen, melden Sie sich in Ihrem Shopify-Admin-Dashboard an. Suchen Sie in der Navigationsleiste auf der linken Seite den Menüpunkt Apps und klicken Sie darauf. Dadurch öffnet sich eine Dropdown-Suchleiste und eine Liste Ihrer derzeit installierten Anwendungen.

Empfohlene Apps ansehen

Sobald die App-Suchleiste erscheint, schauen Sie an das untere Ende des Pop-up-Fensters. Klicken Sie auf den Link Alle empfohlenen Apps. Dadurch wird ein modales Fenster geöffnet, das eine kuratierte Auswahl an Apps enthält, die entwickelt wurden, um die Funktionalität Ihres Shops zu erweitern.

Navigation zum Shopify App Store

Scrollen Sie im Modal „Für Sie ausgewählt“ bis zum Ende des Fensters. Klicken Sie auf den Link Shopify App Store (im Footer hervorgehoben). Sie werden zum offiziellen Marktplatz weitergeleitet, wo Sie die App CK-Sections suchen und installieren können, um mit der Anpassung Ihres Shops zu beginnen.

Suchen Sie die Suchleiste

Sobald Sie sich auf der Startseite des Shopify App Stores befinden, scrollen Sie zum oberen Rand der Seite. Dort finden Sie eine gut sichtbare Suchleiste mit der Beschriftung „Apps, Anleitungen und mehr suchen“. Klicken Sie in dieses Feld, um mit der Suche zu beginnen.

Suche nach CK-Bereichen

Geben Sie "CK Sections" in die Suchleiste ein. Während Sie tippen, erscheint ein Dropdown-Menü mit relevanten Vorschlägen. Suchen Sie nach "CK Sections Theme Store Design" und klicken Sie darauf, um fortzufahren.

Wählen Sie die App aus den Ergebnissen aus

Sie werden zur Suchergebnisseite weitergeleitet. Suchen Sie den App-Eintrag für "CK Sections Theme Store Design" – er ist leicht an seinem lila Logo und der Beschreibung "Easily add, manage, and install sections to theme and checkout" zu erkennen. Klicken Sie auf den Titel, um die Installationsseite der App zu öffnen.

Installation starten

Klicken Sie auf der speziellen Store-Seite der App auf die auffällige schwarze Schaltfläche Installieren auf der linken Seite, direkt unterhalb der Bewertung und den Informationen zum Entwickler der App.

Berechtigungen erteilen

Sie werden zu Ihrem Shopify-Admin weitergeleitet, um die Installation zu autorisieren. Überprüfen Sie die Anforderungen an den Datenzugriff (wie personenbezogene Daten und Shop-Daten) und klicken Sie unten rechts im Pop-up auf die rote Schaltfläche Installieren, um den Vorgang abzuschließen.

So fügen Sie einen Abschnitt hinzu

Deinen ersten Abschnitt hinzufügen

Nach der Installation gelangen Sie zum CK Section Marketplace. Durchstöbern Sie die verfügbaren Vorlagen, wie z. B. den „Stats Counter“ oder „Modern Image with Text“. Wenn Sie einen Abschnitt gefunden haben, der Ihnen gefällt, klicken Sie auf die Schaltfläche Add Free, um ihn zu Ihrer Sammlung hinzuzufügen.

Im Theme installieren

Suchen Sie im Dashboard "Meine Bereiche" den Bereich, den Sie verwenden möchten (z. B. CK - FAQ #1). Klicken Sie auf die Schaltfläche "Im Theme installieren" am unteren Rand der Bereichskarte.

Wählen Sie Ihr Theme

Es erscheint ein Pop-up-Fenster mit dem Titel „[Section Name] im Theme installieren“. Klicken Sie auf das Dropdown-Menü „Theme auswählen“, um eine Liste aller derzeit in Ihrem Shopify-Shop verfügbaren Themes anzuzeigen. Wählen Sie das Theme aus, dem der Abschnitt hinzugefügt werden soll

Bereich „Installiert“ verwenden

Eröffnen Sie Ihren Onlineshop

Navigieren Sie in der Seitenleiste Ihres Shopify-Adminbereichs zu Online-Shop. Dadurch gelangen Sie zu Ihrem Theme-Bereich, in dem Sie Ihre aktiven und Entwurfs-Themes verwalten können.

Auf den Theme-Editor zugreifen

Suchen Sie in der Seitenleiste des Theme-Editors den Bereich, in dem Sie den neuen Inhalt hinzufügen möchten (z. B. den Bereich „Vorlage“), und klicken Sie auf die Schaltfläche (+) Abschnitt hinzufügen.

Wählen Sie Ihren CK-Bereich aus

Ein Suchmenü wird geöffnet. Scrollen Sie durch die Liste oder suchen Sie nach dem Abschnitt, den Sie gerade installiert haben. Er ist in der Regel mit „CK“ versehen (z. B. CK faq #1). Klicken Sie darauf, um ihn zu Ihrem Seitenlayout hinzuzufügen.

Anpassen und speichern

Sobald der Abschnitt auf Ihrer Seite erscheint, können Sie die rechte Seitenleiste verwenden, um Farben, Schriftarten und Texte anzupassen. Wenn Sie mit dem Aussehen zufrieden sind, klicken Sie auf die Schaltfläche Speichern in der oberen rechten Ecke, um die Änderungen live zu schalten.

Formular-Builder

Das Erstellen benutzerdefinierter Formulare für Ihren Shop ist ganz einfach. Folgen Sie dieser Anleitung, um Ihre Formulare in wenigen Minuten zu erstellen, anzupassen und zu speichern.

Erste Schritte

Klicken Sie auf die Schaltfläche + Formular erstellen oben rechts oder in der Mitte des Dashboards, um den Einrichtungsbildschirm zu öffnen.

Wählen Sie Ihren Ausgangspunkt

Sie haben zwei Möglichkeiten, ein Formular zu erstellen:

  • Vorlagen: Wählen Sie aus vordefinierten Optionen wie Kontaktformular, Bewerbung oder Sonderanfertigung, um Zeit zu sparen.
  • Von Grund auf neu beginnen: Klicken Sie auf Leeres Formular erstellen, um ein individuelles Layout von Grund auf zu erstellen.

Verwendung der Builder-Oberfläche

Der Editor ist in drei Hauptbereiche unterteilt:

  • Linke Seitenleiste (Felder): Ihr Werkzeugkasten. Klicken Sie auf ein beliebiges Feld (Text, E-Mail, Telefon, Dropdown usw.) oder ziehen Sie es in den mittleren Bereich.
  • Mittlerer Arbeitsbereich: Ihre Live-Vorschau des Formulars. Hier können Sie die Formularüberschrift und die Beschreibung bearbeiten.
  • Obere Leiste: Enthält die Funktionen Rückgängig/Wiederholen, eine Vorschau-Schaltfläche zur Anzeige der Live-Version, die Einstellungen und die Speichern-Schaltfläche.

Grundeinstellungen

Sobald Sie ein Feld hinzugefügt haben, klicken Sie darauf, um die Bearbeitungsleiste auf der rechten Seite zu öffnen. Die Anpassung ist in vier Kategorien unterteilt:

Ändern Sie die Bezeichnung, fügen Sie einen Platzhaltertext hinzu oder markieren Sie das Feld als Pflichtfeld.

Validierung

Legen Sie Min/Max-Zeichenlängen fest oder verwenden Sie Regex-Muster für bestimmte Datentypen.

Layout

Wechseln Sie zwischen Volle Breite und Halbe Breite, um zwei Felder nebeneinander zu platzieren.

Bedingte Logik

Mit bedingter Logik können Sie „intelligente“ Formulare erstellen, die sich je nach Benutzereingabe ändern. Sie können bestimmte Felder nur dann anzeigen oder ausblenden, wenn bestimmte Kriterien erfüllt sind.

So legen Sie die Logik fest

  1. Feld auswählen: Klicken Sie auf das Feld, das Sie dynamisch anzeigen oder ausblenden möchten.
  2. Logik aktivieren: Erweitern Sie in der rechten Seitenleiste den Abschnitt Bedingte Logik und aktivieren Sie das Kontrollkästchen Bedingte Logik aktivieren.
  3. Aktion festlegen: * Wählen Sie aus, ob das ausgewählte Feld angezeigt oder ausgeblendet werden soll.
  4. Regelübereinstimmung festlegen:
    Alle:     Jede Bedingung muss erfüllt sein.
    Irgendeine: Es muss nur eine der Bedingungen erfüllt sein.
  5. Bedingungen konfigurieren:
    Feld auswählen:     Wählen Sie das Feld aus, dessen Wert die Logik auslöst.
    Operator auswählen: Wählen Sie aus, wie der Wert verglichen werden soll (z. B. Ist gleich, Enthält, Ist größer als, Ist leer).
    Wert eingeben: Geben Sie den gesuchten Wert ein.

Allgemeine Einstellungen

Steuern Sie, was nach der Interaktion eines Benutzers mit Ihrem Formular passiert.

  • Text der Absende-Schaltfläche: Passen Sie die Beschriftung Ihrer primären Aktionsschaltfläche an (z. B. „Nachricht senden“, „Jetzt buchen“).
  • Erfolgsmeldung: Verfassen Sie eine individuelle Dankesnachricht, die unmittelbar nach dem erfolgreichen Absenden angezeigt wird.
  • Weiterleitungs-URL: (Optional) Leiten Sie Benutzer automatisch auf eine bestimmte Seite weiter (z. B. eine „Dankeschön“- oder „Angebote“-Seite), sobald sie das Formular abgeschickt haben.

Styling

Passen Sie das Design an das Branding Ihres Shops an, ohne Code zu schreiben.

  • Farben: Legen Sie spezifische Hex-Codes für Ihre Primärfarbe (Schaltflächen/Highlights), den Hintergrund und den Text fest.
  • Typografie: Wählen Sie eine Schriftfamilie oder stellen Sie sie auf Vom Theme erben ein, um das Erscheinungsbild Ihres Shops konsistent zu halten.
  • Abstände & Form: Verwenden Sie die Schieberegler, um den Eckenradius (für abgerundete Ecken) und das Padding (um Ihren Feldern mehr Platz zu geben) anzupassen.

E-Mail-Benachrichtigungen

Bleiben Sie über neue Leads und Anfragen auf dem Laufenden.

  • Benachrichtigungen aktivieren: Schalten Sie den Schalter um, um jedes Mal eine E-Mail zu erhalten, wenn ein Formular gesendet wird.
  • Benachrichtigungs-E-Mails: Klicken Sie auf + E-Mail hinzufügen, um Benachrichtigungen gleichzeitig an mehrere Teammitglieder oder Abteilungen zu senden.

Sicherheit

Schützen Sie Ihren Shop vor Spam und automatisierten Bots.

  • CAPTCHA-Schutz: Aktivieren Sie diesen, um einen Verifizierungsschritt für Nutzer hinzuzufügen und das Absenden von Formularen durch Bots zu verhindern.
  • Ratenbegrenzung: Legen Sie eine maximale Anzahl an Absendungen pro Minute für einen einzelnen Nutzer fest, um den Missbrauch von Formularen zu verhindern.

Veröffentlichen und ID kopieren

Bevor ein Formular in Ihrem Shop angezeigt werden kann, muss es veröffentlicht werden.

  • Veröffentlichen: Klicken Sie oben rechts im Editor auf die Schaltfläche Veröffentlichen.
  • ID kopieren: Klicken Sie nach der Veröffentlichung in der oberen Leiste auf die Schaltfläche ID kopieren. Diese eindeutige ID benötigen Sie, um Shopify mitzuteilen, welches Formular angezeigt werden soll.

Formular zu Ihrem Theme hinzufügen

Sie können Ihr Formular mithilfe des Shopify-Theme-Editors auf jeder beliebigen Seite (Startseite, Kontakt, Produkt usw.) einfügen.

  • Theme-Editor öffnen: Gehen Sie in Ihrem Shopify-Adminbereich zu Online-Shop > Themes > Anpassen.
  • Abschnitt hinzufügen: Klicken Sie in der linken Seitenleiste auf Abschnitt hinzufügen.
  • Registerkarte Apps auswählen: Wechseln Sie von „Abschnitte“ zur Registerkarte Apps und wählen Sie Ck Forms aus.

Formular verbinden

Formular-ID einfügen: Klicken Sie auf den neu hinzugefügten Block Ck Forms. Fügen Sie in der rechten Einstellungsleiste die zuvor kopierte ID in das Feld Formular-ID ein (Screenshot 11).

Speichern: Klicken Sie oben rechts im Shopify-Editor auf Speichern.

Endergebnis

Ihr Formular wird nun live in Ihrem Shop angezeigt. Es übernimmt automatisch die Stile (Farben, Schriftarten und Layout), die Sie in den Einstellungen der App konfiguriert haben.