Themen: Erstellen und bearbeiten Sie Ihre eigenen Themenvorlagen

„Themes“ ist eine der ältesten Seiten im Shoporama-Adminbereich. Hier erstellst du deine eigenen Versionen einzelner Dateien in deinem Theme und lässt sie die entsprechenden Dateien des von dir bereits verwendeten Designs überschreiben. Gleichzeitig handelt es sich dabei um das ursprüngliche Split-Test-Tool von Shoporama.

Wichtig vorab: Die Seite funktioniert nur, wenn Ihr Webshop mit Smarty 2 läuft. Läuft Ihr Shop mit Smarty 4, ist der Menüpunkt gar nicht vorhanden und die Seite hat keine Wirkung. Springen Sie in diesem Fall direkt zum Abschnitt „Läuft Ihr Shop mit Smarty 4? “ weiter unten.

So erkennst du, ob dein Shop mit Smarty 2 oder Smarty 4 läuft

Smarty ist die Vorlagensprache, in der Ihr Theme geschrieben ist, also der Code, der Produktnamen, Preise und Bilder in die Seiten einbindet, die Ihre Kunden sehen. Es gibt zwei Versionen: das alte Smarty 2 und das aktuelle Smarty 4.

1. Klicke im Menü auf der linken Seite auf „Konto“, klappe „Webshop“ auf und wähle „Allgemein“.
2. Suchen Sie das Feld „Smarty-Version“. Dort steht entweder „2“ oder „4“ (funktioniert möglicherweise nicht mit alten Vorlagen).

Ist das Feld ausgegraut, steht dort „Vom Theme gesteuert (Smarty 4)“, und dann bestimmt das Theme selbst die Version. Wenn du von 2 auf 4 umsteigen möchtest, lies bitte zuerst die Anleitung zum Umstieg auf Smarty 4. Wenn du Smarty 2 verwendest, steht oben auf der Seite „Themes“ außerdem „Du verwendest Smarty 2 “.

Verwendest du Smarty 4? Dann musst du an eine andere Stelle gehen

Bei Shops mit Smarty 4 wurde der Menüpunkt „Themes“ absichtlich entfernt. Smarty 4 liest die Theme-Dateien ausschließlich aus dem Theme-Ordner des Shops, sodass ein hier erstelltes Theme ohnehin nie verwendet würde. Was du früher auf dieser Seite erledigt hast, machst du stattdessen hier:

• Shop, Design, Code-Editor, um die HTML-, CSS- und JavaScript-Dateien des Themes zu bearbeiten. Siehe die Anleitung zum Code-Editor.
• Shop, Design, Seiten-Designer, um Seiten aus vorgefertigten Blöcken ganz ohne Code zu erstellen.
• Shop, Design, A/B-Test, um zwei Versionen einer Seite gegeneinander zu testen. Der neue A/B-Test arbeitet mit dem Seiten-Designer zusammen, verteilt den Traffic nach Gewichtung und kann sich selbst beenden, sobald das Ergebnis eindeutig ist.
• Shop, Design, Theme-Einstellungen für Farben, Logos und die vom Theme selbst bereitgestellten Optionen. Siehe Anleitung zu den Theme-Einstellungen.
• Shop, Design, Stylesheet für eigene CSS-Anpassungen und Shop, Design, Texte für die festen Texte.

Was ein „Theme“ hier bedeutet und wo Sie die Seite finden

Der Begriff „Theme“ wird an zwei Stellen im Admin-Bereich verwendet, und sie sind nicht dasselbe. „Shop, Design, Theme“ bezeichnet Ihr eigentliches Design, also alle Dateien, aus denen der Shop aufgebaut ist, und die Übersicht über die Themes bei Shoporama bietet einen Überblick. „Konto“, „Webshop“, „Themen“ hingegen ist eine kleine Sammlung einzelner Dateien, die das Design ergänzen. Nur die Dateien, die du selbst hochlädst, werden überschrieben, alles andere stammt aus deinem regulären Theme.

Die Dateien werden in der Datenbank des Shops gespeichert und nicht als eigentliche Dateien, sodass sie nicht überschrieben werden, wenn die Dateien des Themes erneut hochgeladen werden. Genau das macht die Seite so nützlich: Du kannst eine Änderung an einer Stelle ausprobieren, ohne den Rest des Designs zu verändern.

Du findest die Seite unter „Konto“, „Webshop“, „Themes“, zwischen „robots.txt“ und „Zurücksetzen“. Die Übersicht besteht aus drei Spalten: „Name“ ist der von dir gewählte Name des Themes, „In Gebrauch “ steht auf „Ja“ für das aktive Theme und auf „Nein“ für die übrigen, und das Bleistift-Symbol öffnet die Dateiliste des Themes. Ganz unten befindet sich die Schaltfläche „Neues Theme erstellen“.

So erstellst du ein Theme

1. Klicke auf „Neues Theme erstellen“. Die Seite heißt „Neues Theme“.
2. Gib den Namen ein. Wähle einen Namen, den du auch in drei Monaten noch wiedererkennen wirst, z. B. „Test des Kaufbuttons“.
3. Wenn du von einer bestehenden Datei ausgehen möchtest, wähle diese unter „Oder aus eigenem Thema kopieren“ (optional) aus. Die Liste zeigt die Themenordner an, die du oder dein Entwickler selbst hochgeladen haben, und E-Mail-Dateien sind mit (E-Mail) gekennzeichnet.
4. Klicke auf „Erstellen“. Du gelangst sofort zur Dateiliste des Themes.

Das Feld „Aus Theme kopieren (optional)“ direkt darüber ist derzeit bei allen Shops leer, und das ist kein Fehler deinerseits. Wenn du noch keine Theme-Dateien hochgeladen hast, erstelle das Theme einfach leer und füge die Dateien anschließend hinzu.

Die Dateiliste im Theme

Die Dateiliste heißt „Templates“. Oben kannst du den Namen des Themes bearbeiten, und darunter befindet sich die Tabelle mit den Dateien:

• „Dateiname“ ist das entscheidende Feld. Die Datei überschreibt die Datei in deinem Theme, die genau denselben Namen trägt, z. B. „add_to_basket.html“. Wenn du einen Namen eingibst, den dein Theme nicht verwendet, passiert nichts.
• Der Name ist deine eigene Bezeichnung, z. B. „Original“ oder „Version B“. Er ist nur im Admin-Bereich sichtbar.
• „Gesperrt“ zeigt an, ob die Datei als die Version gesperrt ist, die alle sehen sollen. Mehr dazu im Abschnitt über Split-Tests.
• „Geändert“ gibt das Datum und die Uhrzeit der zuletzt gespeicherten Änderung an.
• Das Bleistift-Symbol ganz rechts öffnet die Datei zur Bearbeitung, und das Häkchen ganz links wird von den Schaltflächen „Kopieren“ und „Löschen“ darunter verwendet.

Die Schaltflächen unten: „Speichern“ speichert den Namen und kehrt zur Übersicht zurück. „Neue Datei im Thema erstellen“ öffnet die Seite für eine neue Datei. „Ausgewählte Dateien kopieren“ erstellt eine Kopie jeder markierten Datei mit demselben Dateinamen und Namen wie das Original. „Ausgewählte Dateien löschen“ löscht die markierten Dateien nach einer Sicherheitsabfrage („Sicher?“). „Dieses Thema verwenden“ aktiviert das Thema und wird nur angezeigt, wenn es nicht bereits in Gebrauch ist. „Gesamtes Thema löschen“ entfernt das Thema und alle dazugehörigen Dateien.

Ein wichtiger Hinweis: Die Häkchen werden von mehreren Schaltflächen verwendet. Wenn du ein Häkchen bei einer Datei gesetzt hast und auf „Speichern“ oder „Dieses Thema verwenden“ klickst, wird die Datei ebenfalls kopiert. Entferne daher die Häkchen, wenn du mit dem Kopieren fertig bist, da sich sonst die Liste der Duplikate vergrößert.

Denke daran, dass ein Design erst wirksam wird, wenn du auf „Dieses Design verwenden“ geklickt hast. Das ist der klassische Fehler. In der Spalte „In Verwendung“ muss „Ja“ stehen. Es kann jeweils nur ein aktives Design geben, und das alte bleibt erhalten, sodass du wieder zurückwechseln kannst.

Datei erstellen und bearbeiten

Die Seite „Neue Datei im Theme erstellen“ enthält die Felder „Dateiname“ und „Name“ sowie dieselben beiden Kopierlisten wie beim Erstellen des Themes. Wenn du das Feld „Dateiname“ leer lässt, wird die Datei als „noname.html“ mit dem Namen „No name“ erstellt.

Die eigentliche Bearbeitung erfolgt auf der Seite „Vorlage bearbeiten“, wo du den Dateinamen, den Namen und das große HTML-Feld bearbeiten kannst. Mit „Speichern“ wird die Datei gespeichert und du kehrst zur Dateiliste zurück, mit „Speichern und weiterbearbeiten“ bleibst du auf der Seite, und mit „Löschen“ wird die Datei nach einer Bestätigung entfernt.

Es gibt keine Rückgängig-Funktion und keinen Versionsverlauf. Wenn du speicherst, ist die alte Version weg; kopiere daher den Inhalt in eine Textdatei, bevor du Änderungen vornimmst. Die Änderung wird sofort übernommen. Wenn du sie nicht sehen kannst, versuche einen harten Neuladevorgang mit Cmd+Shift+R oder Strg+Shift+R. In einem Live-Shop können fertige Seiten zudem bis zu vier Stunden lang zwischengespeichert bleiben.

Split-Test: zwei Versionen derselben Datei

Hier macht sich die Seite erst richtig bezahlt. Wenn du zwei oder mehr Dateien mit demselben Dateinamen in dasselbe Theme einfügst, verteilt der Shop die Besucher auf diese Dateien. Die Auswahl wird eine Woche lang gespeichert, sodass der einzelne Besucher nicht mitbekommt, wie sich die Schaltfläche im Laufe der Zeit ändert.

1. Suche die Datei, die das enthält, was du testen möchtest. Handelt es sich um den Text auf der Kaufschaltfläche, ist dies typischerweise „add_to_basket.html“.
2. Füge das Original in das Theme ein und benenne es „Original“.
3. Setzen Sie ein Häkchen daneben, klicken Sie auf „Ausgewählte Dateien kopieren“ und benennen Sie die Kopie „Version B“.
4. Öffne „Version B“, passe die eine Sache an, die du testen möchtest, und speichere die Datei. Wenn du mehrere Dinge änderst, weißt du nicht, was gewirkt hat.
5. Klicke auf „Dieses Theme verwenden“ und lass den Test laufen, bis du genug Bestellungen hast, um eine Schlussfolgerung zu wagen.

Die Spalte „Gesperrt“ gibt die Version an, die alle sehen sollen, unabhängig von der Verteilung. Im aktuellen Admin-Bereich gibt es kein Feld, um diese Option zu aktivieren, und wenn du eine Datei speicherst, wird sie auf „Nein“ gesetzt. Wenn du einen Test beenden und den Gewinner beibehalten möchtest, löschst du daher einfach den Verlierer.

Wenn du nur wenige Besucher hast, dauert es lange, bis du ein verlässliches Ergebnis erhältst, und dann ist die Zeit besser dafür genutzt, mehr Traffic zu generieren. Die gespeicherte Version der Seiten kann zudem die Aufteilung weniger präzise machen. Mehr dazu findest du im Leitfaden zum Split-Test in Shoporama.

Für technisch Versierte

Die Dateien sind Smarty-Vorlagen, kein reines HTML. Bei Shoporama wird Smarty mit spitzen Klammern um die geschwungenen Klammern herum geschrieben:

<{$product->getName()}>

<{if $product->getPrice()}>
    <p><{$product->getPrice()}> kr.</p>
<{/if}>

Jedes <{if}> muss ein <{/if}> haben. Wenn du eines vergisst, bekommst du in der Regel eine Fehlerseite im gesamten Shop. Variablen und Methoden werden unter „Variablen in einem Shoporama-Theme“ beschrieben. Drei Unterschiede zwischen den beiden Smarty-Versionen solltest du kennen:

• Die Dateien sind unterschiedlich angeordnet. In einem Smarty-2-Theme befinden sich die Vorlagen direkt im Theme-Ordner, z. B. invoice.html. In einem Smarty-4-Theme liegen sie in Unterordnern, z. B. templates/mails/invoice.html.
• Smarty 4 ist strenger. Daher steht im Dropdown-Menü wörtlich „funktioniert möglicherweise nicht mit alten Vorlagen“. Alte Vorlagen können Schreibweisen enthalten, die zunächst korrigiert werden müssen.
• Datenbankdateien gibt es nur in Smarty 2. Die Seite „Themes“ lässt ihre Dateien den eigentlichen Dateien des Themes vorgehen. Dieser Mechanismus existiert in Smarty 4 nicht, wo alle neuen Funktionen integriert sind.

Häufig gestellte Fragen

Ich kann „Themes“ in meinem Menü überhaupt nicht finden. Wo ist es?

Dann läuft dein Shop mit Smarty 4, und der Menüpunkt wird bewusst ausgeblendet. Überprüfe dies unter „Konto“, „Webshop“, „Allgemein“ im Feld „Smarty-Version“. Wenn du Änderungen an den Dateien des Themes vornehmen möchtest, verwende stattdessen „Shop“, „Design“, „Code-Editor“.

Lösche ich mein eigentliches Design, wenn ich hier ein Theme lösche?

Nein. Ein Theme hier enthält nur die einzelnen Dateien, die du selbst hochgeladen hast. Wenn du es löschst, verwendet der Shop wieder die entsprechenden Dateien aus deinem regulären Theme, und das eigentliche Design bleibt unberührt.

Warum ist die Liste „Aus Theme kopieren (optional)“ leer?

Dieses Feld zeigt keinen Inhalt mehr an, überspringe es also einfach. Wenn du selbst Theme-Dateien hochgeladen hast, findest du diese im Feld darunter: „Oder aus eigenem Theme kopieren (optional)“.

Plötzlich habe ich zwei völlig identische Dateien in der Liste. Was ist passiert?

Die Häkchen werden von mehreren Schaltflächen verwendet. Wenn bei einer Datei ein Häkchen gesetzt ist und du auf „Speichern“ oder „Dieses Theme verwenden“ klickst, wird die Datei kopiert – genau so, als hättest du auf „Ausgewählte Dateien kopieren“ geklickt. Lösche den Duplikat und entferne die Häkchen.

Kann ich eine Änderung am nächsten Tag rückgängig machen?

Nein, es werden keine früheren Versionen gespeichert. Kopiere den Inhalt immer in eine Textdatei, bevor du Änderungen vornimmst. Ist der Schaden bereits ohne Kopie entstanden, lösche die Datei aus dem Theme, dann verwendet der Shop wieder das Original.

Bleiben meine Änderungen nach einer Aktualisierung des Themes erhalten?

Ja. Die Dateien befinden sich nicht im Theme-Ordner, sodass sie nicht überschrieben werden, wenn die Theme-Dateien erneut hochgeladen werden. Allerdings können sie zu Problemen führen, wenn das neue Theme die Datei grundlegend geändert hat; überprüfe sie daher nach einem größeren Update.

Kann ich dieselbe Korrektur in allen meinen Webshops auf einmal einführen?

Nein. Themes und Dateien gehören zu dem Shop, den du im Admin-Bereich ausgewählt hast, daher muss der Vorgang in jedem Shop wiederholt werden. Wenn du viele Shops mit demselben Theme hast, ist es sinnvoller, die Korrektur direkt in das Theme selbst einzubauen.

Ich teste meinen Split-Test, sehe aber immer dieselbe Version. Ist er defekt?

Wahrscheinlich nicht. Deine Auswahl der Version wird eine Woche lang gespeichert, sodass du immer dieselbe Version siehst, bis du die Cookies löschst oder den Shop in einem Inkognito-Fenster öffnest.

Ich habe eine Datei korrigiert, aber im Shop passiert nichts. Was nun?

Überprüfe Folgendes in dieser Reihenfolge: Steht in der Spalte „In Gebrauch“ ein „Ja“, ist der Dateiname genau so geschrieben wie die Datei in deinem Theme und hast du einen Hard-Reload versucht? Wenn du immer noch Zweifel hast, schreibe an support@shoporama.dk und gib den Namen der Datei an.