Shopify ist eine fantastische Plattform für E-Commerce-Unternehmen, die schnell und unkompliziert einen Online-Shop erstellen möchten. Mit einer Vielzahl von Themes bietet Shopify bereits eine solide Grundlage, aber oft möchte man seinen Shop noch individueller gestalten. Hier kommen Custom Sections ins Spiel! In diesem Guide zeigen wir dir, wie du eine solche Custom Section erstellst, die perfekt auf deine Bedürfnisse zugeschnitten ist.
Warum überhaupt eine Custom Section?
Shopify-Themes kommen mit einer Reihe von vorgefertigten Abschnitten, wie z.B. Hero-Images, Produktlistings und Testimonials. Diese sind zwar praktisch, bieten aber nicht immer die Flexibilität, die du für deine Marke brauchst. Custom Sections ermöglichen es dir:
- Einzigartigkeit: Hebe dich von der Konkurrenz ab mit einem Design, das deine Markenidentität widerspiegelt.
- Flexibilität: Erstelle Abschnitte, die genau die Inhalte und Funktionen enthalten, die du benötigst.
- Optimierung: Gestalte Abschnitte, die speziell auf deine Conversion-Ziele ausgerichtet sind.
Die Grundlagen: Liquid, JSON und das Shopify Theme
Bevor wir loslegen, ist es wichtig, die Grundbausteine zu verstehen:
- Liquid: Shopifys eigene Template-Sprache. Sie ermöglicht es dir, dynamische Inhalte in dein Theme einzufügen.
- JSON (JavaScript Object Notation): Ein Datenformat, das verwendet wird, um die Einstellungen deiner Custom Section zu definieren.
- Shopify Theme Editor: Der Bereich im Shopify-Adminbereich, in dem du deine Abschnitte konfigurieren und anpassen kannst.
Schritt-für-Schritt-Anleitung: Erstelle deine eigene Custom Section
Folge diesen Schritten, um deine erste Custom Section zu erstellen:
1. Die Vorbereitung: Theme-Duplikat erstellen
Bevor du Änderungen an deinem Live-Theme vornimmst, erstelle immer eine Kopie. So kannst du experimentieren, ohne das Risiko einzugehen, deinen Shop zu beschädigen. Gehe zu „Online Store” -> „Themes” und klicke auf die drei Punkte neben deinem aktuellen Theme. Wähle „Duplicate”.
2. Die Section-Datei erstellen
Navigiere im Shopify-Adminbereich zu „Online Store” -> „Themes” und klicke auf „Edit code” (beim duplizierten Theme). Suche im linken Menü unter „Sections” und klicke auf „Add a new section”. Nenne deine Section beispielsweise „my-custom-section”. Shopify erstellt automatisch zwei Dateien:
- my-custom-section.liquid: Hier kommt der HTML-Code und Liquid-Code für deine Section rein.
- my-custom-section.schema.json: Hier definierst du die Einstellungen, die im Theme Editor angezeigt werden.
3. Den Liquid-Code schreiben
Öffne die Datei `my-custom-section.liquid` und füge den HTML-Code für deine Section ein. Hier ein einfaches Beispiel:
„`html
{{ section.settings.title }}
{{ section.settings.content }}
„`
Hier verwenden wir Liquid, um die Werte für den Titel und den Inhalt aus den Section-Einstellungen abzurufen. `section.settings.title` und `section.settings.content` sind Platzhalter, die wir später in der `my-custom-section.schema.json` definieren werden.
4. Das Schema-JSON definieren
Öffne die Datei `my-custom-section.schema.json` und definiere die Einstellungen, die im Theme Editor angezeigt werden sollen:
„`json
{
„name”: „My Custom Section”,
„settings”: [
{
„id”: „title”,
„type”: „text”,
„label”: „Title”,
„default”: „My Awesome Title”
},
{
„id”: „content”,
„type”: „richtext”,
„label”: „Content”,
„default”: „
This is some awesome content.
”
}
],
„presets”: [
{
„name”: „My Custom Section”,
„category”: „Custom”
}
]
}
„`
Erklärung:
- name: Der Name der Section, der im Theme Editor angezeigt wird.
- settings: Ein Array von Objekten, die die einzelnen Einstellungen definieren.
- id: Eine eindeutige ID für die Einstellung. Diese ID verwenden wir im Liquid-Code.
- type: Der Typ der Einstellung (z.B. text, richtext, image, color).
- label: Die Beschriftung, die im Theme Editor angezeigt wird.
- default: Der Standardwert der Einstellung.
- presets: Definiert, wie die Section standardmäßig konfiguriert ist, wenn sie hinzugefügt wird.
5. Die Custom Section im Theme Editor hinzufügen
Gehe zurück zum Shopify-Adminbereich und klicke auf „Customize” (beim duplizierten Theme). Du solltest deine neue Custom Section nun unter „Add section” finden. Klicke darauf, um sie hinzuzufügen. Du kannst nun die Einstellungen im Theme Editor ändern und die Ergebnisse live sehen.
6. Styling mit CSS
Um deine Custom Section optisch an dein Theme anzupassen, kannst du CSS-Code entweder direkt in der `.liquid`-Datei einfügen (wie im Beispiel oben) oder in einer separaten CSS-Datei in deinem Theme-Ordner. Letzteres ist empfehlenswert für eine bessere Organisation und Wiederverwendbarkeit.
Fortgeschrittene Techniken
Sobald du die Grundlagen verstanden hast, kannst du mit fortgeschritteneren Techniken experimentieren:
* Verwende verschiedene Einstellungstypen: Shopify bietet eine Vielzahl von Einstellungstypen, z.B. `image_picker`, `color`, `checkbox`, `select`. Nutze diese, um komplexe Konfigurationsmöglichkeiten zu schaffen.
* Erstelle Block-Abschnitte: Mit Block-Abschnitten kannst du dynamisch wiederholbare Inhalte hinzufügen. Das ist ideal für z.B. Testimonials oder Bildergalerien.
* Benutze Schemas für Übersetzungen: Wenn dein Shop mehrsprachig ist, kannst du Schemas verwenden, um die Labels und Standardwerte deiner Einstellungen zu übersetzen.
* Integriere Drittanbieter-Apps: Du kannst Custom Sections verwenden, um Funktionalitäten von Drittanbieter-Apps in dein Theme zu integrieren.
Best Practices für Custom Sections
* Code sauber und übersichtlich: Kommentiere deinen Code, um ihn für dich und andere verständlich zu machen.
* Optimiere die Performance: Vermeide unnötige HTTP-Anfragen und optimiere Bilder, um die Ladezeit deiner Seite zu verbessern.
* Teste gründlich: Stelle sicher, dass deine Custom Section auf verschiedenen Geräten und Browsern korrekt angezeigt wird.
* Benutze Version Control: Verwende ein System wie Git, um Änderungen an deinem Theme zu verfolgen und bei Bedarf zurückzusetzen.
Fazit
Die Erstellung von Custom Sections bei Shopify-Themes ermöglicht es dir, deinen Shop individuell anzupassen und ein einzigartiges Markenerlebnis zu schaffen. Mit den hier genannten Schritten und Best Practices bist du bestens gerüstet, um loszulegen. Viel Erfolg!