Der alte Theme Builder

Der Theme Builder ist Shoporamas ältestes Tool zum Erstellen von Seiten mit vorgefertigten Inhaltsblöcken. Sie setzen Zeilen, Spalten und Module zusammen und können so beispielsweise das Erscheinungsbild der Startseite oder der Kategorieseiten steuern, ohne Code schreiben zu müssen. Das Tool funktioniert zwar weiterhin, gehört jedoch zur älteren Generation der Shoporama-Themes. Wenn Ihr Shop ein neueres Theme verwendet, arbeiten Sie stattdessen im Seiten-Designer.

Warum können manche den Theme Builder sehen und andere nicht?

Das hängt von deinem Theme ab und ist keine Einstellung, die du selbst aktivieren oder deaktivieren kannst:

• Das Theme unterstützt den Seiten-Designer. In diesem Fall ist der „Theme Builder“ ausgeblendet, und du erstellst deine Seiten im Seiten-Designer unter „Shop“, „Design“. Dies gilt für die neueren Shoporama-Themes.
• Das Theme unterstützt den Seiten-Designer nicht. In diesem Fall erscheint im Menü ein zusätzlicher Abschnitt namens „Alter Theme Builder “ mit dem Punkt „Theme Builder“. Dies gilt für ältere Themes und viele maßgeschneiderte Themes.

Der Menüpunkt „Seiten-Designer“ ist in jedem Fall im Menü vorhanden, aber die Blöcke, die Sie dort erstellen, werden erst im Shop angezeigt, wenn Sie ein Theme verwenden, das diese unterstützt.

Wenn du das Theme wechselst, ändert sich also auch das Menü. Beachte außerdem, dass der Inhalt aus dem Theme Builder nur im Shop angezeigt wird, wenn das Theme dafür ausgelegt ist – also bei den alten Shoporama-Themes wie „Alaska“ und „Massachusetts“ sowie bei Themes, die ein Entwickler nach dem gleichen Prinzip erstellt hat. Außerdem funktioniert der Theme Builder nur in Webshops, die mit Smarty 2 laufen. Wenn du ein speziell entwickeltes Smarty-4-Theme ohne Seiten-Designer hast, kann der Menüpunkt zwar vorhanden sein, ohne dass die Einstellungen im Shop angezeigt werden. Wenn du dir nicht sicher bist, auf welcher Basis dein Shop läuft, frag uns einfach unter support@shoporama.dk.

So findest du den Theme Builder

Du findest das Tool im Menü unter „Alter Theme Builder“ unter dem Punkt „Theme Builder“. Die Seite zeigt eine Tabelle mit deinen Einstellungen, bestehend aus den Spalten „Name“ (dein eigener Name, alphabetisch sortiert), „Aktiv“ (Ja bedeutet, dass die Konfiguration im Shop verwendet wird, Nein, dass sie in der Warteschlange steht) und „Platzierung“ (für welche Seiten sie gilt). Ganz rechts befindet sich der Link „Bearbeiten“, der den Theme Builder selbst öffnet.

Ganz unten findest du die Schaltfläche „Neue Konfiguration erstellen“. Ist die Tabelle leer, ist das kein Problem. Es bedeutet lediglich, dass noch keine Konfigurationen erstellt wurden und dein Theme daher seinen eigenen Standardinhalt anzeigt.

Auf der Seite findest du außerdem einen Tipp zur Shoporama-Theme-Hierarchie: Wenn du nur einzelne Dateien in deinem Theme bearbeiten möchtest, z. B. eine E-Mail-Vorlage oder einen Lieferschein, kannst du dein eigenes Theme erstellen und genau die Dateien kopieren, die du ändern möchtest. Der Rest wird vom ursprünglichen Theme übernommen.

So erstellst du eine Konfiguration

Klicke auf „Neue Konfiguration erstellen“. Du gelangst dann auf die Seite „Neue Themenkonfiguration “ mit folgenden Feldern:

1. Name. Ein Name, den du selbst wählst, z. B. „Startseite“ oder „Weihnachtskampagnenseite“. Der Name ist nur für dich bestimmt und wird den Kunden nicht angezeigt. Das Feld muss ausgefüllt werden.
2. Aktiv. Ist standardmäßig aktiviert. Entferne das Häkchen, wenn du in Ruhe arbeiten möchtest, ohne dass die Konfiguration im Shop angezeigt wird.
3. Diese Konfiguration anwenden auf. Hier wählst du aus, für welche Seiten die Konfiguration gelten soll. Wenn du „Spezifische URL“ wählst, erscheint das Feld „URL“, in das du die Adresse eingibst. Wenn du mehrere Adressen mit demselben Muster abdecken möchtest, kannst du das Häkchen bei „Reguläre Ausdrücke in der URL verwenden“ setzen.
4. Klicke auf „Erstellen“, dann gelangst du direkt zum Erstellungsbereich. Wenn du es dir anders überlegst, klicke auf „Abbrechen“.

Du kannst zwischen „Alle Seiten“ (sofern nicht anders angegeben), „Startseite“, „Produktansicht“, „Landingpages“, „Kategorieseiten“, „Statische Seiten“, „Blogbeiträge“, „Blog-Startseite“ und „Spezifische URL“ wählen. Darüber hinaus gibt es die Gruppe „Feste Seiten“ mit den einzelnen Seiten des Shops, darunter die Suchseite, der Warenkorb, die vier Schritte des Bezahlvorgangs, die Bestätigungsseite, die Bestellseite, die kundeneigenen Seiten wie Anmeldung und Bestellübersicht sowie 404-Seiten.

Erstellen Sie die Seite mit Zeilen, Spalten und Modulen

Der Aufbau erfolgt über ein klassisches Raster mit 12 Teilen. Eine Seite besteht aus Zeilen, wobei jede Zeile eine oder mehrere Spalten enthält, und in die Spalten fügen Sie Module, also Inhaltsblöcke, ein.

• „Zeile darunter hinzufügen“ fügt eine neue Zeile unterhalb der aktuellen Zeile ein. „Zeile darüber entfernen“ löscht die darüberliegende Zeile einschließlich ihrer Module. Die letzte Zeile kann nicht entfernt werden.
• Mit „Spalte hinzufügen“ fügen Sie eine neue Spalte in die Zeile ein. Eine Zeile kann insgesamt maximal 12 Spalten umfassen, es muss also noch Platz vorhanden sein.
• Die beiden Schaltflächen im Kopf der Spalte, „Spalte vergrößern“ und „Spalte verkleinern“, passen die Breite an. Daneben wird die Breite angezeigt, z. B. 6/12, also die Breite einer halben Seite.
• „+ Modul hinzufügen“ öffnet das Fenster „Neues Modul hinzufügen“. Klicken Sie auf das Modul, das Sie verwenden möchten, dann wird es am unteren Rand der Spalte platziert.

Die Module lassen sich mit der Maus verschieben. Fasse die Titelleiste des Moduls an und ziehe es nach oben, unten oder in eine andere Spalte. Das Layout wird dabei automatisch gespeichert, sodass du deine Arbeit nicht verlierst, falls du unterbrochen wirst.

Wenn du auf das Zahnrad eines Moduls klickst, öffnet sich ein kleines Fenster mit den Einstellungen des Moduls. Es verfügt über drei Registerkarten: „Allgemein“ mit den modul-eigenen Feldern, „Styleguide“ mit den CSS-Klassen, mit denen du das Modul gestalten kannst, und „Quellcode“ für diejenigen, die einen Blick unter die Haube werfen möchten. Unten speicherst du mit „Speichern und schließen“ oder „Speichern und weiterbearbeiten“, und du kannst das Modul mit „Löschen“ entfernen.

Die Module, aus denen du wählen kannst

Der Theme Builder verfügt über eine feste Auswahl an Modulen, und dein Theme bestimmt, wie diese im Shop dargestellt werden:

• Text. Überschrift 1, Überschrift 2, Überschrift 3, formatierter Text mit einem einfachen Texteditor und ein HTML-Feld für freien Code.
• Bilder. Bild, Bild und Text, Top-Banner mit Text, Karussell und Parallax.
• Produkte. Produkt, Produktliste, Kategorieübersicht, Kategorien oder Landingpages mit Link sowie Werbeaktionen.
• Funktionen des Shops. Suchfunktion, Warenkorb, Menüstruktur, Logo, Newsletter-Anmeldung, Kreditkarten mit Zahlungslogos, Link, Links und Trennlinie.
• Standardinhalt, der das Wichtigste von allem ist und im Folgenden beschrieben wird, sowie der Google-Tracking-Code (nicht sichtbar), der auf der Seite nichts anzeigt, sondern lediglich den Tracking-Code einfügt.

Jedes Modul verfügt über eigene Felder. Ein Produktmodul fragt beispielsweise nach Überschrift, Herkunft der Produkte (eine Landingpage oder eine Kategorie), Anzahl der Produkte und Produktgröße, während Sie im Modul „Kreditkarten“ die von Ihnen angebotenen Zahlungsoptionen ankreuzen können.

Das Modul „Standardinhalt“

Wenn du mit dem Theme Builder eine Seite erstellst, ersetzt deine Konfiguration den normalen Inhalt des Themes auf dieser Seite. Mit dem Modul „Standardinhalt“ kannst du den normalen Inhalt an der gewünschten Stelle wiederherstellen. Auf einer Kategorieseite ist der „Standardinhalt“ die Produktliste, an der Kasse sind es die Formulare und so weiter. Soll Ihre Startseite beispielsweise oben ein großes Banner und darunter den normalen Startseiteninhalt anzeigen, fügen Sie ein Banner-Modul in die oberste Reihe und das Mod ul „Standardinhalt“ in die Reihe darunter ein. Das Modul verfügt über keine Einstellungen.

Wenn du ein Modul auswählst, das dein Theme nicht unterstützt, erscheint im Modul eine deutliche rote Meldung: „Wird vom aktiven Theme nicht unterstützt und funktioniert daher in deinem Shop nicht optimal.“ Dann weißt du, dass du etwas anderes auswählen musst.

Entwurf, Vorschau und Veröffentlichung

Der Theme Builder arbeitet mit zwei Versionen jeder Konfiguration: der Live-Version, die die Kunden sehen, und einem Entwurf, in dem du Änderungen vornimmst. Alle Änderungen, die du an Modulen und am Layout vornimmst, werden fortlaufend im Entwurf gespeichert, und die Kunden sehen die Änderungen erst, wenn du sie veröffentlichst. Die Schaltflächen unten haben folgende Funktionen:

• „Speichern und schließen“ speichert die Änderungen und leitet dich zurück zur Übersicht. „Speichern und weiter bearbeiten“ speichert die Änderungen und bleibt auf der Seite.
• „Speichern und veröffentlichen “ speichert und macht den Entwurf zur Version, die die Kunden sehen.
• „Zur Live-Version zurücksetzen“ verwirft den Entwurf und ruft die veröffentlichte Version wieder auf. Dies ist Ihre Rückgängig-Schaltfläche, auch für Module, die Sie im Entwurf gelöscht haben.
• „Abbrechen“ kehrt zur Übersicht zurück, und „Löschen“ löscht die gesamte Konfiguration sowie die darin enthaltenen Module. Du wirst zuvor gefragt, ob du sicher bist.

Beachte bitte Folgendes: Die Felder „Name“, „Aktiv“ und „Diese Konfiguration verwenden für“ gehören zur Konfiguration selbst und werden wirksam, sobald du speicherst – auch ohne zu veröffentlichen. Wenn du das Häkchen bei „Aktiv“ entfernst und speicherst, verschwindet die Konfiguration also sofort aus dem Shop.

Wenn du das Ergebnis vor der Veröffentlichung sehen möchtest, findest du unter den Schaltflächen einen Vorschau-Code. Füge diesen an das Ende der Adresse der Seite ein, die du ansehen möchtest, also ?preview=DEIN-CODE. Wenn du auf der Startseite arbeitest, zeigt die Seite einen fertigen Beispiel-Link an. Die Vorschau gilt nur für den aktuellen Seitenaufruf; wenn du dich weiter im Shop umschaust, siehst du wieder die veröffentlichte Version.

Welche Konfiguration wird auf welcher Seite verwendet?

Pro Seitenaufruf wird höchstens eine Konfiguration verwendet, und es werden nur Konfigurationen berücksichtigt, die auf „Aktiv“ gesetzt sind. Der Shop sucht in dieser Reihenfolge und verwendet die erste passende:

1. Ein Layout mit einer spezifischen URL, die mit der Adresse übereinstimmt.
2. Ein Layout auf einer der festen Seiten, z. B. dem Warenkorb, der Suchseite oder einem Schritt des Bezahlvorgangs.
3. Die Konfiguration für die Startseite, wenn sich der Kunde auf der Startseite des Shops befindet.
4. Danach folgen Kategorieseiten, Landingpages, Produktansichten, statische Seiten und Blogbeiträge, je nachdem, auf welcher Art von Seite sich der Kunde befindet.
5. Zuletzt „Alle Seiten“, sofern nicht anders angegeben – dies ist das Sicherheitsnetz, das den Rest abdeckt.

In der Praxis kannst du also eine allgemeine Konfiguration erstellen, die breit gefasst ist, und diese durch spezifischere Konfigurationen für die Seiten ergänzen, die sich von den anderen abheben sollen.

Der Weg in die Zukunft: Der Seiten-Designer

Der Theme Builder funktioniert weiterhin, aber die gesamte Entwicklung neuer Blöcke und Funktionen erfolgt im Seiten-Designer. Die Arbeit damit ist schneller und bietet unter anderem teilbare Vorschau-Links sowie weitaus mehr vorgefertigte Abschnitte, z. B. Hero-Banner, Produktkarussell, USP-Abschnitt und Blog-Liste.

Wenn du umsteigen möchtest, musst du zu einem Theme wechseln, das den Seiten-Designer unterstützt. Dies kannst du im Theme-Shop oder unter „Shop“, „Design“, „Theme“ tun. Denke daran, dass deine Theme-Builder-Einstellungen nicht automatisch konvertiert werden. Sie bleiben zwar im Shop erhalten, aber die Seiten müssen im Seiten-Designer neu erstellt werden. Nimm dir also etwas Zeit dafür und mache gerne zuerst Screenshots deiner aktuellen Seiten. Ein Theme-Wechsel ist gleichzeitig eine gute Gelegenheit, die Theme-Einstellungen zu überprüfen, in denen Farben, Schriftarten und andere Optionen des neuen Themes festgelegt werden.

Für technisch Versierte

Die Registerkarte „Styleguide“ jedes Moduls zeigt zwei CSS-Selektoren an: einen, der alle Module desselben Typs erfasst, und einen, der nur genau dieses eine Modul erfasst. Diese kannst du im Stylesheet des Shops verwenden, wenn ein einzelnes Modul anders aussehen soll als die anderen.

Über die Registerkarte „Quellcode“ kannst du die Vorlage des Moduls übernehmen. Das Feld ist zunächst leer, sodass die neueste Standardversion verwendet wird. Wenn du auf „Speichern und neuesten Quellcode laden“ klickst, wird der aktuelle Code in das Feld geladen, woraufhin du ihn bearbeiten kannst. Beachten Sie, dass ein von Ihnen übernommenes Modul bei einer Aktualisierung der Standardversion nicht mehr mit aktualisiert wird. Das Häkchen „Design aus Ihrem Theme nicht verwenden“ bewirkt, dass das Modul die themeneigene Version der Vorlage ignoriert.

Wenn der Theme Builder in ein Theme implementiert werden soll oder Sie die integrierten Module durch Ihre eigenen Vorlagen überschreiben möchten, finden Sie die Vorgehensweise unter „Theme Builder in Ihrem Theme implementieren“. Wenn Sie die Theme-Dateien direkt über den Admin-Bereich bearbeiten möchten, können Sie den Code-Editor verwenden.

Häufig gestellte Fragen

Ich kann den Theme Builder im Menü überhaupt nicht finden. Wurde er entfernt?

Nein, er wurde nicht entfernt. Der Bereich wird nur für Shops angezeigt, deren Theme den Seiten-Designer nicht unterstützt. Wenn du ein neueres Theme hast, erstellst du deine Seiten stattdessen im Seiten-Designer unter „Shop“, „Design“. Es handelt sich um dasselbe Tool, nur in einer neueren Version.

Woher weiß ich, ob meine Konfiguration für Kunden sichtbar ist?

Schau in der Spalte „Aktiv“ in der Übersicht nach. Steht dort „Ja“, ist sie in Gebrauch. Steht dort „Nein“, wird sie nicht angezeigt. Denk auch daran, dass geänderte Inhalte erst dann für Kunden sichtbar sind, wenn du auf „Speichern und veröffentlichen“ geklickt hast.

Ich habe versehentlich eine Reihe von Modulen gelöscht. Kann ich sie wiederherstellen?

Ja, sofern du die Seite seit dem Löschen noch nicht veröffentlicht hast. Klicke auf „Auf Live-Version zurücksetzen“ – dann wird der Entwurf durch die veröffentlichte Version ersetzt und die gelöschten Module werden wiederhergestellt. Hast du hingegen auf „Speichern und veröffentlichen“ geklickt, ist die Löschung endgültig und die Zeile muss neu erstellt werden.

Kann ich die Module mit meinem eigenen CSS gestalten?

Ja. Öffne die Einstellungen des Moduls und wechsle zum Reiter „Styleguide“. Dort findest du die genauen CSS-Selektoren, sowohl für alle Module dieses Typs als auch für genau dieses eine Modul. Diese kannst du im Stylesheet des Shops verwenden.

Kann ich ein spezielles Design für eine einzelne Kampagnenseite erstellen?

Ja. Wähle unter „Diese Konfiguration anwenden auf“ die Option „Spezifische URL“ aus und gib die Adresse der Seite ein. Wenn mehrere Adressen mit demselben Muster abgedeckt werden sollen, kannst du das Häkchen bei „Reguläre Ausdrücke in der URL verwenden“ setzen. Einstellungen mit einer spezifischen URL haben oberste Priorität und haben daher Vorrang vor deinen allgemeinen Einstellungen.

Kann ich eine Konfiguration in einen anderen meiner Shops kopieren?

Nein, es gibt keine Kopierfunktion. Einstellungen gehören zum jeweiligen Shop und müssen in jedem Shop separat eingerichtet werden. Wenn mehrere Shops einheitlich gestaltet werden sollen, ist es oft schneller, die Anpassungen in den Dateien des Themes vorzunehmen, damit dasselbe Theme an mehreren Stellen verwendet werden kann.

Was passiert mit meinen Einstellungen, wenn ich das Theme wechsle?

Sie bleiben im Shop erhalten. Wenn du zu einem Theme mit dem Seiten-Designer wechselst, werden sie einfach nicht mehr angezeigt, und der Menüpunkt verschwindet. Wenn du wieder zu einem Theme ohne Seiten-Designer wechselst, tauchen sie wieder auf, genau so, wie du sie hinterlassen hast.

Soll ich jetzt das Theme wechseln oder kann ich wie gewohnt weitermachen?

Du kannst beruhigt so weitermachen. Der Theme Builder funktioniert weiterhin bei den Themes, die ihn nutzen. Neue Blöcke und Funktionen kommen jedoch nur für den Page Builder hinzu. Wenn du also ohnehin eine größere Überarbeitung des Designs vorhast, ist es am sinnvollsten, dies mit einem Theme-Wechsel zu verbinden.

Warum kann ich die Seite im Admin-Bereich sehen, aber nicht im Shop?

Das liegt in der Regel an einer von drei Ursachen: Die Einstellung ist nicht auf „Aktiv“ gesetzt, die Änderungen wurden nur im Entwurf gespeichert und nicht veröffentlicht, oder das Theme ist nicht dafür ausgelegt, Theme-Builder-Inhalte anzuzeigen. Wenn du dir bezüglich des letzten Punktes unsicher bist, schreibe bitte eine E-Mail an support@shoporama.dk mit dem Namen deines Shops, dann schauen wir uns das an.