PrestaShop mobile Ansicht: wie Sie ein Element auf Handys korrigieren oder ausblenden
Wenn ein Element die mobile Ansicht in PrestaShop zerstört, ist meist eine feste Breite, ein zu langer Text oder das Styling eines Moduls schuld, das keinen schmalen Bildschirm vorgesehen hat. Die Korrektur fügen Sie in die custom.css des Child Themes ein, in eine Regel, die nur auf Handys gilt. Blenden Sie ein Element nur aus, wenn Kunden es auf dem Handy wirklich nicht brauchen.
Autor: Das TellMyShop-Team. Ein Ratgeber für Betreiber von PrestaShop-Shops: die Ursache, die Lösung von Hand und dieselbe Arbeit im Gespräch mit dem Chat.
Zuletzt aktualisiert: · 6 Min. Lesezeit
Warum sieht ein Element auf dem Handy falsch aus?
Ein PrestaShop-Shop hat keine eigene mobile Version. Derselbe Code ordnet sich anders an, wenn der Bildschirm schmal ist. Probleme beginnen, wenn ein Element nicht schrumpfen kann.
| Was Sie auf dem Handy sehen | Häufigste Ursache | Was meist hilft |
|---|---|---|
| die Seite scrollt seitwärts | ein Element mit fester Breite in Pixeln, eine breite Tabelle in einer Beschreibung | 100 % Breite oder nur die Tabelle scrollen lassen |
| Text läuft aus seinem Kasten | ein langes Wort, eine Adresse oder ein Code, der nicht umbricht | lange Wörter in diesem Element umbrechen |
| Garantiesymbole nehmen den halben Bildschirm ein | das Modul hat große Symbole und drei Spalten ohne Regel für Handys | kleinere Symbole, eine Spalte oder auf Handys ausblenden |
| ein Button ist verdeckt | ein Chatfenster, ein Cookie-Banner oder eine fixierte Leiste | das Fenster verschieben oder eine niedrigere Leiste |
| der Produkttitel läuft über vier Zeilen | eine große Überschriftenschrift aus der Desktop-Version | eine kleinere Überschriftengröße unter einer gewählten Breite |
| ein Bild ist abgeschnitten oder gestreckt | eine feste Bildhöhe im CSS | automatische Höhe |
Am häufigsten brechen Elemente, die später hinzugefügt wurden: Module von Drittanbietern, aus einem Editor eingefügte Textblöcke, Größentabellen in Produktbeschreibungen und Infoleisten. Das Theme selbst ist oft in Ordnung.
Wie Sie die mobile Ansicht ohne Handy prüfen
Ihr Browser gibt Ihnen eine schnelle Vorschau. Öffnen Sie in Chrome die Entwicklertools und schalten Sie die Gerätesymbolleiste ein, wie der Leitfaden zum Gerätemodus in Chrome erklärt. Sie wählen die Breite eines verbreiteten Handys und sehen sofort, wo die Seite auseinanderfällt.
Der Gerätemodus ist eine Annäherung. Prüfen Sie immer auch auf einem echten Handy, am besten in einem privaten Fenster, damit Sie keine alte Version aus dem Browser-Cache sehen.
Prüfen Sie der Reihe nach:
- Die Startseite.
- Eine Kategorie mit Filtern.
- Eine Produktseite mit langem Namen und mehreren Varianten.
- Den Warenkorb und den ersten Schritt der Kasse.
- Eine Seite mit einer Tabelle, etwa einer Größentabelle.
Notieren Sie, auf welcher Seite und bei welcher Breite das Problem auftritt. Das ist die halbe Korrektur.
Auf Handys korrigieren oder ausblenden?
Versuchen Sie zuerst, es zu korrigieren. Ausblenden geht schnell, aber der Kunde auf dem Handy verliert eine Information, die der Kunde am Computer sieht.
Ausblenden ist sinnvoll, wenn das Element:
- eine Information wiederholt, die schon weiter oben auf der Seite steht,
- Dekoration ohne Inhalt ist,
- den Button oder den Preis verdeckt und sich nicht leicht verschieben lässt.
Blenden Sie Produktbeschreibung, Preis, Verfügbarkeit, Versandzeit oder Rückgabeinformationen nicht aus. Genau danach suchen Kunden auf dem Handy am meisten.
Wo Sie die CSS-Korrektur für Handys einfügen
In der Datei custom.css Ihres Child Themes. Die Regeln für Handys setzen Sie in eine Media Query, einen Block, der nur unter einer gewählten Bildschirmbreite gilt. Der Leitfaden von MDN zu Media Queries erklärt, wie das funktioniert.
Das Child Theme ist aus einem Grund wichtig: Ein Update des Haupt-Themes überschreibt Ihre Datei nicht. Die PrestaShop-Dokumentation zu Child Themes erklärt, wie Sie eines bauen und ein eigenes Stylesheet einbinden. Warum Änderungen nach einem Update verschwinden, behandeln wir im Beitrag darüber, wie ein Theme-Update meine Änderungen gelöscht hat.
Was sind die häufigsten Korrekturen für Handys?
Die meisten Probleme mit der mobilen Ansicht lösen ein paar wiederkehrende Korrekturen. Jede setzen Sie in den Block für schmale Bildschirme, damit die Desktop-Version unverändert bleibt.
- Eine breite Tabelle in einer Produktbeschreibung. Eine Größentabelle mit vielen Spalten macht die Seite breiter. Statt sie zusammenzuquetschen, lassen Sie nur die Tabelle seitwärts scrollen, nicht die ganze Seite.
- Lange Wörter und Adressen. Ein Rabattcode, eine E-Mail-Adresse oder ein langer Materialname ohne Leerzeichen läuft aus seinem Kasten. Eine Regel zum Umbrechen langer Wörter in diesem einen Element reicht.
- Ein Chatfenster über dem Button In den Warenkorb. Chatmodule haben oft eine eigene Einstellung für die Position auf Handys. Prüfen Sie sie, bevor Sie CSS schreiben.
- Zu große Überschriften. Ein Produktname über vier Zeilen schiebt den Preis vom ersten Bildschirm. Eine kleinere Überschriftengröße auf Handys reicht meist.
- Drei Spalten mit Symbolen. Blöcke zu Garantie, Lieferung und Rückgabe sehen auf Handys in einer Spalte mit kleineren Symbolen besser aus.
Korrigieren Sie eine Sache nach der anderen und prüfen Sie die Seite nach jeder Änderung. Wenn Sie mehrere Regeln auf einmal ändern, ist schwer zu erkennen, welche etwas kaputt gemacht hat.
Was Sie nach der Korrektur prüfen
Leeren Sie nach dem Speichern den Cache unter Erweiterte Einstellungen → Leistung. Wenn Sie die Änderung immer noch nicht sehen, gehen Sie die Liste in unserem Beitrag PrestaShop Änderungen nicht sichtbar durch.
Wie Sie die mobile Ansicht mit dem Chat korrigieren
Sie beschreiben, was falsch ist und auf welcher Seite. Sie können einen Screenshot vom Handy ins Gespräch einfügen. Ihr Chat (Claude oder ChatGPT) liest die Theme-Dateien und den Seitencode, ermittelt, welche Klasse das Element steuert, und zeigt die Regel vor dem Speichern.
Sie: Auf Handys nehmen die Garantiesymbole unter dem Button In den Warenkorb den halben Bildschirm ein. Blende sie unter 768 px aus und mach den Produkttitel kleiner. Nur in custom.css.
Ihr Chat: Die Symbole kommen vom Modul Vertrauensblock, Klasse .blockreassurance_product. Das Child Theme hat eine leere custom.css. Ich füge hinzu:
Am Computer ändert sich nichts. Vor dem Speichern mache ich eine Kopie der Datei und leere danach den Cache.
Sie: Ja.
Ihr Chat: Gespeichert. Auf der Produktseite gilt die Regel nur unter 768 px. Prüfen Sie es auch auf Ihrem eigenen Handy in einem privaten Fenster.
Status der Karte: wartet auf Ihr „Ja“alte Version: (leere Datei)
neue Version: @media (max-width: 767px) {
neue Version: .blockreassurance_product { display: none; }
neue Version: .product-container h1 { font-size: 1.25rem; }
neue Version: }
Größen und Klassennamen in diesem Beispiel dienen nur zur Veranschaulichung; in Ihrem Theme können sie anders sein. Eine Beispielanfrage finden Sie im Anwendungsfall ein Element auf Handys ausblenden oder korrigieren.
TellMyShop Pro ändert Theme-Dateien, sobald Sie den Schalter Theme im Modul-Panel einschalten. Der Schalter gilt 24 Stunden und braucht eine Datenbanksicherung vom selben Tag. Vor jedem Speichern einer Datei wird eine Kopie angelegt, und die Änderung landet im Änderungsverlauf, sodass Sie jede Änderung mit einer Anfrage rückgängig machen können. Die kostenlose Version TellMyShop Free liest und ändert keine Theme-Dateien; sie hilft bei Shop-Berichten. Den Vergleich der Versionen finden Sie unter Preise.
Fragen und Antworten
Hat PrestaShop eine eigene mobile Version des Shops?
Nein. Das Theme Classic und die meisten neueren Themes sind responsiv: Derselbe Shop ordnet sich auf einem schmalen Bildschirm anders an. Deshalb machen Sie Korrekturen für Handys im selben Stylesheet, nur innerhalb einer Regel, die unter einer gewählten Bildschirmbreite gilt.
Schadet das Ausblenden eines Elements auf Handys in Google?
Eine kleine Dekoration oder eine wiederholte Information auszublenden ist meist kein Problem. Vorsicht bei Inhalten, die für Kunden und Google wichtig sind, etwa die Produktbeschreibung oder der Preis. Google beurteilt einen Shop vor allem nach seiner Handy-Version, wichtige Inhalte sollten dort also bleiben.
Wie prüfe ich die mobile Ansicht ohne Handy?
Öffnen Sie den Shop in Chrome, öffnen Sie die Entwicklertools und schalten Sie den Gerätemodus ein. Sie sehen die Seite in Handybreite und können die Bildschirmgröße ändern. Das ist eine gute Annäherung, aber den letzten Test machen Sie auf einem echten Handy.
Warum sind meine Korrekturen für Handys nach einem Theme-Update verschwunden?
Weil sie in einer Theme-Datei standen, die das Update überschrieben hat, etwa theme.css. Halten Sie Ihre eigenen Styles in der custom.css des Child Themes. Diese Datei wird beim Update des Haupt-Themes nicht überschrieben.
Kann der Chat sehen, wie mein Shop auf einem Handy aussieht?
Er sieht keinen Handybildschirm. Er liest die Theme-Dateien und den Seitencode, und Sie beschreiben das Problem oder fügen einen Screenshot ins Gespräch ein. Daraus ermittelt der Chat, welche Regel zu ändern ist, und zeigt sie Ihnen vor dem Speichern.
PrestaShop ist eine eingetragene Marke der PrestaShop SA. Claude ist eine Marke der Anthropic PBC. ChatGPT und OpenAI sind Marken von OpenAI. TellMyShop ist mit diesen Unternehmen nicht verbunden.