Ein Shopify-Theme bestimmt, wie Ihr Shop aussieht und wie Seiten aufgebaut sind. Mit aktuellen Online Store 2.0 Themes erledigen Sie die meisten Änderungen im Theme-Editor ohne Code. Brauchen Sie doch Code, gibt es sichere Wege dafür.
Bevor Sie etwas ändern
Duplizieren Sie Ihr Live-Theme (Onlineshop → Themes → ⋯ → Duplizieren) und arbeiten Sie an der Kopie. Sehen Sie sie in der Vorschau an, teilen Sie den Vorschaulink für Feedback und veröffentlichen Sie, wenn Sie zufrieden sind. So ist der Live-Shop nie halb fertig.
Was Sie im Theme-Editor tun können
Theme-Einstellungen
Farben, Schriften, Button-Stile, Logo, Favicon, Social-Links und das Verhalten des Warenkorbs gelten für den ganzen Shop. Legen Sie diese zuerst fest, damit jede Seite einheitlich ist.
Sections und Blocks
Jede Seite besteht aus Sections (ein Banner, eine hervorgehobene Kollektion, ein Textblock), die Blocks enthalten (eine Überschrift, ein Button, ein Bild). Sie können sie hinzufügen, entfernen, neu anordnen und ausblenden. Themes aus dem Theme Store bringen eine Section-Bibliothek mit; Apps können eigene Blocks ergänzen.
Templates
Produkte, Kollektionen und Seiten können jeweils mehrere Templates haben. Nutzen Sie zum Beispiel ein alternatives Produkt-Template für Produkte, die eine Größentabelle oder ein Video brauchen, und weisen Sie es im Produkteditor zu.
Dynamische Inhalte mit Metafields
Metafields speichern zusätzliche Informationen zu Produkten, Kollektionen und mehr, etwa Inhaltsstoffe, Pflegehinweise oder eine Größentabelle. Im Theme-Editor verbinden Sie einen Block mit einem Metafield, sodass jedes Produkt im selben Layout seine eigenen Inhalte zeigt.
Wann Code das richtige Werkzeug ist
- Ein neuer Section-Typ, den das Theme nicht bietet
- Das Verhalten bestehender Sections über ihre Einstellungen hinaus ändern
- Performance-Korrekturen und das Entfernen von übrig gebliebenem App-Code
- Integrationen, die Markup an bestimmten Stellen brauchen
Shopify-Themes bestehen aus Liquid, HTML, CSS und JavaScript. Sie bearbeiten sie unter ⋯ → Code bearbeiten oder bei größeren Arbeiten mit der Shopify CLI und Versionskontrolle.
Gewohnheiten für sicheres Anpassen
- An einer Kopie arbeiten, nie direkt am Live-Theme.
- Neue Dateien bevorzugen (eine neue Section oder ein Snippet) statt zentrale Theme-Dateien zu bearbeiten; Updates lassen sich so leichter zusammenführen.
- Ein Änderungsprotokoll führen: was bearbeitet wurde und warum.
- Auf dem Smartphone testen, wo die meisten Besucher unterwegs sind.
- Die Ladezeit im Blick behalten: Jedes neue Skript und Bild bringt Gewicht. Siehe unseren Leitfaden zur Ladezeit.
Anpassen oder ein individuelles Theme bauen?
| Bestehendes Theme anpassen | Individuelles Theme | |
|---|---|---|
| Zeit bis zum Launch | Schnell | Länger |
| Einzigartigkeit | Mittel | Vollständig maßgeschneidert |
| Updates | Vom Theme-Entwickler | Ihre Verantwortung |
| Am besten für | Die meisten neuen und wachsenden Shops | Marken mit besonderen Design- und Funktionsanforderungen |
Kleine Aufgaben wie „Powered by Shopify“ entfernen dauern Minuten. Für neue Sections, ein Redesign oder ein maßgeschneidertes Theme sehen Sie sich unsere Shopify-Theme-Entwicklung an.
Häufige Fragen
Überschreiben Theme-Updates meine Anpassungen?
Änderungen im Theme-Editor werden beim Update eines Themes aus dem Theme Store in der Regel übernommen. Code-Änderungen nicht; diese müssen Sie in der neuen Version erneut vornehmen.
Kann ich für manche Produkte ein anderes Layout verwenden?
Ja. Erstellen Sie im Theme-Editor ein alternatives Produkt-Template und weisen Sie es den betreffenden Produkten zu.
Brauche ich einen Entwickler, um mein Theme anzupassen?
Für die meisten Änderungen nicht. Farben, Schriften, Sections, Templates und Inhalte verwalten Sie im Theme-Editor. Ein Entwickler hilft bei neuen Section-Typen, individuellen Funktionen und Performance-Arbeit.
Autor
Uğur KeskinFounder @ShopiuzmanGründer von Shopiuzman. Er baut, migriert und entwickelt Shopify-Shops für Marken in der Türkei, in Europa und in den USA weiter und leitet die Entwicklung unserer Apps im Shopify App Store.
