Ein Theme umfasst folgende Verzeichnisse:
Im assets-Verzeichnis können Ressourcen wie Bilder, CSS-Stylesheets, Javascript-Dateien, Fonts, etc. für den Theme abgelegt werden. Für eine bessere Organisation können im assets-Verzeichnis auch Unterverzeichnisse angelegt. Mit Hilfe des <cmd>asset_url</cmd> Befehl, können die Dateien im assets-Verzeichnis innerhalb eines Templates referenziert werden.
Das layout-Verzeichnis enthält ein oder mehrere Layout-Templates für den Theme. Alle Templates im templates-Verzeichnis werden innerhalb eines Layout-Template gerendert. Falls innerhalb des Templates nicht anderes angegeben, wird per Default das theme.liquid als Layout-Template verwendet. Daher sollte in diesem Verzeichnis immer eine Datei mit dem Namen theme.liquid abgelegt werden. Weitere Informationen befinden sich unter dem Kapitel Layout.
Im locale-Verzeichnis können sprachabhängige Beschriftungen hinterlegt werden. Der Dateiname muss dabei einem zweistelligen Sprachcode nach ISO-639-1 entsprechen und die Endung ".json" besitzen (z.B. "en.json"). Die Beschriftungen werden als flaches JSON-Objekt definiert. Nachfolgend ein Beispiel für den Dateiinhalt.
<code-block>Innerhalb eines Templates stehen die Beschriftungen über das globale Objekt <obj>labels.theme</obj> zur Verfügung.
Im settings-Verzeichnis können sprachunabhängige Einstellungen für den Theme hinterlegt werden. Dazu muss eine Datei mit dem Namen "settings_data.json" angelegt werden. Der Inhalt der Datei muss einem JSON-Objekt entsprechen. Alle Einstellungen werden dabei als flaches JSON-Objekt unterhalb des Keys "current" gepflegt. Nachfolgend ein Beispiel für den Dateiinhalt.
<code-block>Innerhalb eines Templates stehen die Einstellungen unterhalb des Keys "current" über das globale Objekt <obj>settings</obj> zur Verfügung.
Im snippets-Verzeichnis können alle benötigten Snippets abgeleget werden. Die Snippets müssen dabei die Dateiendung ".liquid" besitzen. Für die Einbindung eines Snippets in ein Template, steht der <cmd>include</cmd> Befehl zur Verfügung.
Im templates-Verzeichnis werden alle Standard-Templates abgelegt:
Nachfolgend sehen Sie ein Beispiel für den Aufbau der Verzeichnisstruktur.
<code-block> - assets/
|-- css/
| |-- style.css
| ...
|
|-- js/
| |-- script.js
| ...
|
|-- img/
| |-- logo.png
| ...
- layout/
|-- theme.liquid
...
- locale/
|-- de.json
|-- en.json
...
- settings/
|-- settings_data.json
- snippets/
|-- pagination.liquid
...
- templates/
|-- checkout/
| |-- login.liquid
| |-- confirm.liquid
| ...
|
|-- order/
| |-- payment_launch.liquid
| ...
|
|-- customer/
| |-- index.liquid
| |-- product_list.liquid
| ...
|
|-- email/
| |-- order_confirmation.liquid
| ...
|
|-- product.liquid
|-- product_list.liquid
...
</code-block>