Startseite gestalten
Slider, Banner, Begrüßungstext, Produktblöcke wie Neuheiten und Sonderangebote, Kacheln mit Kategorie-Links, Kopfzeile, Footer und Popups: Dieser Leitfaden zeigt, wo Sie jeden Bereich Ihrer Startseite pflegen, und beantwortet die Fragen, die uns im Support am häufigsten erreichen.
Auf einen Blick
- Begrüßungstext: unter CMS → CMS-Manager im Baustein
$cms_startseite, je Sprache. - Slider: unter Einstellungen → Design → Slider; die Bildmaße für Desktop und Mobilgeräte unter Einstellungen → Design → Bilder.
- Produktblöcke: Neuheiten, Sonderangebote, Bestseller und eigene Inhalte samt Reihenfolge unter Einstellungen → Design → Produktauflistung → Konfigurator für Produktpräsentation und Vermarktung. Jeder Block zeigt 4 bis 16 Produkte, auf Smartphones die Hälfte.
- Kopfzeile und Footer: Telefonnummer und Vorteile in den „Kopfzeilen-Argumenten“, Footer-Links und Copyright in den Bausteinen
$cms_footer_naviund$cms_footer. - Popup: die Hinweisbox
$cms_adviceist Ihr frei gestaltbares Popup. Die Wartungsseite erscheint bei jeder Datensicherung.
In diesem Leitfaden
So ist die Startseite aufgebaut
Die Startseite setzt sich aus Bereichen zusammen, die Sie an verschiedenen Stellen im Backend pflegen. Im Standard-Template stehen sie in dieser Reihenfolge untereinander. Ein leerer oder abgeschalteter Bereich fällt einfach weg.
| Bereich | Wo Sie ihn pflegen |
|---|---|
| Banner über dem Slider | Tools → Bannermanager, Bannergruppe „index_static“, siehe Banner |
| Slider | Einstellungen → Design → Slider, siehe Slider |
| Begrüßungstext | CMS → CMS-Manager, Baustein $cms_startseite, siehe Startseitentext |
| Kacheln der Hauptkategorien | Einstellungen → Design → Allgemein, siehe Kacheln |
| Produktberater | Produkte → Produktberater, Schalter „auf Startseite anzeigen“ |
| Produktblöcke wie Neuheiten, Sonderangebote und Bestseller, dazwischen eigene Inhalte | Einstellungen → Design → Produktauflistung, siehe Produktblöcke |
| Icon-Zeile mit Ihren Vorteilen | Einstellungen → Design → Allgemein → Mittelbereich-Argumente, siehe Icon-Zeile |
| News | CMS → Newsartikel; wie viele auf der Startseite stehen, legt Einstellungen → Design → Newsartikel → Startseite Anzahl Artikel fest (ab Werk 10), siehe Leitfaden Newsartikel |
| SEO-Text | CMS → CMS-Manager, Baustein $cms_seo_startseite |
| Markenlogos | Produkte → Hersteller, je Hersteller der Schalter „Hersteller auf Startseite hervorheben“ |
Die Startseite im Standard-Template von oben nach unten: Slider, Begrüßungstext, Kacheln der Hauptkategorien, ein Produktblock und die Icon-Zeile mit Ihren Vorteilen. Zum Vergrößern anklicken.
Kopfzeile, Menü und Footer gehören zu jeder Seite, sie stehen weiter unten unter Kopfzeile und Footer. Die Reihenfolge der Bereiche ändern Sie nicht über eine Einstellung. Was zwischen den Produktblöcken steht, bestimmen Sie dagegen selbst, siehe Eigene Inhalte. Arbeiten Sie mit einem eigenen Template, kann Ihre Startseite anders aufgebaut sein.
Startseitentext und SEO-Text
Der Begrüßungstext unter dem Slider und der zusätzliche Text weiter unten sind zwei Bausteine im CMS-Manager: $cms_startseite und $cms_seo_startseite.
- Unter CMS → CMS-Manager im Suchfeld „startseite“ eingeben. Die Liste zeigt beide Bausteine.
- Bei
$cms_startseiteim Aktionsmenü „Bearbeiten“ wählen und den Text im Reiter jeder Sprache pflegen. Der Name des Bausteins ist fest und erscheint nicht im Shop. - Speichern und die Startseite neu laden.
Wenn der Text fehlt
Der Shop zeigt den Text nur, wenn beim Baustein „Status“ eingeschaltet ist und es Text in der Sprache des Besuchers gibt. Einen Rückfall auf Deutsch gibt es nicht. Stehen zwei aktive Einträge mit demselben Namen im CMS-Manager, bleibt die Stelle leer. Ein eigenes, älteres Template braucht außerdem den Platzhalter für den Text.
Überschrift entfernen
Einen Schalter für die Überschrift hat der Begrüßungstext nicht: Die Überschrift, ab Werk „Willkommen …“, ist Teil des Textes. Löschen Sie sie im Editor. Bei einer CMS-Seite, die Sie zwischen die Produktblöcke setzen, blendet die Spalte „Titel“ den Namen aus, siehe Eigene Inhalte.
SEO-Text unten
$cms_seo_startseite steht unten auf der Startseite, unter den News. Er erscheint nur, wenn Einstellungen → SEO / SEA → SEO Einstellungen → SEO Profieinstellungen eingeschaltet ist und der Baustein Text enthält, nicht nur ein Bild.
Textfarbe, Ausrichtung und Formate setzen Sie mit der Werkzeugleiste des Editors. Mit dem xoContentEditor bauen Sie den Text aus Bausteinen wie Karten, Bildern und Knöpfen, siehe Leitfaden xoContentEditor. Wie Seiten und Bausteine im CMS-Manager grundsätzlich funktionieren, erklärt der Leitfaden CMS-Manager & E-Mails.
Slider der Startseite
Den großen Bildwechsel oben auf der Startseite pflegen Sie unter Einstellungen → Design → Slider im Reiter „Slider anpassen (Startseite)“. Der Reiter erscheint, solange der Schalter „Slider“ auf derselben Seite eingeschaltet ist.
- „Slider-Element hinzufügen“ legt einen neuen Slide an. Der Shop empfiehlt 3 bis 6 Slides, damit die Startseite schnell lädt.
- Im Kopf des Slides stehen Name und „Status“. Im aufgeklappten Slide wählen Sie den „Slidertyp“ und legen das Ziel fest. „Sortierung“ bestimmt die Reihenfolge, kleine Zahl zuerst. Mit „Startdatum“ und „Enddatum“ zeigen Sie einen Slide nur in einem Zeitraum, beide Tage eingeschlossen; leer heißt unbegrenzt.
- Im Reiter jeder Sprache „Slidername“ (er dient auch als Alternativtext des Bildes), „Grafik“ und bei Bedarf „Grafik (Mobile)“ eintragen. Statt eines Bildes geht ein „Video“ im Format MP4, auch mit eigener Fassung für Mobilgeräte.
- „Beschreibung“ ist der Text auf dem Bild. „Slidertext-Ausrichtung“ setzt ihn links, zentriert oder rechts, „Slidertext-Breite (in %)“ legt seine Breite fest. Der Text liegt auf einem halbdurchsichtigen hellen Kasten: Nehmen Sie dunkle Schrift, weiße ist dort nicht lesbar.
- Speichern. Zum Entfernen klicken Sie im Kopf des Slides auf den roten Papierkorb und speichern.
Ein Slide der Startseite: Linkziel, Reihenfolge und Zeitraum stehen im Kopf, Bilder und Text im Reiter der Sprache. Zum Vergrößern anklicken.
Bildgrößen für Desktop und Smartphone
Welche Maße
Die Maße stehen unter Einstellungen → Design → Bilder: „Breite des Sliders (groß)“ und „Höhe des Sliders (groß)“ für Desktop, „Breite des Sliders (groß/mobil)“ und „Höhe des Sliders (groß/mobil)“ für Mobilgeräte. Ab Werk sind beide 2280 × 962 Pixel, also Querformat. Laden Sie Bilder in genau diesem Seitenverhältnis hoch; die Maske nennt die aktuellen Werte unter dem Bildfeld. Ändern Sie die Maße, erzeugt der Shop die verkleinerten Fassungen neu.
Wann das Mobilbild erscheint
Smartphones und Tablets erkennt der Shop an der Kennung des Browsers, nicht an der Fensterbreite. Sie bekommen die „Grafik (Mobile)“, sonst die normale Grafik, beide auf die Mobil-Maße gebracht. Ein Mobilbild wirkt nur, wenn auch eine normale Grafik eingetragen ist. Wollen Sie mobil ein Hochformat zeigen, stellen Sie die Mobil-Maße auf Hochformat und hinterlegen für jeden Slide ein Mobilbild, sonst wird die normale Grafik stark beschnitten.
Weiße Balken am Bild
Weicht das Seitenverhältnis Ihres Bildes von den Maßen ab, schneidet der Shop es passend zu, solange unter Einstellungen → Design → Bilder → Crop Funktion für Bilder „slider“ ausgewählt ist (ab Werk der Fall). Ohne diese Auswahl setzt er das ganze Bild ein und füllt den Rest mit „Thumbnails: Hintergrundfarbe“, ab Werk Weiß. Mit „Fullscreen Slider“ bleiben auf Bildschirmen, die breiter sind als „Breite des Sliders (groß)“, links und rechts Flächen frei.
Text auf dem Smartphone
Eine eigene Beschreibung für Mobilgeräte gibt es nicht. Auf Smartphones steht die Beschreibung zentriert, „Slidertext-Breite (in %)“ gilt dort nicht. Halten Sie den Text deshalb kurz, damit er das Bild nicht verdeckt.
Tauschen Sie ein Bild aus, laden Sie es unter einem neuen Dateinamen hoch. Der Shop erzeugt die verkleinerten Fassungen nur für Dateien, die er noch nicht kennt; unter dem alten Namen sehen Besucher womöglich weiter das alte Bild.
Einstellungen des Sliders
| Feld unter Einstellungen → Design → Slider | Wirkung |
|---|---|
| „Slider“ | schaltet alle Slider im Shop ein oder aus, auch die an Kategorien, CMS-Seiten und News |
| „Wechselintervall“ | Anzeigedauer je Slide in Millisekunden, ab Werk 5000 (5 Sekunden) |
| „Geschwindigkeit“ | Dauer des Übergangs in Millisekunden, ab Werk 1000 |
| „Slider-Effekt“ | Art des Übergangs, ab Werk „fade“ (Überblenden) |
| „Kontrollelemente anzeigen“, „Seitenzähler“ | Pfeile bzw. Punkte zum Blättern; die Punkte erscheinen erst ab zwei Slides |
| „Fullscreen Slider“ | Slider über die ganze Bildschirmbreite statt in der Breite des Shops |
| „Video-Slider: Helligkeit (in %)“, „Video-Slider: Unschärfe“ | Filter für Videos im Slider, etwa damit Text darauf lesbar bleibt |
Linkziele
Der „Slidertyp“ legt fest, wohin ein Klick führt: „Link auf Kategorie“, „Link auf Produkt“, „Link auf CMS-Seite“, „Individueller Link“ oder „Bild/Video“ ohne Link. Beim individuellen Link tragen Sie die vollständige Adresse mit https:// ein. Eine Angabe wie „/aktion/“ ergänzt der Shop zu einer ungültigen Adresse, und der Klick endet auf einer Fehlerseite. Was der Shop bei gelöschten oder deaktivierten Zielen macht, steht im Leitfaden Erste Schritte.
Slider an Kategorien, CMS-Seiten und News
Eigene Slider pflegen Sie direkt in der Kategorie (Bereich „Kategorieslider“), in der CMS-Seite („CMS-Slider“) und im Newsartikel („News-Slider“). Ein eigener Schalter ist dafür nicht nötig: Der Bereich steht schon beim Anlegen einer Kategorie bereit, solange „Slider“ eingeschaltet ist. Hat eine Kategorie einen Slider, blendet „Kategorie-Headerbild ausblenden“ unter Einstellungen → Design → Allgemein in der Werkseinstellung ihr Kategoriebild aus.
Banner-Manager
Werbebanner für feste Plätze im Shop pflegen Sie unter Tools → Bannermanager. Wo ein Banner erscheint, entscheidet seine „Bannergruppe“.
- Einen neuen Banner anlegen und die „Bannergruppe“ wählen, siehe Tabelle.
- Im Reiter jeder Sprache „Name des Banners“, „Banner-URL (inkl. http://)“ und „Bannerbilddatei“ eintragen, für Smartphones und Tablets zusätzlich „Bannerbilddatei (Mobil)“. Statt eines Bildes oder darunter ist „HTML Text“ möglich.
- Optional „Gültigkeit ab“ und „Gültigkeit bis“ bzw. eine Zahl an Anzeigen, nach der der Banner endet.
- „Status“ einschalten und speichern. Ein neuer Banner ist zunächst inaktiv.
Ein Banner für die Startseite: Gruppe „index_static“, vollständige Zieladresse und je ein Bild für Desktop und Mobilgeräte. Zum Vergrößern anklicken.
Die Positionen
| Bannergruppe | Wo der Banner erscheint |
|---|---|
| „index_static“ | nur auf der Startseite, ganz oben über dem Slider |
| „header_static“ | oben auf jeder Seite |
| „footer_static“ | im Fußbereich jeder Seite |
| „left_smooth“, „right_smooth“ | schmaler Banner am linken bzw. rechten Rand, der nach einigen Sekunden einfährt; nur auf größeren Bildschirmen, der Besucher kann ihn schließen |
| „box“ | in der Box „Werbebox“; sie muss im Boxenmanager aktiv sein |
| „offcanvas_nav“ | als Kachel im linken Menü auf dem Smartphone, höchstens zweiab 4.10 |
Link auf eine Aktion
Tragen Sie in „Banner-URL“ die vollständige Adresse der Zielseite ein, etwa die Ihrer Aktionskategorie, in jeder Sprache. Eine Auswahlliste für Kategorien gibt es hier nicht. Banner öffnen ihr Ziel in einem neuen Tab; Anzeigen und Klicks zählt die „Statistik“ im Aktionsmenü.
Mobile Ansicht
Smartphones und Tablets zeigen nur die „Bannerbilddatei (Mobil)“. Fehlt sie, sehen sie nur den HTML-Text oder gar nichts; das normale Bild springt nicht ein. Hinterlegen Sie deshalb immer beide Bilder.
Mehrere Banner, Sprachen
Sind in einer Gruppe mehrere Banner aktiv, zeigt der Shop bei jedem Seitenaufruf einen davon zufällig. Bei einem neuen Banner übernimmt der Shop leere Sprachen aus der Standardsprache. „Gültigkeit bis“ ist der erste Tag, an dem der Banner nicht mehr erscheint.
Produktblöcke: Neuheiten, Angebote, Bestseller
Welche Produktreihen auf der Startseite stehen, in welcher Reihenfolge und mit wie vielen Produkten, legen Sie an einer Stelle fest: Einstellungen → Design → Produktauflistung → Konfigurator für Produktpräsentation und Vermarktung.
- Jede Zeile ist ein Block. Die Spalte „Typ / Zielseite“ sagt, was er zeigt und wo, etwa „Neuheiten & Kauftipps / Startseite“. Für die Startseite zählen nur die Zeilen mit „/ Startseite“; dieselbe Tabelle steuert auch die Blöcke auf Kategorie-, Produkt- und Herstellerseiten und im Warenkorb.
- Einen Block fügen Sie mit „Neuer Eintrag“ hinzu, zum Entfernen klicken Sie in seiner Zeile auf den Papierkorb. Eine Zeile, deren „Anzahl“ leer oder 0 ist, verwirft der Shop beim Speichern.
- Die Reihenfolge der Zeilen ist die Reihenfolge auf der Seite. Ziehen Sie eine Zeile mit der Maus nach oben oder unten.
- Speichern. Die Startseite zeigt den neuen Stand beim nächsten Aufruf.
Jede Zeile ist ein Block; die Zeilen mit „/ Startseite“ stehen in dieser Reihenfolge auf der Startseite, hier mit einer CMS-Seite zwischen Neuheiten und Sonderangeboten. Zum Vergrößern anklicken.
Die Spalten einer Zeile
| Spalte | Wirkung |
|---|---|
| „Listingstyle“ | „gal“ zeigt Kacheln, „list“ eine Liste, „special“ eine Spezialansicht über die volle Breite. |
| „Sortierung“ | Reihenfolge der Produkte im Block, etwa „Sortierreihenfolge aufsteigend“, „Erstellungsdatum absteigend“, „Bestellanzahl absteigend“, „Aufrufe absteigend“ oder „Zufällige Reihenfolge“. Für Sonderangebote gibt es zusätzlich „Sonderangebot: Erstellungsdatum“ und „Sonderangebot Ablaufzeit“. |
| „Anzahl“ | Höchstzahl der Produkte. Der Shop zeigt mindestens 4 und höchstens 16, auf Smartphones und Tablets die Hälfte. |
| „Slider“ | Ja: alle Produkte in einer Reihe zum Blättern. Nein: die Produkte stehen in mehreren Zeilen untereinander. |
| „Hintergrund“ | Hintergrundfarbe des Blocks. Sie gilt genau für diese Zeile; zuvor galt die Farbe einer Zeile für alle Zeilen desselben Typs.ab 4.9.135 |
| „Titel“ | zeigt die Überschrift des Blocks oder blendet sie aus |
| „Volle Breite“ | Der Block reicht über die ganze Bildschirmbreite statt über die Breite des Shops. |
| letzte Spalte | Auswahl der Kategorie bei „Produkte aus Kategorie“, der CMS-Seite bei „CMS-Seite“ und des Herstellers bei Zeilen für Herstellerseiten |
Bei Zeilen vom Typ „CMS-Seite“ blendet der Konfigurator Listingstyle, Sortierung und Anzahl aus, „Slider“ ist dort gesperrt.
Die Blöcke für die Startseite
| Typ | Welche Produkte |
|---|---|
| „Neuheiten & Kauftipps“ | Produkte mit „Produkt als Neuheit/Kauftipp (Top-New)“, siehe Neuheiten |
| „Highlights“ | Produkte mit „Produkt als Highlight“ (Produktmaske, Reiter „Allgemein“, mit „Highlight von/bis“) bzw. aus Produkte → Highlights |
| „Sonderangebote“ | Produkte mit aktivem Sonderpreis aus Produkte → Sonderangebote für die Kundengruppe des Besuchers. Für Kundengruppen, bei denen unter Kunden → Kundengruppen „Sonderpreise anzeigen“ aus ist, fehlt der Block. |
| „Bestseller“ | Produkte mit der höchsten Bestellanzahl, siehe Bestseller |
| „Promotion“ | Produkte mit „Produkt-Promotion“ (Produktmaske, Reiter „Allgemein“, mit „Promotion von/bis“) |
| „Bald verfügbare Produkte“ | Produkte, deren „Erscheinungsdatum“ heute oder später liegt; eine Übersicht zeigt Produkte → Erwartete Produkte |
| „Produkte aus Kategorie“ | Produkte der Kategorie aus der letzten Spalte, mit „verwende Unterkategorien im Kategorielisting“ (ab Werk an) samt Unterkategorien. Diesen Typ dürfen Sie mehrfach anlegen. |
| „Bundleprodukte“, „Bewertungen“, „Gratisprodukte“ | Bundles, hervorgehobene Bewertungen („Promotion-Status“ unter Produkte → Produktbewertungen) bzw. die Gratisprodukte des Bonusprogramms |
| „CMS-Seite“ | keine Produkte, sondern der Inhalt einer CMS-Seite, siehe Eigene Inhalte. Auch mehrfach möglich. |
In allen Blöcken stehen nur aktive Produkte, die der Besucher sehen darf. Ausverkaufte Produkte fehlen, wenn Einstellungen → Checkout → Warenbestand → Ausverkaufte Produkte wegblenden aktiv ist. Varianten erscheinen nur über ihren Hauptartikel, solange „Slaves in Produktslidern“ unter Einstellungen → Design → Produktauflistung aus ist. Die Überschriften der Blöcke ändern Sie unter Tools → xoLanguage.
Neuheiten auf die Startseite bringen
- Prüfen, dass es die Zeile „Neuheiten & Kauftipps / Startseite“ gibt, sonst mit „Neuer Eintrag“ anlegen.
- Produkte auswählen: in der Produktmaske im Reiter „Allgemein“ „Produkt als Neuheit/Kauftipp (Top-New)“ einschalten, auf Wunsch mit „Top-New von/bis“. Für mehrere Produkte auf einmal gibt es Produkte → Top-New Produkte.
- Steht Einstellungen → Design → Produktauflistung → Neuheiten und Kauftipps "Top-New" auf Ja (ab Werk), füllt der Shop den Block zusätzlich mit Produkten auf, die in den letzten Wochen angelegt wurden; wie viele Wochen, legt „Dauer Produktmarkierung "Neu"“ fest (ab Werk 4). Auf Nein zeigt der Block nur Ihre Top-New-Produkte.
So entstehen die Bestseller
Jedes Produkt hat einen Zähler für die bestellte Stückzahl. Er steigt mit jeder Bestellung im Shop und mit importierten Marktplatz-Bestellungen; bei Varianten zählt der Hauptartikel mit. Der Block zeigt Produkte mit mindestens einer Bestellung, ab Werk sortiert nach „Bestellanzahl absteigend“. Gutscheine und Gratisprodukte gelten nicht als Bestseller. Wählen Sie eine andere „Sortierung“, wählt der Shop aus denselben Produkten andere aus.
Einen Block entfernen
Ob „Neuheiten & Kauftipps“, „Bestseller“ oder „Bald verfügbare Produkte“: Löschen Sie die Zeile mit „/ Startseite“ über den Papierkorb und speichern Sie. Mit „Neuer Eintrag“ holen Sie den Block jederzeit zurück. Der Schalter „Bald verfügbare Produkte“ in derselben Gruppe wirkt sich auf die Startseite nicht aus; maßgeblich ist allein die Zeile im Konfigurator.
Sortierung der Sonderangebote
Stellen Sie in der Zeile „Sonderangebote / Startseite“ die „Sortierung“ ein: „Sonderangebot Ablaufzeit aufsteigend“ zeigt zuerst die Angebote, die bald enden, „Sonderangebot: Erstellungsdatum absteigend“ die neuesten. Für die eigene Seite mit allen Sonderangeboten gilt eine eigene Einstellung: „Produktsortierung (Sonderangebots-Seite)“ in derselben Gruppe.
Eigene Inhalte zwischen den Produktblöcken
Ein Aktionsbild, ein Hinweis oder ein Text zwischen „Neuheiten“ und „Sonderangeboten“: Dafür legen Sie eine CMS-Seite an und setzen sie als eigene Zeile in den Konfigurator.
- Unter CMS → CMS-Manager eine Seite anlegen, „Status“ und „Shop Contentseite (kann im Shop aufgerufen und verlinkt werden)“ eingeschaltet lassen und den Inhalt gestalten, auf Wunsch mit dem xoContentEditor. Nur solche Seiten bietet der Konfigurator an.
- Im Konfigurator mit „Neuer Eintrag“ eine Zeile anlegen, als Typ „CMS-Seite / Startseite“ wählen und in der letzten Spalte die Seite.
- „Titel“ ausschalten, wenn der Name der Seite nicht als Überschrift erscheinen soll; „Volle Breite“ einschalten für ein Bild über die ganze Bildschirmbreite.
- Die Zeile an die gewünschte Stelle ziehen und speichern.
So stellen Sie zum Beispiel Neuheiten über ein Aktionsbild: zuerst die Zeile „Neuheiten & Kauftipps / Startseite“, darunter die CMS-Seite mit dem Bild. Über Slider und Begrüßungstext rücken Produktblöcke im Standard-Template nicht. Mit der Zielseite „Warenkorb“ zeigt dieselbe Zeile den Inhalt der CMS-Seite unten im Warenkorb, etwa einen Hinweis zu Lieferzeiten.
Kacheln mit Kategorie-Links
Klickbare Kacheln, die in Kategorien führen, bekommen Sie auf zwei Wegen: automatisch aus Ihren Hauptkategorien oder frei gestaltet im Begrüßungstext.
Automatisch: Hauptkategorien als Kacheln
Mit Einstellungen → Design → Allgemein → Hauptkategorien auf Startseite anzeigen (ab Werk an) zeigt die Startseite unter dem Begrüßungstext je Hauptkategorie eine Kachel mit Bild, Name und Kurzbeschreibung. Die Reihenfolge folgt der „Sortierreihenfolge“ der Kategorien.
- Bild: das „Bild“ der Kategorie. „Kategoriebilder auf der Startseite ausblenden“ in derselben Gruppe zeigt nur Text.
- Text: die „Kurzbeschreibung“ der Kategorie, wenn „Kurzbeschreibung auch für Kategorien und CMS-Seiten aktivieren“ eingeschaltet ist.
- Spalten: Einstellungen → Design → Produktauflistung → Kategorie-Kacheln: Spaltenanzahl, getrennt für Smartphone, Tablet und Desktop.
- Weiterleitung: Steht in der Kategorie der „Seitentyp“ auf „Interne Verlinkung“ oder „Externe Verlinkung“, führt ihre Kachel direkt zu dieser Adresse. So wird eine Kachel zum Link auf eine Aktion, eine CMS-Seite oder eine andere Kategorie.
Frei gestaltet: eigene Kacheln
Eigene Kacheln mit Bild, Text und Knopf bauen Sie im Begrüßungstext oder in einer CMS-Seite zwischen den Produktblöcken, am einfachsten mit dem Baustein „Karte“ des xoContentEditors, siehe Leitfaden xoContentEditor. Soll die ganze Kachel anklickbar sein und nicht nur der Knopf, öffnen Sie im normalen Texteditor mit dem Knopf „Quellcode“ den HTML-Code und setzen an das umschließende div das Attribut data-xo-href="ziel-adresse/"; für ein neues Fenster zusätzlich data-xo-href-target="_blank".
Icon-Zeile mit Ihren Vorteilen
Die Zeile mit Symbolen und kurzen Texten wie „Versand in 24 Stunden“ oder „Kauf auf Rechnung“ sind die „Mittelbereich-Argumente“.
- Unter Einstellungen → Design → Allgemein → Mittelbereich-Argumente mit „Neuer Eintrag“ je Vorteil eine Zeile anlegen.
- „Sprache“ wählen („---“ gilt für alle Sprachen), ein „Icon“ aus der Auswahl und den Text eintragen.
- Die Reihenfolge per Ziehen festlegen und speichern.
Die drei Einträge der Icon-Zeile von der Startseite oben, jeweils mit Sprache, Icon und Text. Zum Vergrößern anklicken.
Die Icon-Zeile steht unter den Produktblöcken, auf der Startseite ebenso wie auf Kategorie- und Herstellerseiten. Auf Smartphones und Tablets zeigt sie jeweils einen Eintrag und wechselt alle 4,5 Sekunden. Die gleiche Liste für die schmale Leiste ganz oben auf jeder Seite heißt „Kopfzeilen-Argumente“, siehe Kopfzeile.
Kopfzeile: Telefonnummer, Vorteile, Siegel
Die schmale Leiste ganz oben über dem Logo füllen Sie mit den „Kopfzeilen-Argumenten“. Dort steht auch die Telefonnummer, denn ein eigenes Telefonfeld für die Kopfzeile gibt es nicht.
- Unter Einstellungen → Design → Header (Kopfbereich) → Kopfzeilen-Argumente die Tabelle öffnen. Jede Zeile ist ein Eintrag mit „Sprache“, „Icon“ und Text.
- Für die Telefonnummer den bestehenden Eintrag ändern oder mit „Neuer Eintrag“ einen anlegen, etwa mit dem Telefon-Symbol und dem Text
<a href="tel:+4930123456">030 123456</a>. „---“ als Sprache gilt für alle Sprachen. - Speichern. Auf dem Desktop stehen alle Einträge nebeneinander, auf Smartphones und Tablets wechseln sie alle 4,5 Sekunden. Im Checkout ist die Leiste ausgeblendet.
Die Nummer steht an mehreren Stellen
Die Kopfzeile übernimmt keine Nummer von anderer Stelle. Ändert sich Ihre Telefonnummer, passen Sie sie deshalb an drei Stellen an: in den Kopfzeilen-Argumenten, in den „Footer-Kontaktdaten“ (siehe Footer) und unter Einstellungen → Allgemein → Grundeinstellungen → Shopadresse und Kontaktdaten. Letztere nutzt der Shop für die Kontaktseite, die E-Mails und die Angaben für Suchmaschinen.
Siegel und Zertifikate
Ein eigenes Siegelfeld hat die Kopfzeile nicht. Einen kurzen Hinweis wie „Geprüfter Shop“ setzen Sie als Kopfzeilen-Argument mit passendem Icon, ein Siegelbild als Banner der Gruppe „header_static“ (siehe Banner). Das Siegel von Trusted Shops richten Sie unter Einstellungen → Schnittstellen → Bewertungsportale → Trusted Shops ein.
Logobreite, Höhe des Kopfbereichs sowie Warenkorb-, Merkzettel- und Sprachauswahl stellen Sie in derselben Gruppe ein; die Logodatei selbst ist „Shoplogo“ unter Einstellungen → Allgemein → Grundeinstellungen. Das Menü mit den Kategorien erklärt der Leitfaden Kategorie-Navigation.
Footer: Links, Kontakt, Logos, Copyright
Der Footer setzt sich aus Textbausteinen im CMS-Manager und den Feldern unter Einstellungen → Design → Footer (Fußbereich) zusammen.
| Was Sie ändern möchten | Wo |
|---|---|
| Links der Spalte „Informationen“ (Widerrufsrecht, Versandkosten, Datenschutz, AGB, Impressum, Kontakt) | CMS → CMS-Manager, Baustein $cms_footer_navi |
| Copyright-Zeile mit Jahr und Preishinweis ganz unten | CMS → CMS-Manager, Baustein $cms_footer |
| Bereich zwischen den Spalten und der unteren Zeile | CMS → CMS-Manager, Baustein $cms_footer_middle |
| Spalte „Kontakt“: Telefon, Mobil, Fax, E-Mail, WhatsApp, Adresse, jeweils mit Erreichbarkeitszeiten | „Footer-Kontaktdaten“ |
| Logoleisten „Unsere Bezahlarten“ und „Unsere Versandarten“ | „Zahlungsmethoden im Footer“, „Versandmethoden im Footer“ |
| heutiges Datum in der unteren Zeile | „Datumsanzeige im Footer an/aus“ |
| Widerrufsbutton unter den Links | „Widerrufsbutton im Footer an/aus“, siehe Leitfaden Widerrufsbutton |
| Symbole Ihrer Social-Media-Kanäle | Einstellungen → Design → Social Media, je Kanal die Adresse bzw. der Name |
Link ändern oder ergänzen
$cms_footer_navi ist eine Liste mit Links. Einen Link entfernen Sie, indem Sie seinen Listenpunkt im Editor löschen. Eine eigene CMS-Seite verlinken Sie über den Link-Knopf des Editors; die Seite braucht dafür „Shop Contentseite (kann im Shop aufgerufen und verlinkt werden)“. Einen Schalter „im Footer anzeigen“ an der CMS-Seite gibt es nicht. Mehr im Leitfaden CMS-Manager & E-Mails.
Jahr und Uhrzeiten
Das Jahr im Copyright ist fester Text in $cms_footer und zählt nicht von selbst hoch; ab Werk steht dort ein Beispieltext. Eine Uhrzeit zeigt der Footer nicht an. Öffnungs- oder Servicezeiten tragen Sie in den „Footer-Kontaktdaten“ beim Eintrag in die Spalte „Zusatzinformationen“ ein, je Sprache.
Logos der Zahl- und Versandarten
Je Zeile wählen Sie ein Logo und die CMS-Seite, auf die es verlinkt, etwa „Lieferung und Zahlung“. Zur Wahl stehen Ihre installierten Zahlarten und gängige Marken wie Visa, Mastercard, Apple Pay oder Wero, aber keine Zahlungsdienstleister wie Stripe oder Unzer. Klarna, Amazon Pay und Revolut Pay gibt es auch ohne eigenes Modul.ab 4.9.138
Footer-Kontaktdaten mit Erreichbarkeitszeiten in den Zusatzinformationen und die Logos der Zahlungsmethoden, die auf eine CMS-Seite verlinken. Zum Vergrößern anklicken.
Boxen über dem Footer
Unter CMS → Boxenmanager pflegen Sie kleine Kästen mit Text, News oder Umfragen. Sie stehen in einer Spalte links, wenn Einstellungen → Design → Allgemein → Boxenspalte anzeigen die Seitenart enthält, sonst als Reihe direkt über dem Footer. Ab Werk ist keine Seitenart ausgewählt.
- Eigenen Text zeigt eine „Contentbox“: Box bearbeiten, im Reiter jeder Sprache „Inhalt der Box“ füllen, „Box aktivieren“ einschalten. Bei den mitgelieferten Boxen erzeugt der Shop den Inhalt selbst; dort ändern Sie nur Name, Layout, Sortierung und Sichtbarkeit.
- Mit „auf Startseite anzeigen“ und der Kategorieauswahl legen Sie fest, wo eine Box erscheint. Eine Auswahl nach Kundengruppe gibt es nicht.
- Für Beiträge aus sozialen Netzwerken über dem Footer eignet sich eine Contentbox mit Bild und Link; ein Feed-Baustein ist nicht eingebaut. Betten Sie in Boxen keine Inhalte fremder Anbieter wie Videos oder Feeds ein: Anders als in CMS-Seiten fragt der Shop dort nicht vorher nach der Einwilligung, und Skripte entfernt er beim Speichern.
Popups und Hinweisbox
Ein frei gestaltbares Popup für Ihre Besucher ist die Hinweisbox. Daneben gibt es Popups mit festem Zweck: Newsletter-Anmeldung und die Vorauswahl von Kundengruppe, Lieferland oder Währung.
Hinweisbox: Ihr eigenes Popup
- Unter CMS → CMS-Manager den Baustein
$cms_advicebearbeiten und den Text in jeder Sprache eintragen, etwa einen Hinweis auf Betriebsferien. - Unter Einstellungen → Allgemein → Wartungsarbeiten → Hinweisbox auf Startseite anzeigen einschalten.
- Abschalten nur über diesen Schalter. Der Schalter „Status“ des Bausteins ist im CMS-Manager ausgegraut, wie bei den meisten mitgelieferten Bausteinen.
So verhält sich die Hinweisbox
Trotz des Namens erscheint sie auf jeder Seite, nicht nur auf der Startseite, bis der Gast sie mit „Hinweis gelesen“ schließt; danach bleibt sie bis zum Ende seines Besuchs zu. Angemeldete Kunden sehen sie nicht. Ein Klick daneben oder die Escape-Taste schließen sie nicht. Ist der Baustein leer, erscheint keine Hinweisbox.
Popups mit festem Zweck
| Popup | Einschalten unter |
|---|---|
| Newsletter-Anmeldung | Einstellungen → Schnittstellen → E-Mail-Marketing / CRM → E-Mailoptionen → Newsletter Popup: an/aus, Details im Leitfaden Newsletter |
| Kundengruppe (Privat oder Firma) | Einstellungen → Checkout → Kundendetails → Kundengruppenvorauswahl Popup |
| Lieferland | Einstellungen → Checkout → Versand/Verpackung → Lieferlandvorauswahl an/aus |
| Währung nach Standort | Einstellungen → Checkout → Allgemein → Währungswechsel anbieten (IP-Erkennung) |
Pro Seitenaufruf öffnet der Shop höchstens ein Popup, in fester Reihenfolge: zuerst der Cookie-Hinweis, dann die Vorauswahl von Shop, Währung, Kundengruppe und Lieferland, danach die Hinweisbox und zuletzt das Newsletter-Popup. Das nächste Popup kommt erst, wenn der Besucher das vorige erledigt hat und eine weitere Seite aufruft.
Wartungsseite beim Backup
Während der Shop seine Datenbank sichert, sehen Besucher eine Wartungsseite. Wie oft das passiert, stellen Sie selbst ein.
Wann sie erscheint
Bei jeder Datensicherung, automatisch oder von Hand unter Tools → Datenbanktools → Datenbanksicherung, und beim Zurückspielen einer Sicherung. Nach dem Ende der Sicherung ist der Shop sofort wieder offen, spätestens nach 15 Minuten. Kontaktseite und Impressum bleiben erreichbar.
Wie oft
Einstellungen → Allgemein → Wartungsarbeiten → Datenbank Autobackup ist der Abstand in Tagen, ab Werk 7. Eine Uhrzeit gibt es nicht: Die Sicherung startet, sobald nach Ablauf der Frist ein Administrator mit Zugriff auf die Datenbanksicherung eine Seite im Backend öffnet. Mit 0 ist das Autobackup aus; sichern Sie dann regelmäßig von Hand.
Text und Hängenbleiben
Den Text der Seite ändern Sie unter „Mitteilung Autobackup“ in derselben Gruppe, je Sprache. Bleibt die Wartungsseite nach einer abgebrochenen Sicherung stehen, beenden Sie sie unter Tools → Datenbanktools → Datenbanksicherung mit dem Knopf „'Wartungsarbeiten wegen Backup' löschen“.
Häufige Fragen
Wo bearbeite ich die Inhalte der Startseite?
$cms_startseite), den Slider unter Einstellungen → Design → Slider, die Produktblöcke unter Einstellungen → Design → Produktauflistung. Die Tabelle unter Aufbau der Startseite nennt jeden Bereich.Warum erscheint mein Startseitentext nicht?
$cms_startseite „Status“ an hat und in der Sprache Ihrer Besucher Text enthält; einen Rückfall auf Deutsch gibt es nicht. Zwei aktive Einträge mit demselben Namen lassen die Stelle ebenfalls leer.Wie zeige ich Neuheiten auf der Startseite an?
Wie entferne ich einen Block wie „Neue Produkte“ oder „Bald verfügbare Produkte“?
Warum zeigt ein Block höchstens 16 Produkte?
Wie werden die Bestseller bestimmt?
Wie ändere ich die Reihenfolge der Laufleisten?
Welche Bildgröße brauchen mobile Sliderbilder?
Warum hat mein Slider einen weißen Balken?
Warum führt ein Slider-Link auf eine Fehlerseite?
https://, oder die Adresse ist veraltet. Tragen Sie die vollständige Adresse ein. Bei Links auf Kategorie, Produkt oder CMS-Seite zeigen Slider-Verwaltung und Health-Check gelöschte oder deaktivierte Ziele an, siehe Slider-Linkziele.Wie verlinke ich ein Banner auf eine Aktionskategorie?
Kann ich Händlern und Privatkunden unterschiedliche Hinweise zeigen?
Wo ändere ich die Telefonnummer in der Kopfzeile?
Wo ändere ich das Jahr oder die Zeiten im Footer?
$cms_footer im CMS-Manager und zählt nicht automatisch hoch. Öffnungs- und Servicezeiten pflegen Sie unter Einstellungen → Design → Footer (Fußbereich) → Footer-Kontaktdaten in der Spalte „Zusatzinformationen“.Wie platziere ich ein Popup auf der Startseite?
$cms_advice pflegen und unter Einstellungen → Allgemein → Wartungsarbeiten „Hinweisbox auf Startseite anzeigen“ einschalten. Sie erscheint Gästen einmal pro Besuch, siehe Popups.Warum ist der Status-Schalter eines Bausteins ausgegraut?
$cms_advice sind dauerhaft aktiv. Ob ihr Inhalt erscheint, steuert eine Einstellung, bei der Hinweisbox „Hinweisbox auf Startseite anzeigen“. Schaltbar sind der Begrüßungstext, der SEO-Text der Startseite, die Footer-Bausteine und Ihre eigenen Seiten.Wie entferne ich den Hinweis „Mitteilung Autobackup“?
Wo ändere ich den Hinweistext zur Produktanfrage?
TEXT_QUESTION_INTRO). Den Knopf selbst schalten Sie unter Einstellungen → Design → Produktdetailansicht → Produktanfrage "Fragen zum Artikel" an/aus.Weiterführende Leitfäden
Wir helfen beim Gestalten Ihrer Startseite
Wir richten Slider, Produktblöcke und Footer mit Ihnen ein und sagen Ihnen, was sich in Ihrem Template anpassen lässt.
Jetzt Support kontaktieren