Eigenes Theme erstellen

Eigenes Theme erstellen

Im Folgenden werden wir anhand von einfachen Beispielen alle notwendigen Dateien vorstellen.
Sie werden sehen, dass Sie mit wenig Aufwand einen lauffähigen Online-Shop erstellen können. Es sind Ihnen keine Grenzen gesetzt, wenn Sie Ihr eigenes Store-Design umsetzen wollen. Sie können es einfach oder aufwendig gestalten, ganz wie sie wollen.

Der Verzeichnis-Aufbau

Der Verzeichnis-Aufbau

Eigenes Theme erstellen

Jedes Design hat ein eigenes Verzeichnis. In unserem Beispiel heisst unser Design und Verzeichnis „mein_design”.

Dieses Verzeichnis hat wiederum drei weitere Unter-Verzeichnisse:

  1. Im Verzeichnis assets werden die statischen Inhalte für Ihr Design abgelegt.
  2. Im Verzeichnis layout liegt Ihre Layout-Datei für wiederkehrende Elemente.
  3. Das Verzeichnis templates beinhaltet Ihre Seitenvorlagen.

    • Related Articles

    • theme

      Ordner mein-design/templates/cart.html Beispiel-URL demoshop.versacommerce.de/cart Diese beiden Liquid-Objekt müssen in der theme.html enthalten sein. Andernfalls wird das Theme nicht richtig funktionieren. {{ content_for_header }} and ...
    • Layout-Theme

      In diesem Template wird neben den Layout meist folgendes definiert: Kopfbereich / Logo Navigationen Produkt-Suchfeld Fussbereich In dieser theme.html werden alle anderen Templates eingebunden. Die weiteren Templates werden abhänig von der URL im Shop ...
    • Theme-Konfigurator

      Nötige Dateien Die Datei settings_schema.json kann genutzt werden, um die Konfigurationsmöglichkeiten des Konfigurators zu verändern. Im Theme Editor ist die Datei im Bereich config zu finden. mein-design/config/settings_data.json Beispiel einer ...
    • article

      Die Datei article.html stellt einen Blogeintrag und optional auch dessen Kommentare dar. Ordner mein-design/templates/article.html Beispiel-URL demoshop.versacommerce.de/collections/meine-gruppe Wichtige Hinweise Wenn ein Besucher einen Kommentar ...
    • cart

      Ordner mein-design/templates/cart.html Beispiel-URL demoshop.versacommerce.de/cart Positionen Jede Position im Warenkorb ist als item in der Variable cart.items gespeichert. Ein Item „weiß“, welche Variante eines Produktes es ist. Außerdem werden ...