KI-Code-Generator für Shopify
Shopify Liquid Code Generator
Sag Klorr, was die Section können soll. Klorr schreibt das Liquid, gekapseltes CSS und JavaScript sowie ein Schema, das jeden Text, jede Farbe und jedes Bild zu einer Einstellung im Theme-Editor macht. Du fügst eine einzige Datei in dein Theme ein – keine App, keine monatliche App-Gebühr, kein Skript, das auf jeder Seite mitlädt.
“Eine Ankündigungsleiste mit Countdown bis zum Ende des Sales, einer kurzen Nachricht und einem Button. Farben und Enddatum wählt der Händler selbst.”
<div class="acd-{{ section.id }}" data-ends="{{ section.settings.ends_at }}">
<p class="acd__msg">{{ section.settings.message | escape }}</p>
<div class="acd__clock" aria-live="polite">
<span data-unit="d">00</span>d <span data-unit="h">00</span>h
<span data-unit="m">00</span>m <span data-unit="s">00</span>s
</div>
{% if section.settings.button_label != blank %}
<a class="acd__btn" href="{{ section.settings.button_link }}">
{{ section.settings.button_label | escape }}
</a>
{% endif %}
</div>
{% style %}
.acd-{{ section.id }} {
background: {{ section.settings.background }};
color: {{ section.settings.text_color }};
}
{% endstyle %}
{% schema %}
{
"name": "Countdown bar",
"tag": "section",
"settings": [
{ "type": "text", "id": "message", "label": "Message", "default": "Summer sale ends in" },
{ "type": "text", "id": "ends_at", "label": "Ends at (YYYY-MM-DD HH:MM)", "default": "2026-10-31 23:59" },
{ "type": "text", "id": "button_label", "label": "Button label", "default": "Shop the sale" },
{ "type": "url", "id": "button_link", "label": "Button link" },
{ "type": "color", "id": "background", "label": "Background", "default": "#1c1230" },
{ "type": "color", "id": "text_color", "label": "Text", "default": "#ffffff" }
],
"presets": [{ "name": "Countdown bar" }]
}
{% endschema %}Was der Generator schreibt
Liquid, das es wirklich gibt
Echte Objekte, Filter und Tags – section.settings, image_url, block.shopify_attributes – in der Section- und Block-Struktur, die Online Store 2.0 erwartet. Nichts Erfundenes, das der Theme-Editor beim Speichern ablehnt.
Ein vollständiges Schema
Jede Überschrift, Farbe, jedes Bild, jeder Link und Schalter wird zu einer Einstellung mit sinnvollem Standardwert – bearbeitet wird im Theme-Editor, nicht im Code. Blöcke, Limits und ein Preset inklusive.
Gekapseltes CSS und JavaScript
Styles tragen die eigene ID der Section als Präfix, damit sich zwei Kopien auf einer Seite nie miteinander oder mit deinem Theme in die Quere kommen. Skripte sind klein, reines JavaScript und laufen nur dort, wo die Section ist.
Code, der dir gehört
Es ist eine einzige .liquid-Datei im sections-Ordner deines Themes. Keine Laufzeit, kein Wasserzeichen, kein Lock-in: Kündigst du Klorr, funktioniert die Section genau wie vorher.
Vom Satz zur fertigen Section
Beschreiben
Schreib in deinen eigenen Worten, was die Section zeigen und tun soll. Füg deine Markenfarben und, falls vorhanden, einen Screenshot hinzu.
Verfeinern
Lies den Code, sieh dir die Vorschau an und wünsch dir Änderungen in normaler Sprache – „mach den Button auf dem Handy volle Breite“ –, bis alles passt.
Ins Theme einfügen
Kopier die Datei in den sections-Ordner deines Themes und füg sie dann im Theme-Editor wie jede andere Section hinzu.
Der Vergleich
Es gibt mehr als einen Weg, eine eigene Section in einen Shopify-Shop zu bekommen. Hier die ehrliche Übersicht.
| Klorr | Shopifys KI-Block-Generator | Page-Builder-Apps | Einen Entwickler beauftragen | |
|---|---|---|---|---|
| Was du bekommst | Eine vollständige Section mit eigenen Einstellungen und Blöcken | Einen einzelnen Theme-Block | Seiten, gebaut im Editor der App | Was du beauftragst und bezahlst |
| Funktioniert mit | Jedem Online Store 2.0 Theme | Themes, die für Theme-Blöcke gebaut sind, etwa Horizon | Shops, in denen die App installiert ist | Jedem Theme |
| Laufende Kosten | Dein Klorr-Plan, solange du baust – der Code läuft auch ohne weiter | In Shopify enthalten | Eine monatliche App-Gebühr, solange die Seiten live sind | Pro Änderung, pro Rechnung |
| Der Code | Lesbares Liquid in deinem Theme, deins zum Behalten und Bearbeiten | Im Theme-Editor generiert | Von der App gerendert | Deiner, sobald geliefert |
| Dauer | Sekunden, dann so viele Runden wie du willst | Sekunden | Stunden mit Drag & Drop | Tage bis Wochen |
Sections, die Händler generieren
Einige der Sections, nach denen Händler Klorr am häufigsten fragen. Jede verlinkt auf fertige Versionen im Klorr-Marktplatz, falls du lieber mit einer Vorlage startest.
Countdown-Timer-Section
Sale-Fristen, Launches und Versand-Deadlines.
FAQ-Akkordeon-Section
Fragen und Antworten, die sich direkt aufklappen.
Testimonial-Karussell
Bewertungen und Zitate mit Fotos und Sternen.
Produkt-Feature-Section
Vorteile, Specs und Vergleiche direkt am Produkt.
Hero-Banner-Section
Bild oder Video in voller Breite mit Headline und Buttons.
Lookbook-Galerie
Shoppable Bilder-Grids und Vorher-nachher-Slider.
Häufige Fragen
Was ist ein Shopify Liquid Code Generator?
Ein Tool, das Liquid – die Template-Sprache, aus der Shopify-Themes bestehen – aus einer Beschreibung schreibt. Klorr geht über Snippets hinaus: Es schreibt eine komplette Section-Datei mit Markup, CSS, JavaScript und Schema, fertig zum Einfügen in dein Theme.
Mit welchen Themes funktioniert der Code?
Mit jedem Online Store 2.0 Theme, darunter Dawn, Horizon und die Themes im Shopify Theme Store, die auf 2.0 basieren. In einem älteren (Vintage-)Theme lassen sich Sections im Theme-Editor nur zur Startseite hinzufügen.
Muss ich programmieren können?
Nein. Du beschreibst die Section und passt sie danach im Theme-Editor an. Wenn du selbst Code schreibst, ist das Ergebnis schlichtes, lesbares Liquid, das du wie alles andere in deinem Theme bearbeiten kannst.
Ist das eine Shopify-App?
Nein. In Klorr schreibst und verfeinerst du die Section; das Ergebnis ist eine Datei in deinem Theme. In deinem Shop wird nichts installiert, und beim Besuch eines Kunden läuft nichts über die Server von Klorr.
Funktioniert die Section weiter, wenn ich Klorr nicht mehr nutze?
Ja. Der Code liegt in deinem Theme, nicht bei uns. Es gibt keine Laufzeit, keine Lizenzprüfung und kein Wasserzeichen, das entfernt werden müsste.
Was ist der Unterschied dazu, Liquid mit ChatGPT zu schreiben?
Ein allgemeiner Chatbot erfindet oft Filter und Einstellungen, die Shopify ablehnt, und überlässt dir das Schema. Klorr ist darauf trainiert, wie echte Shopify-Sections gebaut werden, prüft das Ergebnis gegen die Schema-Regeln des Theme-Editors und hält jeden Inhalt als Einstellung bearbeitbar.