Einführung in Liquify – So baust du Shopify Themes mit Webflow

In diesem Video zeigt Marvin Blach sein Tool Liquify, das auf Webflow aufsetzt und maßgeschneiderte Shopify‑Themes ermöglicht. Kein Tutorial zur kompletten Theme-Erstellung, sondern ein Überblick über Funktionen wie strukturiertes Tagging, Shopify Block‑Elemente, dynamische Inhalte und den Section Converter. Du bekommst ein Gefühl dafür, wie Liquify mit Webflow und Shopify zusammenarbeitet und wie du dynamisch anpassbare Themes erzeugst. Viel Spaß!

Hier gehts zu Liquify: https://www.liquify.pro

Einführung

Liquify ist ein Tool, das Webflow-Projekte in vollständig editierbare Shopify-Themes umwandelt. In diesem Beitrag erfährst du, wie du mithilfe von Custom Attributes in Webflow arbeitest, die Liquify automatisch in Shopify-kompatiblen Liquid-Code übersetzt. Damit gestaltest du Themes, die visuell anspruchsvoll sind und im Shopify-Editor flexibel angepasst werden können – ganz ohne manuelles Programmieren.

Webflow als Blueprint: Arbeiten mit Custom Attributes

Liquify nutzt Webflow’s Custom Attributes als Grundlage. Du weist HTML-Elementen gezielt Attribute wie li-object, li-settings, li-for oder li-if zu. Diese definieren, welche Daten Shopify später anzeigen und ob die Inhalte dynamisch oder im Editor bearbeitbar sind.

Beispiel:

• li-object="product.title" wird zu {{ product.title }} in Shopify.
• li-settings:text="Headline" erzeugt ein bearbeitbares Feld im Theme Editor mit dem Namen "Headline".

Dabei arbeitest du in Webflow mit Platzhaltern – die Inhalte pflegt später der Kunde direkt in Shopify ein. So behältst du eine saubere Struktur und ein leichtgewichtiges Theme.

Sektionen & Block-Elemente

Alle Elemente müssen in li-section-Containern liegen. So erkennt Liquify, wie das Theme für Shopify 2.0 aufgebaut werden soll. Innerhalb einer Section kannst du Block-Elemente (li-block) definieren, die Kunden im Editor flexibel hinzufügen und anordnen können. Das ist ideal für wiederholbare Inhalte wie z. B. USPs, Feature-Listen oder Sliders.

Zusätzlich gibt es li-content-for-blocks oder li-content-for-theme-blocks, mit denen du mehrere Blöcke innerhalb einer Section organisierst – sogar verschachtelt bis zu 8 Ebenen tief.

Alpine.js & interaktive Funktionen

Du kannst direkt in Webflow interaktive Logiken anlegen – etwa eine Fortschrittsanzeige für kostenlosen Versand. Mithilfe von Alpine.js und Attributen wie x-data und x-show definierst du diese Funktionalität visuell. Die konkreten Werte wie Schwellenbeträge definierst du dann im Shopify-Backend.

Der Section Converter & GitHub Workflow

Liquify bietet einen Section Converter, mit dem du Webflow-Sections als vollständige Liquid-Dateien mit HTML, Liquid und Schema exportierst. Diese kannst du sogar in bestehende Shopify-Themes einfügen – du musst nicht das Starter Theme verwenden.

Über GitHub kannst du Projekte versionieren und Deployments verwalten. Änderungen am Styling oder der Struktur werden sauber übernommen, während Inhalte im Shopify CMS erhalten bleiben.

Liquid Tags, Conditions & Filter

Liquify unterstützt alle wichtigen Liquid-Tags über eigene Attribute in Webflow:

• li-for="product in collection.products" erzeugt Loops
• li-if="product.available" oder li-unless="product.available" für Bedingungen
• li-object="product.price | money" für Filter wie money, date, img_url

Du kannst auch li-tag für eigene Liquid-Befehle oder li-attribute nutzen, um z. B. Klassen mit Bedingungen zu versehen.

Fazit: Visuell designen, sauberer Code, zufriedene Kunden

Mit Liquify gestaltest du visuell in Webflow und definierst per Attribut, was später in Shopify editierbar oder dynamisch sein soll. Du brauchst kein Liquid von Hand zu schreiben – und doch erhältst du sauberen, strukturierten Code. Ideal für performante, individuell anpassbare Shopify-Themes.

→ Wenn du Webflow liebst und Shopify effizienter nutzen willst, ist Liquify die perfekte Brücke zwischen Design und Code.