Shopify & Liquid: Was ich nicht wusste, bevor ich anfing

Der erste Kontakt mit Liquid

Ich gebe es zu: Ich bin mit der Erwartung rangegangen, dass Liquid einfach eine andere Template-Syntax ist. So wie man von React auf Vue wechselt und denkt — halb so wild, ich kenn das Konzept.

Das war falsch.

Liquid in Shopify ist kein Template-System im klassischen Sinne — es ist ein CMS-Framework. Das schema-Tag in einer Section ist der Moment, wo es klick gemacht hat: Ich schreibe kein HTML das Daten rendert. Ich baue eine Komponente mit einer definierten API, die der Händler im Admin-Bereich per Drag & Drop konfiguriert, ohne eine Zeile Code anzufassen.

{% schema %}
{
  "name": "Hero Banner",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "Hintergrundbild"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Überschrift",
      "default": "Willkommen bei Amana"
    }
  ]
}
{% endschema %}

Was ich dachte: "type": "text" — okay, ein Textfeld."

Was es tatsächlich ist: Der Händler geht in den Shopify Admin, zieht diese Section auf seine Seite, tippt seinen Titel rein, wählt ein Bild aus — fertig. Kein Deployment, kein PR, kein Entwickler. Das war der Moment wo ich verstanden habe, warum Shopify so dominant ist.

Die Ausgangslage: Mobile Nutzer, katastrophaler PageSpeed

Der Kunde hatte ein klares Problem: Sein altes Theme war ein Desaster auf Mobile. Die Mehrheit seiner Kunden kauft vom Handy — aber die Shop-Experience war langsam, unübersichtlich und fühlte sich nicht wie ein moderner Shop an.

Konkrete Ziele:

• Mobile-First — alles andere kommt danach
• PageSpeed verbessern — der alte Score war nicht vorzeigbar
• Intuitive Navigation — besonders auf kleinen Screens

Das Dawn-Theme von Shopify ist ein solides Fundament. Aber "solide" heißt nicht "optimal". Das Theme kam mit zu vielen ungenutzten Ressourcen, einer Desktop-zuerst-Denkweise und keinen der Features, die der Kunde brauchte.

Mobile-First: Navigation wie eine App

Der entscheidende UX-Entscheid: Die mobile Navigation sollte sich anfühlen wie eine App, nicht wie eine abgespeckte Desktop-Seite.

Die Lösung war eine Bottom Navigation Bar — so wie man sie von jeder modernen App kennt. Wichtige Kategorien sind mit Bild-Previews verknüpft. Der Nutzer scrollt nicht durch eine Hamburger-Menü-Wand, er tippt auf ein visuelles Element und landet direkt in der richtigen Kategorie.

Das Feedback vom Kunden: "Meine Kunden fragen nicht mehr wo sie was finden."

Geplant ist außerdem eine echte Mobile App — die Bottom-Navigation-Logik ist so aufgebaut, dass sie direkt als Blaupause dafür dienen kann.

Das fehlende Feature: Favoriten

Das Dawn-Theme kommt ohne Wunschliste. Das ist ein echtes UX-Problem — nicht jeder Kauf passiert impulsiv. Viele Nutzer wollen Produkte speichern, um sie später in Ruhe zu kaufen.

Ich habe eine vollständige Favoriten-Seite gebaut:

• Artikel per Herz-Icon zur Wunschliste hinzufügen
• Favoriten via localStorage persistent gespeichert — keine Anmeldung notwendig
• Eigene /pages/wishlist-Seite mit allen gespeicherten Artikeln
• Synchronisation über Tabs hinweg via storage-Event

function toggleFavorite(productId) {
  const favorites = getFavorites();
  const index = favorites.indexOf(productId);

  if (index === -1) {
    favorites.push(productId);
  } else {
    favorites.splice(index, 1);
  }

  localStorage.setItem("amana_favorites", JSON.stringify(favorites));
  updateFavoriteIcons(productId);
}

Der Unterschied zum simplen "In den Warenkorb": Der Warenkorb ist für "Ich kaufe das jetzt". Die Favoriten sind für "Ich kaufe das irgendwann". Beide Absichten brauchen eine eigene UX.

Der Sticky Add-to-Cart Button

Dieses Feature war eine der interessantesten technischen Umsetzungen. Das Szenario:

1. Kunde öffnet einen Artikel
2. Scrollt nach unten, liest die Beschreibung, schaut sich Bilder an
3. Der originale "In den Warenkorb"-Button ist längst aus dem Viewport verschwunden

Die Lösung: Ein Sticky Banner der von unten hochfährt, sobald der Hauptbutton nicht mehr sichtbar ist. Darin: Produktbild, Produktname, Preis — und der Warenkorb-Button. Der Nutzer muss nicht zurückscrollen.

const observer = new IntersectionObserver(
  ([entry]) => {
    stickyBar.classList.toggle("is-visible", !entry.isIntersecting);
  },
  { threshold: 0 },
);

observer.observe(mainAddToCartBtn);

Einfache Idee, spürbarer Unterschied in der Conversion-UX. Der Browser macht die Arbeit — kein Scroll-Event-Listener, kein Performance-Problem.

Trust Badges: Vertrauen ist kein Nice-to-have

Ein Online-Shop lebt von Vertrauen — besonders wenn die Marke noch jung ist. Ich habe Trust Badges als eigene Shopify-Section gebaut:

• Konfigurierbar über den Admin (Icons, Texte, Reihenfolge)
• Platzierbar auf Product Pages, der Homepage und dem Cart
• Responsive: auf Mobile als Scroll-Carousel, auf Desktop als Grid

Typische Inhalte: Sichere Zahlung, kostenloser Versand ab X€, 30-Tage Rückgabe, deutschen Kundenservice. Nichts Revolutionäres — aber es macht einen Unterschied, wenn es sauber in die Seite integriert ist statt als generisches Badge-Widget von einer fremden App.

Performance: Vom Desaster zum akzeptablen Score

Der alte Shop hatte schlechte PageSpeed-Werte. Die größten Hebel:

1. Bilder. Dawn lädt standardmäßig zu große Bilder. Ich habe alle Produktbilder auf WebP umgestellt und Shopifys natives image_url-Filter mit Größenangaben genutzt:

{{ product.featured_image | image_url: width: 800 | image_tag: loading: 'lazy' }}

2. Kritische CSS-Pfad optimiert. Above-the-fold Styles inline, Rest asynchron.

3. Third-Party Scripts. Jede eingebundene App adds JavaScript. Ich habe alle nicht genutzten Apps deaktiviert und Script-Ladestrategien auf defer gesetzt wo möglich.

4. Font-Loading. font-display: swap verhindert unsichtbaren Text beim ersten Render.

SEO, Barrierefreiheit und Best Practices

Das sind keine Extras — das ist Grundlage:

• Alle Bilder mit aussagekräftigen alt-Attributen (inklusive dynamische Produktbilder via Liquid)
• Semantisches HTML: <nav>, <main>, <article>, korrekte Heading-Hierarchie
• Kontrastverhältnisse geprüft und angepasst
• aria-label auf allen Icon-Buttons
• Strukturierte Daten (JSON-LD) für Produkte — Google versteht den Shop besser
• Canonical Tags korrekt gesetzt, um Duplicate-Content durch Shopify-Varianten zu vermeiden

Was ich mitgenommen habe

Liquid ist kein Template-System — es ist ein CMS-Baukasten. Sections, Blocks und das Schema-System sind mächtig wenn man versteht wie sie zusammenhängen.

Mobile-First ist kein Buzzword. Wenn 70% der Nutzer mobil sind, ist Desktop die Edge-Case. Jede Designentscheidung muss auf einem 375px breiten Screen funktionieren — der Rest kommt danach.

Performance ist UX. Jede Sekunde Ladezeit kostet Conversion. Bilder, Scripts, Fonts — alles hat einen Preis, und der wird vom Nutzer bezahlt.

Den Shop live anschauen: werbeninja.de