Shopify - Theme erstellen

Links

Anpassung von Themes - https://help.shopify.com/de/manual/using-themes/change-the-layout
Design richtlinie https://help.shopify.com/de/manual/using-themes/theme-support#shopify-designrichtlinie

Aufbau von Themes

https://help.shopify.com/de/manual/using-themes/theme-structure

Wichtige Dateien

Config Globale Einstellungen für das Theme (Grundfarben, Logo...)

settings_data.json
settings_scheme.json

Einstellungen für Themes

https://shopify.dev/docs/themes/settings#about-settings_schema-json

Definiert in

settings_data.json

Seitenelemente

Seitenelemente

Alle Seiten eines Themes beinhalten diese Seitenelemente:

Nachricht (= Contentbereich)
Fußzeile 
Header - Enthält normalerweise den Namen Ihres Shops, Ihr Logo, die Hauptmenü-Navigation und das Warenkorbsymbol.
Navigation - Ein Menü oder eine Reihe von Menüs Die Hauptmenü-Navigation ist in der Kopfzeile eines Themes enthalten.

Seitentypen

Alle Themes umfassen diese Seitentypen:

• Artikel Die Artikelseite enthält den Inhalt eines einzelnen Blog-Artikels.
• Blog Die Blog-Seite enthält den Titel und die Beschreibung Ihres Blogs sowie Auszüge und Links zu Ihren Blog-Artikeln.
• Warenkorb Die Warenkorbseite zeigt eine Zusammenfassung aller Produkte, die Kunden ihrem Warenkorb hinzugefügt haben, eine Zwischensumme und einen Gesamtpreis für die Bestellung sowie einen Checkout-Button, über die Kunden zu den sicheren Checkout-Seiten von Shopify geleitet werden. Wenn keine Produkte hinzugefügt wurden, wird auf der Seite mit dem leeren Warenkorb der Link Shopping fortsetzen angezeigt, mit dem Kunden wieder auf Ihre Produkte geleitet werden.
• Kategorie Sie können Ihre Produkte in Kategorien organisieren, damit sie für die Kunden leichter zu finden sind. Auf der Kategorieseite werden alle Produkte angezeigt, die in einer bestimmten Kategorie enthalten sind.
• Kategorieliste Die Kategorielistenseite zeigt alle Kategorien Ihres Shops an. Diese Seite finden Sie unter der URL `your-store.com/collections`.
• Kontakt Die Kontaktseite enthält ein Formular, über das Kunden mit Ihnen Kontakt aufnehmen können.
• Benutzerdefiniert Eine benutzerdefinierte Seite ist jede Seite, die Sie im Abschnitt Seiten in Ihrem Shopify-Adminbereich erstellen.
• Kunde Kundenseiten sind nur verfügbar, wenn Sie Kundenkonten unter Einstellungen > Checkout im Adminbereich aktiviert haben. Sie enthalten die Seite, auf der sich Kunden registrieren können, die Seite, auf der sich Kunden einloggen können, und die Kundenkontoseite. Die Kundenkontoseite enthält die Lieferadresse des Kunden und Informationen über aufgegebene Bestellungen.
• Home Die Homepage ist die Startseite Ihres Onlineshops. Dies ist die Standardseite, die geöffnet wird, wenn ein Kunde Ihre Website besucht.
• Passwort Die Passwortseite ist eine einzelne Seite, mit der Sie Ihren Onlineshop vorübergehend für Kunden ausblenden können. Sie können eine Passwortseite verwenden, bevor Sie Ihren Shop öffnen oder wenn Sie im Urlaub sind. Auf Ihrer Passwortseite können Sie den Launch-Termin Ihres Shops, die Art von Produkten, die Sie verkaufen, die aktuelle Berichterstattung in den Medien oder Details zu einer bevorstehenden Verkaufsaktion anzeigen. Die Passwortseite enthält auch ein E-Mail-Feld, über das Kunden sich anmelden können, wenn sie in Zukunft Newsletter von Ihnen erhalten möchten.
• Produkt Die Produktseite präsentiert ein Produkt und seine Varianten. Sie enthält Produktbilder, Preisinformationen, eine Produktbeschreibung und eine Schaltfläche Zum Warenkorb hinzufügen.
• Suchen Die Suchseite enthält eine Suchleiste und eine Liste mit Suchergebnissen.

Snippets

Shopify - Snippets

Section

Shopify - Sections & Snippets

Themes erstellen

Am Besten zu beginn ein vorhandenes runterladen und anschauen.

Tutorials

Kleines Setup Template zum Üben (Github/Youtube)

https://www.youtube.com/watch?v=zBtwd2OfZsI

Neues Theme aus vorhandenem erstellen

1. Themes > aktuelles Theme > Aktionen > Theme Dateien herunterladen

Liquid Skripte

Shopify Themes / Templates werden in Liquid geschrieben. Damit lassen sich normale HTML Templates mit Plathaltern und einfachen Befehlsstrukturen versehen.

Liquid für Shopify Themes