In diesem Beitrag möchte ich einmal nützliche Anwendungsmöglichkeiten von Shopify Sidekick vorstellen. Dabei handelt es sich um die eigene KI-Lösung von Shopify. Konkret soll es um die Coding-Funktion für neue Shopify Abschnitte, auch Sections genannt, gehen. Dabei stelle ich dir auch zwei konkrete Prompts für Sidekick zur Verfügung, die du direkt in deinem Theme bei Sidekick eingeben kannst. Den Rest übernimmt Sidekick dann für dich und du kannst den neuen Abschnitt direkt in deinem Shop verwenden.
„Mit Shopify Sidekick kannst du gezielt SEO-Schwächen von Themes ausgleichen, ohne direkt in den Theme-Code deines Shops eingreifen zu müssen.“
Das Problem: Warum Standard-Themes selten SEO-konform sind
Im Rahmen meiner Tätigkeit bei Buzz Digital, habe ich bereits eine Vielzahl von unterschiedlichen Shopify Themes kennengelernt, inklusive ihrer Stärken und Schwächen. Mittlerweile erkenne ich direkt, ob ein Theme-Entwickler die Anforderungen hinsichtlich SEO bedacht hat oder nicht.
Ein ganz häufiges Problem ist die Überschriftenstruktur. Sehr viele Themes erlauben einfach nicht, die Überschriften je Section einzustellen. Dies führt dazu, dass oftmals H1-Überschriften entweder komplett fehlen oder sogar mehrfach vorhanden sind. Manchmal ist standardmäßig auch einfach das Shop-Logo die H1. Das macht natürlich keinerlei Sinn. Genauso ist es bei H2-Überschriften, die oft einfach nicht an Textelementen eingestellt werden können. Dies führt letztlich zu einer sehr schwachen oder komplett fehlerhaften Seitenstruktur, die von Google nicht vernünftig ausgelesen werden kann.
Des Weiteren werden einzelne Elemente oftmals auf mobilen Endgeräten nicht ideal dargestellt. Die meisten Themes sind schon responsive für alle Bildschirmgrößen, das ist definitiv eine Stärke von Shopify. Aber auch hier steckt der Teufel im Detail. Wenn man eine Icon-Leiste auf seinem Smartphone komplett von oben nach unten scrollen muss, ist das alles andere als ideal. Auch hier kann man Sidekick nutzen, um Shopify-Sections mit deutlich größerem Funktionsumfang zu erhalten.
Bevor du weiterliest
Du möchtest deine eigene Sichtbarkeit überprüfen?
In einem kostenlosen Erstgespräch schauen wir gemeinsam in deine Daten und ich zeige dir, wo aktuell das größte Potenzial für deine Website liegt.
Die Lösung: Eigene Shopify Sidekick Sections statt Theme-Standard
So kannst du deine eigene Section im Theme mit Sidekick generieren:
- Erstelle zunächst unbedingt ein Backup von deinem Live-Theme
Klicke auf Online-Shop -> die 3 Punkte neben Theme bearbeiten -> Duplizieren
2. Benenne das Backup-Theme entsprechend
Beispiel: Backup (heutiges Datum) – weitere Kurzinfo
3. Nun arbeitest du direkt im Backup-Theme indem du beim Backup auf „Theme bearbeiten“ klickst
4. Im Theme-Editor klickst du an die Stelle, wo die neue Section eingefügt werden soll, dort kommt dann rechts der Generieren-Button von Sidekick
5. Hier fügst du dann deinen Prompt (Beispiele weiter unten) ein.
6. Nun generiert dir Sidekick deinen Section-Code gemäß deiner Vorgaben!
7. Sobald alles funktioniert, veröffentlichst du das Backup- als Live-Theme!
Wichtiger Hinweis: Niemals im Live-Theme arbeiten, um die Shop-Stabilität nicht zu gefährden!
Kostenlose Sidekick-Prompts zum Copy-Pasten
Um dir den Einstieg mit Sidekick zu erleichtern, teile ich gerne zwei Prompts von mir. Du kannst diese gerne kopieren und auch weiter für deine Anforderungen anpassen. Die Grundprinzipien der Prompts lassen sich nämlich wunderbar für neue Prompts weiter verwenden.
Haftungsausschluss
Haftungsausschluss & Nutzungshinweis Die in diesem Beitrag bereitgestellten Prompts dienen ausschließlich der Information und Inspiration. Der von Shopify Sidekick daraus generierte Code (Liquid, HTML, CSS, JavaScript) wurde nicht für jedes individuelle Theme oder jede Shop-Konfiguration auf Fehlerfreiheit, Sicherheit oder Kompatibilität geprüft. Wichtig: Die Nutzung der Prompts sowie des erzeugten Codes erfolgt auf eigene Verantwortung. Prüfe generierten Code vor dem Einsatz im Live-Shop unbedingt zuerst in einer Theme-Kopie oder Testumgebung! Für Schäden jeglicher Art, die durch die Verwendung der Prompts oder der Ergebnisse entstehen – einschließlich Darstellungsfehler, Funktionsstörungen, SEO-Nachteile, Datenverlust oder entgangenen Gewinn – wird keine Haftung übernommen (ausgenommen Schäden aus der Verletzung des Lebens, des Körpers oder der Gesundheit sowie bei Vorsatz oder grober Fahrlässigkeit). Da sich Shopify, Themes und KI-Modelle wie Sidekick fortlaufend weiterentwickeln, kann keine Garantie gegeben werden, dass die Ergebnisse dauerhaft funktionsfähig bleiben oder aktuellen SEO-Richtlinien entsprechen.
- Prompt 1: Bild + Text Element erstellen
Durch diesen Prompt erhältst du eine Bild + Text-Element, an dem du direkt die Überschriften-Struktur einstellen kannst. Zudem kannst du auch die Elemente tauschen. Das macht vor allem dann Sinn, wenn du auf deiner Artikeldetailseite oder Collection-Seite zwei dieser Elemente untereinander platzieren möchtest. Das ist deutlich ansehnlicher für das menschliche Auge, als nur alle Elemente mit gleicher Ausrichtung zu stapeln. Die Elemente können zudem mit dynamischen Quellen (Shopify-Metafelder) verbunden werden.
Prompt zur Bild + Text-Section anzeigen
Erstelle eine vollständig responsive Shopify-Section „Bild mit Text“.
* Desktop: Bild, Heading und Richtext nebeneinander angeordnet
* Mobile: Bild und Textbereich untereinander
* Einstellung zum Tauschen der Reihenfolge:
* Bild links / Text rechts
* Text links / Bild rechts
* Separates Heading-Feld
* Heading-Typ im Theme-Editor von H1 bis H6 auswählbar
* Zusätzlich ein separates Richtext-Feld
* Optionaler Button unter dem Richtext mit Text, Link und Stil-Einstellungen
* Bild, Heading, Richtext, Button-Text und Button-Link müssen dynamische Quellen unterstützen
* Separate einstellbare Breiten für Desktop und Mobile
* Gesamte Section muss immer horizontal zentriert sein
* Einstellbare Abstände, Farben, Bildradius und Textausrichtung
* Keine externen Bibliotheken
* Vollständiger Liquid-Code inklusive CSS und `{% schema %}`
* Alle Einstellungen im Theme-Editor auf Deutsch
* Kompatibel mit Shopify Online Store 2.0
- Prompt 2: SEO-konformes FAQ als Akkordeon-Element
Dieser Prompt führt zu einem seo-konformen FAQ mit einstellbarer Überschriften-Struktur. Auch dieses Element kannst du wunderbar für die Shop-Startseite, die Artikeldetailseite oder deine Collections nutzen. Die Elemente können ebenfalls mit dynamischen Quellen (Shopify-Metafelder) verbunden werden.
Prompt zur FAQ-Section anzeigen
Erstelle für mein Shopify-Theme eine vollständig responsive FAQ-Sektion als neuen Theme-Abschnitt.
## Grundaufbau
Die FAQ-Sektion soll aus folgenden Elementen bestehen:
1. Einer zentralen FAQ-Überschrift
2. Genau 6 fest angelegten FAQ-Einträgen
3. Jeder FAQ-Eintrag besteht aus:
* einer Frage als klickbarem Accordion-Button
* einer aufklappbaren Antwort
Die Anzahl der FAQ-Einträge soll fest auf 6 begrenzt sein. Es sollen weder weitere Einträge hinzugefügt noch bestehende Einträge entfernt werden können.
## Responsive Darstellung
Die gesamte FAQ-Sektion muss zu 100 % responsiv sein und auf Desktop, Tablet und Mobilgeräten korrekt dargestellt werden.
Die FAQ-Sektion muss immer horizontal zentriert sein.
Erstelle im Theme-Editor separate Einstellungen für:
* maximale Breite auf Desktop in Pixeln oder Prozent
* maximale Breite auf Mobilgeräten in Pixeln oder Prozent
* horizontalen Innenabstand auf Desktop
* horizontalen Innenabstand auf Mobilgeräten
* oberen Abstand der Sektion
* unteren Abstand der Sektion
* Abstand zwischen Überschrift und FAQ-Einträgen
* Abstand zwischen den einzelnen FAQ-Einträgen
Die Desktop- und Mobile-Breiten müssen unabhängig voneinander einstellbar sein.
Die eingestellte Breite darf auf kleinen Bildschirmen niemals zu horizontalem Scrollen führen. Verwende dafür eine sichere Kombination aus `width`, `max-width`, `margin-inline: auto` und responsivem Padding.
## FAQ-Überschrift
Für die zentrale FAQ-Überschrift sollen im Theme-Editor folgende Einstellungen verfügbar sein:
* Text der Überschrift
* HTML-Überschriftenebene auswählbar von H1 bis H6
* Textausrichtung: links, mittig oder rechts
* Schriftgröße auf Desktop
* Schriftgröße auf Mobilgeräten
* Schriftstärke
* Textfarbe
* Abstand unterhalb der Überschrift
Die FAQ-Überschrift muss mit einer dynamischen Quelle beziehungsweise einer Shopify-Metafield-Quelle verknüpft werden können.
## Fragen
Jede der 6 Fragen soll als klickbarer Accordion-Button dargestellt werden.
Für jede Frage sollen folgende Einstellungen verfügbar sein:
* Fragetext
* HTML-Überschriftenebene auswählbar von H1 bis H6
* Schriftgröße auf Desktop
* Schriftgröße auf Mobilgeräten
* Schriftstärke
* Textfarbe
* Hintergrundfarbe
* Innenabstand
* Rahmenfarbe
* Rahmenbreite
* Rahmenradius
Jeder Fragetext muss mit einer dynamischen Quelle beziehungsweise einem Shopify-Metafield verknüpft werden können.
Die HTML-Struktur soll semantisch korrekt sein. Der eigentliche Accordion-Button soll innerhalb der ausgewählten Überschriftenebene liegen.
## Antworten
Für jede der 6 Antworten sollen folgende Einstellungen verfügbar sein:
* Antwort als Richtext
* Schriftgröße auf Desktop
* Schriftgröße auf Mobilgeräten
* Textfarbe
* Hintergrundfarbe
* Innenabstand
* Zeilenhöhe
Jede Antwort muss mit einer dynamischen Quelle beziehungsweise einem Shopify-Metafield verknüpft werden können.
Richtext-Inhalte wie Absätze, Links, Fettungen und Listen müssen korrekt ausgegeben werden.
## Accordion-Funktion
Das FAQ soll als barrierearmes Accordion funktionieren.
Anforderungen:
* Klick auf eine Frage öffnet oder schließt die zugehörige Antwort.
* Die gesamte Breite der Frage muss klickbar sein.
* Jede Frage benötigt ein Plus- oder Pfeil-Icon.
* Das Icon soll sich beim Öffnen sichtbar verändern oder drehen.
* Im Theme-Editor soll einstellbar sein, ob mehrere Antworten gleichzeitig geöffnet sein dürfen.
* Im Theme-Editor soll einstellbar sein, ob der erste FAQ-Eintrag standardmäßig geöffnet ist.
* Verwende korrekte `aria-expanded`-, `aria-controls`- und `id`-Attribute.
* Das Accordion muss vollständig per Tastatur bedienbar sein.
* Die Funktion darf keine externen JavaScript-Bibliotheken benötigen.
* JavaScript und CSS müssen so umgesetzt werden, dass mehrere Instanzen der FAQ-Sektion auf derselben Seite unabhängig voneinander funktionieren.
## Design-Einstellungen
Erstelle zusätzlich globale Einstellungen für:
* Hintergrundfarbe der gesamten FAQ-Sektion
* Farbe der FAQ-Karten
* Rahmenfarbe
* Rahmenbreite
* Rahmenradius
* Schatten
* Icon-Farbe
* Icon-Größe
* Dauer der Öffnungsanimation
* Abstand zwischen Frage und Antwort
Alle Einstellungen müssen direkt über den Shopify-Theme-Editor steuerbar sein.
## Dynamische Quellen
Alle inhaltlichen Felder müssen mit dynamischen Shopify-Quellen verknüpft werden können:
* Hauptüberschrift
* alle 6 Fragen
* alle 6 Antworten
Verwende dafür geeignete Shopify-Schema-Feldtypen wie `text`, `inline_richtext` oder `richtext`, die dynamische Quellen unterstützen.
Die FAQ soll dadurch beispielsweise mit Produkt-Metafeldern, Seiten-Metafeldern oder Metaobjekten befüllt werden können.
## Technische Anforderungen
* Erstelle eine vollständige Shopify-Section-Datei in Liquid.
* Integriere HTML, Liquid, CSS, JavaScript und das vollständige `{% schema %}`.
* Verwende keine externen Bibliotheken.
* Verwende eindeutige Klassen und IDs auf Basis von `section.id`.
* Vermeide globale CSS-Selektoren, die andere Theme-Elemente beeinflussen könnten.
* Achte auf sauberen, wartbaren und performanten Code.
* Verhindere Layout-Verschiebungen beim Öffnen und Schließen möglichst gut.
* Die Sektion muss mit aktuellen Shopify-Online-Store-2.0-Themes kompatibel sein.
* Die Sektion muss im Theme-Editor vollständig funktionieren.
* Alle sichtbaren Texte und Einstellungsbezeichnungen im Schema sollen auf Deutsch sein.
Fazit zu neuen Sections mit Shopify Sidekick
Ich hoffe, dass ich dir mit diesem Beitrag neue Inspiration für deinen Shop geben konnte. Wie du gesehen hast, ist Sidekick mittlerweile ein ziemlich nützliches Tool, was den Alltag für Shop-Betreiber merklich vereinfachen kann. Sidekick kann natürlich noch viel mehr, als Custom-Sections für deinen Shop zu coden. Darauf werde ich in künftigen Beiträgen noch mehr eingehen.
Dank Sidekick kannst du deine Themes mittlerweile selber anpassen, ohne direkt in den Theme-Code eingreifen zu müssen. Gerade wenn du grundsätzlich mit deinem Theme zufrieden bist, kannst du Sidekick gezielt dafür nutzen, um vorhandene Schwächen hinsichtlich SEO zu kompensieren. Früher hättest du dafür vermutlich einen Entwickler engagieren müssen oder einen kompletten Theme-Wechsel vornehmen müssen. Mit Sidekick sind diese Anpassungen nun innerhalb von Minuten bis wenigen Stunden möglich.
Wenn du Unterstützung für deinen eigenen Shopify-Shop benötigst, kannst du dir gerne ein kostenloses Erstgespräch bei mir buchen. Wir bei Buzz Digital helfen dir dann gerne direkt weiter, von SEO-Maßnahmen bis Google Ads Check für deinen Shopify-Shop.
