So funktioniert es

So funktioniert es

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



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

    • Page

      <h1>{{ page.title }}</h1> {{ page.content }} Hier wird aus dem eingebauten CMS der Titel des des Dokumentes als Seitentitle “h1” gesetzt. Direkt darunter stellen wir den Inhalt des Dokumentes dar: Hinweis Wie auch bei anderen Templates (und deren ...
    • product

      Ordner mein-design/templates/product.html Beispiel-URL demoshop.versacommerce.de/products/mein-produkt Variantenwechsel Die meisten VersaCommerce-Themes verwenden Javascript, um den Kunden bei Auswahl einer Variante auf die entsprechende Produktseite ...
    • page

      Ordner mein-design/templates/page.html Beispiel-URL demoshop.versacommerce.de/pages/impressum HTML-Quellcode {% comment %} Template: page.html =================== Dieses Template für für die Darstellung von redaktionellen Seiten genutzt. (CMS) ...
    • Produkt

      <h1>{{ product.title }}</h1> Der Titel des Produktes wird innerhalb des h1 Tags eingesetzt → product.title. <img src="{{ product.images.first | product_img_url: 'medium' }}" /> Es wird für das Produkt ein Image-Tag mit der URL des favorisierten ...
    • 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 ...