Theme-Einstellungen: So passen Sie Ihr Theme an

Ihr Theme bestimmt, wie Ihr Webshop aussieht und sich verhält. Ein gutes Theme ist jedoch keine festgelegte Vorlage. Die meisten Themes verfügen über eine Reihe von Einstellungen, die Sie selbst anpassen können, und diese sind in Shoporama an einem Ort zusammengefasst: auf der Seite „Theme-Einstellungen“. Hier kannst du Farben, Kurztexte, Bilder, Dropdown-Menüs und Ein-/Aus-Funktionen ändern, ohne auch nur eine einzige Zeile Code anzurühren.

Was sind Design-Einstellungen?

Ein Theme ist die Vorlage, die das Design deines Shops bestimmt: Startseite, Kategorieseiten, Produktseiten, Warenkorb und Kasse. Das Theme wird von einem Entwickler erstellt, entweder bei Shoporama oder bei einem Theme-Entwickler, den du selbst beauftragt hast. Bei der Erstellung des Themes kann der Entwickler bestimmte Entscheidungen an Sie als Shop-Betreiber weitergeben: „Welche Farbe sollen die Schaltflächen haben?“, „Soll oben auf der Seite eine Meldung angezeigt werden?“ oder „Wie lange ist die Lieferzeit für vorrätige Artikel?“. Genau diese Auswahlmöglichkeiten sind Theme-Einstellungen und werden automatisch auf der Seite angezeigt. Das bedeutet zweierlei:

• Du kannst nur das ändern, was das Theme als änderbar vorgesehen hat. Du kannst der Seite keine neuen Felder hinzufügen.
• Zwei Themes haben selten dieselben Einstellungen. Was dein Nachbar in seinem Theme anpassen kann, gibt es nicht unbedingt auch in deinem.

So findest du die Theme-Einstellungen

1. Melde dich in deinem Shoporama-Adminbereich an.
2. Klicken Sie im Menü auf der linken Seite auf „Shop“ und klappen Sie den Punkt „Design“ auf.
3. Klicke auf „Theme-Einstellungen“.

Unter „Design“ findest du auch die wichtigsten Optionen: „Theme“ (hier wählst du aus, welches Theme der Shop verwendet), „Texte“, „Stylesheet“, „Logo & Bedingungen“ und „Seitengestaltung“. Mehr zu den Unterschieden weiter unten.

Wichtig: Nicht alle Themes verfügen über Theme-Einstellungen

Dies ist die häufigste Quelle für Verwirrung, daher wollen wir es ganz klar sagen: Design-Einstellungen gibt es nur bei Designs, die dafür ausgelegt sind.

Die eigenen Themes von Shoporama verfügen in der Regel über zahlreiche Einstellungen, von einer Handvoll Abschnitte bis hin zu mehreren hundert Feldern. Wenn du jedoch ein maßgeschneidertes Theme bei einem Theme-Entwickler oder einer Agentur erstellen lässt , sind Theme-Einstellungen nicht automatisch enthalten. Sie müssen vom Ersteller in das Theme integriert werden, und sind sie nicht integriert, ist die Seite leer.

Ist Ihre Seite leer oder fehlt Ihnen ein bestimmtes Feld, lautet die Antwort daher fast immer: Wenden Sie sich an den Entwickler oder die Agentur, die Ihr Theme erstellt hat, und bitten Sie sie, die Einstellung einzubauen. Für jemanden, der sich mit dem Theme auskennt, ist das eine kleine Aufgabe, und du sparst dir, jedes Mal eine Änderung in Auftrag geben zu müssen, wenn du eine Farbe oder einen Text anpassen möchtest. Wenn du sehen möchtest, welche Themes Shoporama selbst zur Verfügung stellt, kannst du dir die Übersicht über die Themes bei Shoporama ansehen.

So ist die Seite aufgebaut

Alle Einstellungen sind in Abschnitte zusammengefasst, d. h. eine Überschrift mit dazugehörigen Feldern darunter, zum Beispiel „Allgemein“, „Unternehmen“, „Design & Farben“ oder „Produktseite“. Welche Ansicht du erhältst, hängt von deinem Design ab:

• Akkordeon-Ansicht: Die Abschnitte lassen sich durch Anklicken ein- und ausklappen. Oben befindet sich ein Suchfeld „In Einstellungen suchen…“, das sowohl in Abschnittsnamen, Beschreibungen als auch in Feldnamen sucht, die relevanten Abschnitte aufklappt und die gefundenen Ergebnisse hervorhebt. Der Browser merkt sich, welche Abschnitte du zuletzt geöffnet hattest.
• Kartenansicht: Jeder Abschnitt wird als Karte untereinander angezeigt, und auf der rechten Seite befindet sich unter der Überschrift „Übersicht“ eine Liste mit Verknüpfungen, über die du direkt zu einem Abschnitt springen kannst.

Die Feldtypen, auf die Sie stoßen

Der Theme-Entwickler legt für jedes Feld fest, um welchen Typ es sich handelt, und der Typ bestimmt, wie das Feld für Sie aussieht:

• Textfeld: eine einzelne Zeile für kurze Werte, von „Kostenloser Versand ab 499 kr.“ bis hin zu einem Facebook-Link oder einer durch Kommas getrennten Liste wie Dankort, Visa, MobilePay.
• Textfeld: Ein größeres Feld über mehrere Zeilen für längeren, reinen Text.
• Rich Text: Ein Feld mit einem Editor, in dem Sie Fettdruck, Links und Aufzählungen erstellen können.
• Farbe: Ein Farbmuster, auf das du klickst, mit einem kleinen Feld daneben, in dem der Hex-Code steht (zum Beispiel #2563eb). Die beiden Felder sind miteinander verknüpft, sodass du den Code entweder auswählen oder eingeben kannst.
• Ein/Aus: Ein Häkchen. Setze ein Häkchen, um die Funktion zu aktivieren, entferne das Häkchen, um sie zu deaktivieren.
• Dropdown: Eine Liste mit festen Auswahlmöglichkeiten, die vom Theme definiert wurden.
• Bild: ein Upload-Feld, zum Beispiel für ein Bild, das in sozialen Medien geteilt werden soll.

Wenn neben einem Feld statt eines Eingabefeldes „Unbekannter Typ“ steht, kannst du dies nicht korrigieren. Das bedeutet, dass das Theme einen Feldtyp verlangt, den die Seite nicht unterstützt. Leite dies an deinen Theme-Entwickler weiter.

So speicherst du deine Änderungen

Am unteren Rand der Seite befindet sich eine Schaltfläche, die beim Scrollen mitläuft: „Speichern und weiter bearbeiten“. Wenn du darauf klickst:

• werden alle Felder auf der Seite auf einmal gespeichert, auch diejenigen in Abschnitten, die du nicht geöffnet hast;
• wird der Cache des Shops automatisch geleert, sodass die Änderungen im Webshop übernommen werden;
• bleibst du auf der Seite „Theme-Einstellungen“, sodass du weiterarbeiten kannst.

Wenn du die Änderung nicht sofort im Shop siehst, führe im Browser einen harten Neuladevorgang durch (Cmd+Shift+R auf dem Mac, Strg+F5 unter Windows). Denn dein Browser speichert ebenfalls eine Kopie der Seite.

Bei Farbfeldern kann rechts neben dem Feldnamen ein kleines Kreis-Pfeil-Symbol angezeigt werden. Wenn du mit der Maus darüber fährst, wird die Standardfarbe des Themes angezeigt, zum Beispiel #111827, und ein Klick setzt das Feld auf diesen Wert zurück. Vergiss nicht, anschließend auf „Speichern“ zu klicken.

Verfügt das Theme über ein Bildfeld, siehst du ein Upload-Feld. Sobald das Bild hochgeladen und gespeichert ist, wird es als Miniaturansicht mit dem Häkchen „Bild löschen?“ darunter angezeigt. Wenn du das Bild ändern möchtest, setze dort ein Häkchen, klicke auf „Speichern“ und bearbeite weiter – dann erscheint das Upload-Feld wieder.

Farbschemata: Die gesamte Palette auf einmal ändern

Einige Themes bieten vorgefertigte Farbpaletten an. Ist dies bei deinem Theme der Fall, erscheint unter „Design“ ein zusätzlicher Menüpunkt: „Farbschemata“. Verfügt dein Theme nicht über Farbschemata, ist dieser Menüpunkt gar nicht vorhanden.

Wenn du ein Farbschema auswählst, werden die Farben direkt in dieselben Farbfelder eingetragen, die auch in den Theme-Einstellungen zu finden sind. Das ist also eine Abkürzung, um viele Farben auf einmal festzulegen, und du kannst anschließend noch Feinabstimmungen vornehmen. Wenn du später ein anderes Farbschema auswählst, werden die manuellen Anpassungen wieder überschrieben.

Was passiert, wenn du das Theme wechselst?

Die Design-Einstellungen sind designspezifisch. Jedes Design definiert seine eigenen Feldnamen, und die Werte werden in deinem Webshop unter genau diesen Namen gespeichert. Wenn du das Design wechselst, bedeutet das in der Praxis:

• Das neue Theme zeigt seine eigenen Felder an. Deine alten Werte werden nicht übernommen, und du musst damit rechnen, alles von Grund auf neu einzurichten.
• Deine alten Werte gehen nicht verloren. Wenn du zum vorherigen Theme zurückwechselst, sind die Einstellungen weiterhin vorhanden.
• Logo, Favicon, AGB, Menüs und Produktdaten liegen außerhalb der Theme-Einstellungen und werden von einem Theme-Wechsel nicht beeinflusst.

Planen Sie einen Theme-Wechsel daher als kleine Aufgabe und nicht als einen einfachen Klick. Machen Sie gerne zuerst einen Screenshot Ihrer wichtigsten Bereiche, damit Sie die Texte im neuen Theme schnell wiederherstellen können.

Was gehört nicht in die Theme-Einstellungen?

Viele suchen an der falschen Stelle. Die kurze Checkliste:

• Feste Texte im Shop wie „In den Warenkorb“ und „Zur Kasse“ passen Sie unter „Design“, „Texte“ an. Siehe „Texte in Ihrem Webshop übersetzen und anpassen“.
• Logo, Favicon und AGB legst du unter „Design“, „Logo & AGB“ fest.
• Eigenes CSS, also die Feinabstimmung des Designs über die Möglichkeiten des Themes hinaus, nehmen Sie unter „Design“, „Stylesheet“ vor. Siehe „Eigenes Stylesheet (Custom CSS)“.
• Inhalte auf der Startseite und den Landingpages, wie Banner und Produktreihen, erstellst du im Seiten-Designer.
• Tracking-Codes für Google Analytics, Meta und Ähnliches richtest du unter „Konto“, „Webshop“, „Tracking“ ein.

Nützliche Tipps, die sich auf das Endergebnis auswirken

Jede Änderung, die Sie hier selbst vornehmen können, ist eine Änderung, für die Sie weder einen Entwickler bezahlen noch warten müssen. Wo sich das in der Regel am meisten auszahlt:

• Die Topbar-Meldung ist der sichtbarste Bereich des Shops. Nutze sie aktiv für Versandkostenfrei-Grenzen, Aktionen und den letzten Bestelltermin vor Weihnachten, anstatt sie das ganze Jahr über mit demselben Text stehen zu lassen.
• Die USP-Texte oben auf der Seite schaffen kostengünstig Vertrauen. Formulieren Sie konkret („Lieferung innerhalb von 1–3 Werktagen“) statt vage („Schnelle Lieferung“).
• Lieferzeiten und die Symbole für Zahlung und Versand müssen mit den tatsächlichen Angaben an der Kasse übereinstimmen. Falsche Angaben führen zu Support-E-Mails, und nicht passende Symbole kosten Conversions.
• Ändere bei der Anpassung der Farbenjeweils nur eine Sache, damit du weißt, was gewirkt hat.

Für technisch Versierte

Das Formular wird direkt aus der Datei „theme_settings.json“ im Stammverzeichnis des Themes generiert. Ist die Datei nicht vorhanden, gibt es keine Einstellungen anzuzeigen. Die Datei enthält ein „settings“-Array mit Abschnitten. Sowohl Abschnitte als auch Felder verfügen über „path“, „name“ und eine optionale „description“, und Felder haben darüber hinaus einen „type“:

{
  "accordion": true,
  "settings": [
    {
      "path": "topbar",
      "name": "Topbar-Meldung",
      "description": "Eine Meldung oben auf der Seite anzeigen",
      "fields": [
        { "path": "enabled", "name": "Aktivieren", "type": "bool" },
        { "path": "text", "name": "Text", "type": "string" },
        { „path“: „bg“, „name“: „Hintergrundfarbe“, „type“: „color“, „default_value“: „#111827“ }
      ]
    }
  ]
}

• Unterstützte Typwerte: string, text, wysiwyg, color, bool, list, image. Andere Werte, zum Beispiel number und textarea, werden als „Unbekannter Typ“ dargestellt. Verwenden Sie string für kurze Werte, einschließlich Zahlen, und wysiwyg für Rich-Text.
• Die Werte sind in den Vorlagen des Themes als $settings.Sektion.Feld verfügbar, d. h. der Pfad der Sektion gefolgt vom Pfad des Feldes.
• Ein Standardwert füllt das Feld nur in der Verwaltung vorab aus. Der Wert ist erst dann im Shop vorhanden, wenn auf „Speichern“ geklickt wurde; daher muss die Vorlage selbst berücksichtigen, dass der Wert möglicherweise fehlt.
• „default_value“ bei einem Farbfeld steuert das Symbol zum Zurücksetzen. Ein Listenfeld muss ein „values“-Array mit Objekten enthalten, die „value“ und „name“ haben.
• Wenn du „accordion“ auf „true“ setzt, wird die Akkordeon-Ansicht verwendet. Andernfalls wird die Kartenansicht verwendet.
• Unabhängig davon: Befindet sich im Stammverzeichnis des Themes eine Datei „color_scheme.json“ mit einer „schemes“-Liste, wird der Menüpunkt „Farbschemata“ unter „Design“ automatisch hinzugefügt.
• Die Werte werden pro Webshop und pro Feldname gespeichert, nicht pro Theme. Wenn zwei Themes denselben Abschnitts- und Feldnamen verwenden, teilen sie sich den Wert.
• Theme-Einstellungen können auch über die REST-API von Shoporama gelesen und gesetzt werden, was praktisch ist, wenn dieselbe Konfiguration auf mehrere Webshops ausgeweitet werden soll.

Häufig gestellte Fragen

Ich kann die Theme-Einstellungen nicht finden oder die Seite ist komplett leer. Was soll ich tun?

Die Seite befindet sich unter „Design“, „Theme-Einstellungen“. Ist sie leer, verfügt Ihr Theme über keine integrierten Einstellungen, was bei maßgeschneiderten Themes völlig normal ist. Wenden Sie sich an den Entwickler oder die Agentur, die das Theme erstellt hat, und bitten Sie sie, die gewünschten Felder einzurichten. Shoporama kann keine Felder zu einem Theme hinzufügen, das nicht von uns erstellt wurde.

Ich habe gerade mein eigenes Theme erstellen lassen. Warum habe ich nicht dieselben Einstellungen wie bei den Shoporama-Themes?

Weil die Einstellungen Teil des Themes selbst sind und keine Funktion, die alle Themes automatisch erhalten. Die eigenen Themes von Shoporama sind mit vielen Einstellungen ausgestattet. Ein maßgeschneidertes Theme verfügt genau über die Einstellungen, die Ihr Entwickler integriert hat – weder mehr noch weniger. Besprechen Sie dies am besten bereits bei der Bestellung des Themes mit dem Entwickler.

Wie kann ich feststellen, ob meine Änderung im Shop übernommen wurde?

Klicke auf „Speichern“ und bearbeite weiter, öffne dann den Shop in einem neuen Tab und führe einen harten Neuladevorgang durch (Cmd+Shift+R auf dem Mac, Strg+F5 unter Windows). Shoporama leert den Cache des Shops automatisch, wenn du speicherst. Wenn du also immer noch die alte Version siehst, liegt das in der Regel daran, dass dein Browser die alten Daten beibehält.

Kann ich Schaltflächentexte wie „In den Warenkorb“ von hier aus ändern?

Nein. Feste Texte im Shop bearbeitest du unter „Design“, „Texte“. Die Theme-Einstellungen dienen für die Werte, die das Theme selbst vorgibt, zum Beispiel deinen eigenen Kampagnentext oben auf der Seite oder deine USP-Texte.

Ich habe mehrere Webshops mit demselben Theme. Kann ich die Einstellungen von einem Shop in den anderen kopieren?

Es gibt keine Kopier-Schaltfläche auf der Seite, und die Einstellungen werden pro Webshop gespeichert, sodass du sie in jedem Shop einzeln einrichten musst. Wenn du viele Shops oder viele Felder hast, kann ein Entwickler die Theme-Einstellungen über die REST-API von Shoporama auslesen und einstellen, sodass die Einrichtung automatisch übernommen werden kann.

Gehen meine Einstellungen verloren, wenn ich ein anderes Theme ausprobiere und es mir dann doch nicht gefällt?

Nein. Die Einstellungen werden beim Wechsel des Themes nicht gelöscht. Das neue Theme zeigt lediglich seine eigenen Felder an, die zunächst leer sind. Wenn du wieder zurückwechselst, sind deine alten Werte weiterhin vorhanden. Beachte jedoch, dass sich das Erscheinungsbild des Shops sofort ändert; wähle daher am besten einen Zeitpunkt mit wenigen Besuchern.

Neben einem meiner Felder steht „Unbekannter Typ“. Ist etwas kaputt?

Der Shop funktioniert einwandfrei, aber das Feld lässt sich nicht bearbeiten. Das bedeutet, dass das Theme einen Feldtyp verlangt, den die Seite nicht unterstützt. Leite die Meldung an deinen Theme-Entwickler weiter, damit dieser den Feldtyp im Theme korrigieren kann.

Wir haben den Versanddienstleister gewechselt. Wo kann ich die Symbole in der Fußzeile ändern?

Wenn dein Theme ein Feld dafür hat, befindet es sich in der Regel im ersten Abschnitt der Theme-Einstellungen als kommagetrennte Liste, zum Beispiel postnord,gls,dao. Der Hilfetext des Feldes gibt genau an, welche Werte das Theme kennt. Ist das Feld nicht vorhanden, werden die Symbole fest im Theme vorgegeben, und dann muss Ihr Theme-Entwickler eingreifen.