Seiten bauen ohne HTML – der xoContentEditor
Gestaltete Landingpages, Kategorietexte und Produktbeschreibungen zusammenklicken statt programmieren: Sie wählen Bausteine, füllen Felder aus und sehen in der Vorschau, wie die Seite auf dem Desktop und am Handy angeordnet ist. Dieser Leitfaden führt vom Einschalten bis zur fertigen Seite und erklärt, wie Sie Widgets fremder Dienste einbinden.
Der Leitfaden als Video (3:25 Min.): einschalten, Aufbau des Baukastens, Bausteine einfügen, Layout für Desktop und Mobil, Vorschau, Vorlagen und fremde Widgets. Kapitel und Transkript finden Sie auf der Videoseite. Untertitel lassen sich im Player einschalten. Sprecherstimme KI-generiert.
Auf einen Blick
- Wo: CMS-Seiten, Kategorien (Beschreibung und SEO-Text), Produkte, News, FAQ und Hersteller. Ein Schalter über dem Inhaltsfeld schaltet den Baukasten ein, je Sprache.
- Aufbau: Eine Seite besteht aus Inhaltsblöcken. Jeder Block hat bis zu 16 Elemente, und jedes Element ist einer von 22 Bausteinen.
- Vorschau: Desktop und Mobil nebeneinander. Schriften und Farben Ihres Shops sehen Sie erst auf der Seite im Shop.
- Vorlagen: Einen fertigen Aufbau speichern Sie als Vorlage und setzen ihn auf anderen Seiten oder in anderen Sprachen wieder ein.
- Fremde Widgets: Skript-Code entfernt der Editor beim Speichern. Für Trusted Shops, das Google Store-Widget, Sovendus und den PayPal-Hinweis „Später bezahlen“ hat der Shop eigene Einstellungen.
- Freischaltung: Der xoContentEditor ist ein Zusatzmodul. Er ist in den XONIC-Paketen ab Basic enthalten, in älteren Vertragsmodellen nicht. Ohne Freischaltung erscheint der Schalter nicht. XONIC Premium: Content Editor
In diesem Leitfaden
Was der xoContentEditor macht
Ein Baukasten statt eines Textfelds.
Ohne den xoContentEditor tippen Sie Inhalte in ein einzelnes großes Textfeld. Alles, was über Fließtext und ein eingefügtes Bild hinausgeht – zwei Spalten nebeneinander, Karten mit Bild und Button, eine Zeitleiste, ein Kundenzitat –, müssten Sie als HTML von Hand schreiben oder programmieren lassen.
Mit dem xoContentEditor setzen Sie die Seite stattdessen aus fertigen Bausteinen zusammen. Jeder Baustein bringt seine eigenen Eingabefelder mit: Der Baustein „Card“ fragt nach Bild, Titel, Text und Button-Ziel und sorgt selbst dafür, dass das Ergebnis auf jedem Bildschirm sauber aussieht. Sie füllen aus, das Layout entsteht automatisch.
Wo Sie ihn einsetzen können
Sechs Bereiche im Backend – überall dieselbe Bedienung.
CMS-Seiten
Landingpages, „Über uns“, Ratgeber, Aktionsseiten. Unter CMS → CMS-Manager, Schalter „Inhalt (xoContentEditor)“ über dem Feld „Inhalt der CMS-Seite“.
Kategorien
Beschreibung und SEO-Text, jeweils mit eigenem Schalter „xoContentEditor verwenden“. So wird aus einer Produktliste eine Themenseite. Unter Produkte → Kategorien / Produkte.
Produkte
Die Produktbeschreibung als gestaltete Seite mit Vergleichstabelle, Reitern und Detailbildern. Schalter „Produktbeschreibung (xoContentEditor)“.
News
Beiträge mit Zwischenüberschriften, Zitaten und Bildstrecken. Unter CMS → Newsartikel, Schalter „Inhalt (xoContentEditor)“. Auch die Biografie der Autoren lässt sich so gestalten.
FAQ
Antworten mit Aufklapp-Bereichen, Hinweisboxen und Tabellen. Unter CMS → FAQ-Artikel, Schalter „Inhalt (xoContentEditor)“.
Hersteller
Markenseiten mit Logo, Markengeschichte und ausgewählten Produkten. Unter Produkte → Hersteller, Schalter „xoContentEditor verwenden“.
Einschalten – ein Klick pro Feld
Der Editor ersetzt das Textfeld nicht, er tritt an seine Stelle.
Ist der Schalter „Inhalt (xoContentEditor)“ eingeschaltet, steht an der Stelle des Textfelds der Baukasten mit seiner Kopfleiste und den Inhaltsblöcken dieser Sprache. Zum Vergrößern anklicken.
Über dem Inhaltsfeld steht ein Schalter. Ist er aus, sehen Sie das gewohnte Textfeld. Schalten Sie ihn ein, erscheint an derselben Stelle der Baukasten. Je nach Bereich heißt der Schalter „Inhalt (xoContentEditor)“, „Produktbeschreibung (xoContentEditor)“ oder „xoContentEditor verwenden“.
Der Schalter gilt je Sprache. Sie können die deutsche Fassung einer Seite mit dem Baukasten bauen und die englische zunächst als einfachen Text lassen – oder umgekehrt.
Die Oberfläche: Inhaltsblöcke mit drei Spalten
Oben die Kopfleiste, darunter die Inhaltsblöcke. Jeder Block hat Struktur, Bearbeitung und Vorschau.
So sieht der geöffnete Editor aus. Die drei Spalten arbeiten zusammen: Sie wählen links ein Element aus, füllen es in der Mitte aus und sehen rechts, wie es angeordnet ist.
Kopfleiste
„Alle einklappen“ schließt alle Blöcke, „Vorlagen-Manager“ öffnet die Vorlagen. Der Knopf „neues Element hinzufügen“ in der Kopfleiste und am Ende der Liste legt einen neuen Inhaltsblock an.
Ein Block heißt im Backend „Flexibles Layout“. Mehrere Blöcke stehen untereinander; ihre Reihenfolge ändern Sie, indem Sie den Kopf eines Blocks ziehen.
Kopf eines Inhaltsblocks
Der Kopf zeigt die Zahl der Elemente. Mit dem Schalter „aktiv“ blenden Sie einen Block im Shop aus, ohne ihn zu löschen. Das gilt ab dem nächsten Speichern.
Der Papierkorb entfernt den ganzen Block sofort und ohne Rückfrage aus der Maske. Gelöscht ist er erst mit dem Speichern – verlassen Sie die Seite ohne Speichern, bleibt er erhalten.
Zwei Knöpfe, zwei Aufgaben: „neues Element hinzufügen“ in der Kopfleiste legt einen neuen Inhaltsblock an, „Neues Element hinzufügen“ unter der Struktur ein weiteres Element in diesem Block. Zum Vergrößern anklicken.
1. Struktur
Die Liste der Elemente dieses Blocks. „Neues Element hinzufügen“ hängt ein Element an, höchstens 16 je Block. Per Ziehen sortieren Sie die Elemente um; das setzt die Reihenfolge für Desktop und Mobil gleich.
2. Bearbeitung
Die Felder des gewählten Elements. Ganz oben stehen die Reiter „Inhalt“ und „Layout & Darstellung“. Im Reiter „Inhalt“ folgen ein eigener Name für das Element (er erscheint in der Vorschau über der Kachel) und der Komponenten-Typ, danach die Felder des Bausteins. „Element entfernen“ im Kopf löscht das Element nach Rückfrage; das letzte Element eines Blocks bleibt stehen.
3. Vorschau
Zwei Ansichten nebeneinander: Desktop und Mobil. Sie sehen im selben Blick, ob eine dreispaltige Kartenreihe am Handy noch funktioniert. Ein Klick auf eine Kachel wählt das Element aus.
In 6 Schritten zur ersten Seite
Beispiel: eine Themenseite als CMS-Seite oder als Kategorie.
| Schritt | Was Sie tun | Worauf Sie achten sollten |
|---|---|---|
| 1 | Seite anlegen – als CMS-Seite unter CMS → CMS-Manager (Reiter „Einfügen“) oder als Kategorie unter Produkte → Kategorien / Produkte. | Eine Kategorie erscheint wie jede Kategorie in der Navigation. Eine CMS-Seite verlinken Sie im Footer oder mit „CMS-Seite in Header-Navigation verlinken“ in der Kopfzeile, siehe CMS-Manager. |
| 2 | Den Schalter über dem Inhaltsfeld einschalten. | Der Schalter gilt je Sprache – für jede Sprachfassung einzeln setzen. |
| 3 | Im ersten Element als Komponenten-Typ „Hero / Bühne“ wählen. | Der Hero ist der große Kopfbereich mit Bild, Überschrift und Button – das Erste, was der Besucher sieht. |
| 4 | Mit „Neues Element hinzufügen“ weitere Elemente anhängen: Text, Karten, Produktliste, Kundenstimme. | Reihenfolge später per Ziehen änderbar. Erst grob bauen, dann feilen. Ab 16 Elementen einen neuen Inhaltsblock anlegen. |
| 5 | Rechts in der Vorschau beide Ansichten prüfen. | Besonders bei Tabellen und mehrspaltigen Reihen lohnt der Blick auf die Mobil-Ansicht. |
| 6 | Speichern. | Danach die Seite im Shop öffnen, bei CMS-Seiten über „Im Shop ansehen“. Erst dort sehen Sie sie mit Ihren Schriften und Farben. |
Tipp für den Anfang: Bauen Sie Ihre erste Seite nicht auf einer wichtigen Bestandsseite. Legen Sie eine neue CMS-Seite an, verlinken Sie sie nirgends und schalten Sie „in XML-Sitemaps für Suchmaschinen verlinken“ aus. Über „Im Shop ansehen“ prüfen Sie das Ergebnis, ohne dass Kunden die Seite finden. Eine inaktive Seite zeigt der Shop dagegen gar nicht an, auch Ihnen nicht.
Bausteine wählen und füllen
Ein Auswahlfeld entscheidet, welche Eingabefelder Sie bekommen.
So gehen Sie vor
Ein neues Element ist leer. Sie wählen im Feld Komponenten-Typ, was daraus werden soll, und der Editor lädt die passenden Eingabefelder nach.
Der Typ lässt sich später ändern. Felder, die der neue Baustein nicht kennt, werden dabei verworfen. Die Einstellungen im Reiter „Layout & Darstellung“ bleiben erhalten. Wenn Sie unsicher sind, legen Sie ein neues Element an und löschen das alte, sobald das neue steht.
Im Text-Baustein wählen Sie Überschriften (Kopfzeile 2 bis 6) über das Auswahlfeld der Werkzeugleiste. ab 4.9.0
Layout für Desktop und Mobil
Breite, Reihenfolge und Sichtbarkeit stellen Sie je Element ein, Hintergrund und Karussell je Block.
Je Element: „Layout & Darstellung“
Im Reiter „Layout & Darstellung“ stellen Sie Breite, Einrückung, Reihenfolge und Ausrichtung getrennt für Desktop und Mobil ein, darunter Sichtbarkeit und Hintergrundfarbe. Zum Vergrößern anklicken.
Mit dem Umschalter „Desktop“ / „Mobil“ legen Sie für beide Ansichten getrennt fest:
- Breite, Offset (Einrückung links) und Reihenfolge,
- vertikale und horizontale Ausrichtung.
Darunter stehen „Sichtbarkeit“ (Immer sichtbar, Nur Desktop, Nur Mobile), die Hintergrundfarbe, „Individuelle Klassen“ und eine „Individuelle ID“, etwa für einen Link auf genau diese Stelle der Seite. „Desktop“ meint Bildschirme ab 1.200 Pixel Breite.
Je Block: „Widget-Optionen“
Die Widget-Optionen gelten für den ganzen Block: hier ein Farbband über die volle Breite, in dem drei Kundenstimmen als Karussell laufen. Zum Vergrößern anklicken.
Der aufklappbare Bereich „Widget-Optionen (Breite, Hintergrund, Darstellung)“ gilt für den ganzen Block:
- Breite: Seitenbreite, volle Breite mit Inhalt im Container oder volle Breite randlos – für Farbbänder über die ganze Bildschirmbreite.
- Hintergrund: Farbe oder Bild, wahlweise mit Parallax-Effekt, dazu ein vertikaler Innenabstand.
- Darstellung: Raster oder „Karussell / Slider“ mit Autoplay, Pfeilen, Punkten und mehreren Karten je Slide.
„Hero / Bühne“ und „Produktliste / Produkt-Slider“ nehmen immer die volle Breite ihres Blocks ein; die Breitenfelder blendet der Editor für sie aus.
Der Bausteinkatalog
22 Bausteine – nach Aufgabe sortiert, mit ihrem Namen im Auswahlfeld.
| Baustein | Wofür er gedacht ist |
|---|---|
| Text & Struktur | |
| Text | Fließtext mit optionaler Überschrift und Textausrichtung – der meistgenutzte Baustein. |
| Hero / Bühne | Großer Kopfbereich mit Schlagzeile, Unterzeile, Button und Hintergrundbild, wahlweise mit dunkler oder heller Abdeckung und Mindesthöhe. |
| Tabs / Tab-Navigation | Mehrere Inhalte platzsparend hinter Reitern. |
| Accordion / Aufklappbare Bereiche | Abschnitte zum Auf- und Zuklappen – ideal für Fragen und Antworten. |
| Leer / Abstandshalter | Leerraum oder eine freie Spalte; am Handy wie am Desktop, ausgeblendet oder mit eigenem Abstand. |
| Bild & Medien | |
| Bild | Einzelbild mit Bildtitel (Alt-Text), Abrundung bis zum Kreis, Bildausschnitt und Bildfokus. Einen Link hat der Bild-Baustein nicht. |
| Video | YouTube, Vimeo oder eine eigene Videodatei, mit Autoplay (stumm) und Endlosschleife. |
| Card / Kachel mit Bild, Text und Button | Bild, Titel, Text und Button als geschlossene Einheit – der Baustein für Kachelreihen. |
| Icon-Box / Feature-Box | Symbol, Überschrift und kurzer Text, wahlweise als Link auf die ganze Kachel – für Vorteile und Leistungen. |
| Verkaufen & überzeugen | |
| Produktliste / Produkt-Slider | Echte Artikel aus Ihrem Shop mitten im Text – aus einer Kategorie, per „Produkte auswählen“ oder aus Bestsellern, Neuheiten und Angeboten. Als Galerie oder Liste, wahlweise als Slider, mit Warenkorb-Button. |
| Button / Call-to-Action | Ein einzelner Knopf mit Ziel, Stil und Symbol. |
| CTA-Callout / Icon + Text + Button | Hervorgehobener Kasten mit Überschrift, Text und Button – der klassische Abschluss einer Argumentation. |
| Testimonial / Kundenbewertung | Zitat mit Name, Position oder Firma, Profilbild und Sternebewertung. |
| Counter / Animierter Zähler (aufwärts) | Kennzahl, die beim Scrollen hochzählt – für Jahre Erfahrung, zufriedene Kunden, Artikel im Sortiment. |
| Countdown / Runterzähler (Live-Shopping, Release) | Rückwärtslaufende Uhr bis zu einem Zeitpunkt, danach Ihre Ablauf-Nachricht. |
| Information | |
| Table / Responsive Tabelle | Vergleiche und technische Daten, am Handy seitlich scrollbar. |
| Timeline / Zeitleiste | Abläufe und Firmengeschichte als Folge von Meilensteinen. |
| Alert / Hinweis-Box | Farbige Box für Warnungen, Tipps und Erfolgsmeldungen, wahlweise schließbar. |
| Map / Karten-Einbettung | Landkarte von OpenStreetMap oder Google Maps mit Markierung. „Koordinaten aus Adresse ermitteln“ füllt die Position aus Ihrer Adresse. Google Maps braucht einen Schlüssel unter Einstellungen → Design → Allgemein → Google-Maps API Key. |
| Kontakt & Technik | |
| Formular / eingebettetes Formular | Ein unter CMS → Formulare angelegtes Formular an dieser Stelle. |
| Newsletter / Anmeldeformular | Anmeldung zum Newsletter, auf Wunsch mit Anrede und Namen. Eine Bestätigungsmail geht raus, wenn das Double-Opt-in eingeschaltet ist. |
| Code / eigenes HTML ab 4.9.21 | Eigenes HTML für alles, was keinen eigenen Baustein hat, etwa ein verlinktes Bild oder eine Einbettung per iframe. Wird nicht übersetzt. Skript-Code entfernt der Editor, siehe Fremde Widgets. |
Die Vorschau richtig lesen
Zwei Ansichten und zwei Darstellungsarten.
Desktop und Mobil nebeneinander
Die Vorschau zeigt beide Ansichten gleichzeitig, mit Breite, Einrückung, Ausrichtung und Reihenfolge. Was auf dem Desktop drei Karten nebeneinander sind, wird am Handy zu drei untereinander – das sehen Sie sofort, statt es später zu entdecken.
Pseudo oder Live
Oben in der Vorschau schalten Sie zwischen „Pseudo“ und „Live“ um. Pseudo zeigt je Element eine Kachel mit Symbol und Bausteinnamen – ideal, um Aufteilung und Reihenfolge zu prüfen. Live zeigt eine verkleinerte Kurzfassung der Inhalte mit gekürzten Texten. Beide Ansichten sind Backend-Skizzen; Schriften, Farben und Abstände Ihres Shops sehen Sie nur auf der geöffneten Seite im Shop.
Vorlagen: einen Aufbau wiederverwenden
Einmal gebaut, beliebig oft eingesetzt – auch in anderen Sprachen.
Vorlage speichern
Im Reiter „Anwenden“ ersetzt eine Vorlage den bisherigen Aufbau oder wird ans Ende angehängt; ohne den Haken „Inhalte der Vorlage übernehmen“ kommt nur das Gerüst. Zum Vergrößern anklicken.
- Die Seite erst speichern. Als Vorlage taugt nur ein gespeicherter Stand.
- „Vorlagen-Manager“ in der Kopfleiste öffnen, Reiter „Speichern“.
- Einen Namen eintragen (Pflicht in der Standardsprache, andere Sprachen optional).
- „Inhalte mitspeichern“ an lassen, um Texte und Bilder mitzunehmen, oder ausschalten, um nur Aufbau und Layout zu speichern.
- „Als Vorlage speichern“.
Im Reiter „Verwalten“ benennen Sie Vorlagen um oder löschen sie, unter „Import/Export“ tauschen Sie sie als Datei mit einem anderen Shop aus.
Vorlage anwenden
Im Reiter „Anwenden“ wählen Sie eine Vorlage („Vorschau“ zeigt sie vorher) und dann:
- „Ersetzen (bestehenden Inhalt überschreiben)“ – der bisherige Aufbau dieser Sprache wird ersetzt.
- „Einfügen (an Inhalt anhängen)“ – die Blöcke der Vorlage kommen ans Ende.
Ohne den Haken „Inhalte der Vorlage übernehmen“ kommt nur das leere Gerüst.
Wichtig: Anwenden lädt die Seite neu – ungespeicherte Änderungen in anderen Feldern gehen dabei verloren. Danach die Seite einmal speichern, sonst zeigt der Shop weiter die alte Fassung.
Aufbau in eine andere Sprache übernehmen
Speichern Sie die fertige deutsche Fassung als Vorlage mit Inhalten. Wechseln Sie in den Sprachreiter der Zielsprache, schalten Sie dort den Baukasten ein, speichern Sie und wenden Sie die Vorlage mit „Ersetzen“ an. Danach tauschen Sie die Texte gegen die Übersetzung.
Vorlagen ohne Bezug zu einer Seite legen Sie unter CMS → Vorlagen-Manager (xoContentEditor) mit „Neue Vorlage“ an.
Fremde Widgets und eigenes HTML
Bewertungssiegel, Partner-Gutscheine, Ratenzahlungs-Hinweise: erst die eingebaute Anbindung, dann der Code-Baustein.
Was der Code-Baustein kann
Der Baustein „Code / eigenes HTML“ eignet sich für eine Einbettung per iframe; Skripte entfernt der Editor beim Speichern. Zum Vergrößern anklicken.
„Code / eigenes HTML“ gibt Ihr HTML ohne Umbau und ohne Übersetzung aus – mit einer Ausnahme, siehe unten. Das passt für ein verlinktes Bild, eine Einbettung per <iframe> oder Markup aus einem alten Editor-Inhalt. Bilder tragen Sie mit vollem Pfad ein, etwa images/quellbilder/kategorien/bild.jpg.
<script>-Code, Ereignis-Attribute wie onclick und javascript:-Links – auch im Code-Baustein und in der Quelltext-Ansicht des Text-Bausteins. Widgets, die ein Skript des Anbieters brauchen, funktionieren deshalb nicht im xoContentEditor. Bietet der Anbieter eine Einbettung per iframe an, nehmen Sie diese.Diese Dienste hat der Shop eingebaut
Für die folgenden Dienste fügen Sie keinen Code ein, sondern tragen Ihre Kennung in den Einstellungen ein. Den Code eines eingebauten Dienstes zusätzlich selbst einzufügen, lädt ihn doppelt.
Den Bewertungsbanner von Trusted Shops richten Sie in den Einstellungen ein: Widget Tag aktivieren, Widget-ID je Sprache eintragen und die Position wählen. Zum Vergrößern anklicken.
| Dienst | Wo Sie ihn einrichten | Wann er erscheint |
|---|---|---|
| Trusted Shops: Trustbadge und Bewertungsbanner | Einstellungen → Schnittstellen → Bewertungsportale → Trusted Shops: „Trusted Shops IDs“ je Sprache, „Trustbadge anzeigen“ und im Abschnitt „eTrusted Widget Tag (Reviews-Banner)“ die Felder „Widget Tag aktivieren“, „Widget-IDs (pro Sprache)“ und „Position“ (direkt vor dem Footer, im Footer oben oder im Footer unten). Die Widget-IDs beginnen mit wdg-; Sie finden sie im Trusted Shops Control Center unter „Widgets“. | Nur in Sprachen mit eingetragener ID und, solange das Cookie-Fenster aktiv ist, erst nachdem der Besucher „Trusted Shops GmbH“ zugestimmt hat. |
| Google Store-Widget und Google Kundenrezensionen | Einstellungen → Schnittstellen → SEO/SEA → Google Dienste: „Google Merchant Center ID (Store-Widget & Kundenrezensionen)“ und „Google Store-Widget: Anzeige auf“ (nur Bestellabschluss oder alle Seiten). Mehr im Leitfaden Google Werkzeuge. | Sobald die ID eingetragen ist, auf den gewählten Seiten. Am Handy bleibt es ausgeblendet, solange „Google Store-Widget: Auf Mobile ausblenden“ an ist (Vorgabe). Ab 4.9.144 erscheint es erst nach Zustimmung im Cookie-Fenster. ab 4.9.144 |
| Sovendus | Einstellungen → Schnittstellen → SEO/SEA → Sovendus: „Sovendus: Traffic Source Number (je Sprache)“ und „Sovendus: Traffic Medium Number (je Sprache)“. | Von selbst auf der Bestellabschlussseite. Ab Werk erst nach Zustimmung im Cookie-Fenster, siehe „Sovendus: Verhalten ohne Einwilligung“. |
| PayPal „Später bezahlen“ | In der Zahlart PayPal Checkout: „PayPal-Widget anzeigen (Produktdetailansicht)“ und „PayPal-Widget anzeigen (Warenkorb)“, siehe Zahlungsarten. | Auf der Produktseite bei Preisen bis 2.000 Euro und, solange das Cookie-Fenster aktiv ist, nach Zustimmung zu „PayPal Marketing Solutions“; im Warenkorb bis 5.000 Euro. |
Bilder, KI-Kennzeichnung und externe Inhalte
Was bei Bildern, Videos und Karten zu beachten ist.
Bilder über „Bild einfügen“
Wählen Sie Bilder über den Knopf „Bild einfügen“ neben dem Bildfeld. Das Feld speichert den Dateinamen aus dem Bilderordner der Kategorien. Den Bildtitel füllen Sie für Suchmaschinen und Screenreader aus.
Findet der Shop eine Bilddatei nicht, meldet er das beim Speichern: „Diese Bilder konnten nicht gefunden werden und werden im Frontend nicht angezeigt“. ab 4.9.21
KI-Bilder kennzeichnen
An Bild, Card, Hero, Kundenstimme, Video-Vorschaubild und am Hintergrundbild eines Blocks gibt es den Schalter „KI-generiert – Hinweis anzeigen“. Er blendet im Shop den Hinweis „KI-generiert“ über dem Bild ein.
Position und Darstellung legen Sie unter Einstellungen → Design → KI-Kennzeichnung fest. Nach einer Änderung dort bestehende Seiten neu erzeugen, siehe Gut zu wissen. ab 4.10
Video und Karte
Video- und Karten-Bausteine binden Inhalte von YouTube, Vimeo, Google Maps oder OpenStreetMap ein. Nennen Sie diese Dienste in Ihrer Datenschutzerklärung. Eine eigene Videodatei liegt in Ihrem Shop und kommt ohne externen Anbieter aus.
Ab 4.9.144 zeigt der Shop Videos von YouTube und Vimeo sowie Google-Maps-Karten erst, nachdem der Besucher zugestimmt hat. ab 4.9.144
Was dabei herauskommt
Zwei Beispielseiten, vollständig mit dem Baukasten gebaut – ohne eine Zeile HTML.
Beide Seiten sind als Kategorie angelegt und stehen dadurch in der Kategorienavigation. Der Unterschied zu einer gewöhnlichen Kategorieseite: Statt nur einer Produktliste steht dort eine vollständig gestaltete Seite – und die Produkte sind mittendrin eingebettet, dort wo sie zum Text passen.
Gut zu wissen
Die Punkte, die im Alltag am häufigsten Fragen auslösen.
Änderungen wirken beim Speichern
Der Editor legt beim Speichern eine fertige Fassung der Seite ab – das macht die Auslieferung im Shop schnell. Verbessert ein Shop-Update einen Baustein, übernehmen bestehende Seiten das erst, wenn Sie sie erneut speichern.
Alle Seiten auf einmal erzeugen Sie unter CMS → Vorlagen-Manager (xoContentEditor), Reiter „Migration“, mit „Alle Inhalte neu rendern“ neu.
Produktlisten bleiben aktuell
Anders als der übrige Inhalt werden eingebundene Produktlisten bei jedem Seitenaufruf frisch geladen. Preise, Verfügbarkeit und Sortiment stimmen also immer – auch wenn die Seite seit Monaten unverändert ist.
Findet die Liste keine Artikel, verschwindet sie ohne Hinweis. Ob Artikel aus Unterkategorien mitzählen, entscheidet die Einstellung „verwende Unterkategorien im Kategorielisting“. Inaktive Kategorien kennzeichnet die Kategorieauswahl.
Jede Sprache ist eigenständig
Der Aufbau wird nicht von selbst in andere Sprachen übernommen. Bauen Sie die Seite in Ihrer Hauptsprache fertig und übertragen Sie sie per Vorlage. Die automatische DeepL-Übersetzung übersetzt die fertige Seite; Code-, Video- und Formular-Bausteine lässt sie unberührt. In der Zielsprache entsteht dabei kein Baukasten. Ist er dort eingeschaltet, überschreibt das nächste Speichern dieser Sprache die Übersetzung mit dem Aufbau aus dem Baukasten.
Daten für Suchmaschinen
Enden die Überschriften in einem Aufklapper mit einem Fragezeichen, erzeugt der Shop auf Kategorie- und CMS-Seiten ab zwei Fragen FAQ-Daten für Suchmaschinen („JSON-LD: FAQPage aus Frage-Antwort-Inhalten (Kategorie/CMS)“). Produktlisten meldet er als Artikelliste („JSON-LD: ContentEditor-Elemente (Produktliste als ItemList)“). Beide Schalter stehen unter Einstellungen → SEO / SEA → SEO Einstellungen und sind ab Werk an.
Häufige Fragen
Wo füge ich das Trusted-Shops-Widget ein?
Welche Angaben braucht das Trusted-Shops-Widget im Footer?
wdg-, zu finden im Trusted Shops Control Center unter „Widgets“) und als Position „Im Footer (oben, im Container)“ oder „Im Footer (unten, vor Subfooter)“.Warum sehen manche Besucher das Trusted-Shops-Widget nicht?
Wo binde ich ein Google-Bewertungs-Widget ein?
Warum erscheint ein Partner-Widget doppelt, etwa Sovendus auf der Bestellbestätigung?
Warum erscheint der PayPal-Hinweis „Später bezahlen“ nicht immer?
Mein Code im Baustein „Code / eigenes HTML“ ist nach dem Speichern weg. Warum?
<script>-Code, onclick und ähnliche Attribute. Reines HTML und iframes bleiben erhalten. Für Dienste mit eigener Anbindung nutzen Sie die Einstellungen des Shops; für alles andere sprechen Sie uns an.Ich habe den Schalter ausgeschaltet. Ist mein Aufbau weg?
Warum zeigt der Shop meine Änderung nicht?
Beim Speichern einer großen Seite erscheint „Die Übertragung des Formulars war unvollständig“. Was tun?
max_input_vars; lassen Sie den Wert von Ihrem Hoster bzw. uns erhöhen und speichern Sie erneut. Gilt für CMS-Seiten, Kategorien, News, FAQ und Hersteller. ab 4.9.32Warum bleibt meine Produktliste leer?
Weiterführende Leitfäden
Und jetzt?
Am schnellsten lernt man den Baukasten, indem man eine Seite baut.
Legen Sie eine neue, nirgends verlinkte Seite an und bauen Sie eine Themenseite zu Ihrem meistverkauften Produkt: Kopfbereich, drei Vorteile als Icon-Boxen, ein Absatz Text, die passende Produktliste, eine Kundenstimme, ein Handlungsaufruf. Das sind sechs Elemente und etwa eine halbe Stunde – danach kennen Sie die Bedienung. Speichern Sie das Ergebnis als Vorlage, dann ist die nächste Themenseite schneller fertig.
