Shopify Themes anpassen mit Liquid, HTML & CSS – Der komplette Entwickler-Guide

Shopify Themes anpassen mit Liquid, HTML und CSS – Der vollständige Leitfaden

‍

Einführung

Die Flexibilität von Shopify basiert auf seinem leistungsstarken Theme-System. In diesem Artikel erfährst du, wie du mit Liquid, der Templating-Sprache von Shopify, kombiniert mit HTML und CSS, vollständig individuelle Designs umsetzt. Egal, ob du einen komplett neuen Store entwickelst oder ein bestehendes Theme verbessern möchtest – dieser Leitfaden zeigt dir Best Practices, praxisnahe Codebeispiele und bewährte Techniken für ein responsives, barrierefreies und SEO-optimiertes Design.

‍

Aufbau der Shopify Theme-Architektur

Shopify-Themes sind klar strukturiert und in verschiedene Dateitypen und Ordner gegliedert. Diese Struktur zu verstehen, ist der erste Schritt, um dein Theme gezielt anzupassen.

‍

Wichtige Komponenten

• Templates: Definieren die Struktur einzelner Seiten (z. B. product.liquid, collection.liquid, index.liquid).
• Sections: Wiederverwendbare Module (z. B. header.liquid, footer.liquid), die über den Theme Editor hinzugefügt oder entfernt werden können.
• Snippets: Kleine, wiederverwendbare Codeblöcke, die helfen, deinen Code sauber und wartbar zu halten.
• Assets: Statische Dateien wie CSS, JavaScript und Bilder, die für Stil und Funktionalität sorgen.

‍

Diese modulare Struktur erleichtert sowohl Wartung als auch Updates, da du Änderungen gezielt an einzelnen Komponenten vornehmen kannst.

‍

Liquid – das Herzstück der Shopify Themes

Liquid ist das Fundament jedes Shopify-Themes. Mit dieser Sprache kannst du dynamische Inhalte einfügen, Daten anzeigen und Layouts flexibel steuern.

‍

Grundlegende Liquid-Syntax

Ausgabe von Variablen:

liquid:

<h1>{{ product.title }}</h1>

‍

Bedingungen und Schleifen:

liquid:

{% if product.available %}
  <p>Auf Lager</p>
{% else %}
  <p>Ausverkauft</p>
{% endif %}

‍

Filter:

liquid:

<p>Veröffentlicht am: {{ product.created_at | date: "%d.%m.%Y" }}</p>

Filter wie | upcase oder | date helfen dir, die Ausgabe dynamisch zu formatieren.

‍

Erweiterte Liquid-Techniken

Verschachtelte Logik: Nutze kombinierte Bedingungen und Schleifen, um komplexe Layouts umzusetzen.

Settings und Metafields: Binde dynamische Inhalte direkt aus dem Theme Editor oder aus Produkt-Metafields ein.

‍

liquid:

{% if product.metafields.custom.featured %}
  <div class="featured-label">Highlight</div>
{% endif %}

Shopify-Abschnitte können außerdem über JSON-Schemas im Theme Editor konfigurierbar gemacht werden. Damit lassen sich Texte, Links oder Bilder direkt im Editor anpassen, ohne in den Code eingreifen zu müssen.

‍

Themes mit HTML und CSS anpassen

Während HTML die Struktur liefert, sorgt CSS für Design und Responsivität. Eine saubere, semantische HTML-Struktur ist entscheidend für Barrierefreiheit, Lesbarkeit und SEO.

‍

Beispiel: Eigener Banner auf der Produktseite

Erstelle eine neue Datei unter sections/custom-banner.liquid:

liquid:

<div class="custom-banner">
  <h2>{{ section.settings.banner_heading }}</h2>
  <p>{{ section.settings.banner_text }}</p>
</div>

<style>
  .custom-banner {
    background-color: #f9f9f9;
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #ddd;
  }
  .custom-banner h2 {
    font-size: 2rem;
    margin: 0;
  }
  .custom-banner p {
    font-size: 1rem;
    color: #666;
  }
</style>

‍

Binde die Sektion anschließend in deine Produktseite ein:

liquid:

{% section 'custom-banner' %}

‍

Responsives Design

Media Queries:

css:

@media (max-width: 768px) {
  .custom-banner h2 {
    font-size: 1.5rem;
  }
}

Flexible Layouts: Verwende CSS Flexbox oder Grid, um Designs zu erstellen, die sich automatisch an verschiedene Bildschirmgrößen anpassen.

‍

Best Practices und Performance

Struktur und Wiederverwendbarkeit

• Modularer Aufbau: Verwende Sections und Snippets, um redundanten Code zu vermeiden.
• Kommentierung: Dokumentiere deinen Code, um ihn langfristig wartbar zu halten.

‍

Performance-Optimierung

• Minifizierung: Komprimiere CSS- und JavaScript-Dateien, um Ladezeiten zu verkürzen.
• Critical CSS: Lade wichtige Styles direkt im <head>, um das Rendern zu beschleunigen.
• Lazy Loading: Lade Bilder oder Skripte erst, wenn sie wirklich benötigt werden.

‍

Debugging

• Browser Developer Tools: Untersuche Layouts und Netzwerkaktivitäten direkt im Browser.
• Shopify Theme Inspector: Nutze das integrierte Debugging-Tool, um Liquid-Fehler zu finden und zu beheben.

‍

Praxisbeispiel: Individuelle Produktseite erstellen

Schritt 1: Custom Product Section

Erstelle in sections/custom-product.liquid folgende Struktur:

liquid:

<div class="product-container">
  <div class="product-image">
    <img src="{{ product.featured_image | img_url: '800x' }}" alt="{{ product.title }}">
  </div>
  <div class="product-details">
    <h1>{{ product.title }}</h1>
    <p>{{ product.description }}</p>
    {% if product.available %}
      <button class="btn-buy">Jetzt kaufen</button>
    {% else %}
      <span class="sold-out">Ausverkauft</span>
    {% endif %}
  </div>
</div>

<style>
  .product-container {
    display: flex;
    flex-wrap: wrap;
    margin: 20px 0;
  }
  .product-image {
    flex: 1 1 40%;
    padding: 10px;
  }
  .product-details {
    flex: 1 1 60%;
    padding: 10px;
  }
  .btn-buy {
    background-color: #ff4500;
    color: #fff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
  }
  .sold-out {
    color: #a00;
    font-weight: bold;
  }
</style>

‍

Binde den Abschnitt in dein Template ein:

liquid:

{% section 'custom-product' %}

‍

Schritt 2: Dynamische Daten einbinden

Ergänze Metafields, um Inhalte wie Sonderangebote oder zusätzliche Texte dynamisch anzuzeigen:

liquid:

{% if product.metafields.custom.special_offer %}
  <div class="special-offer">
    {{ product.metafields.custom.special_offer }}
  </div>
{% endif %}

‍