PrestaShop mobiele weergave: zo verbeter of verberg je een element op telefoons
Breekt één element de mobiele weergave van PrestaShop, dan is de boosdoener meestal een vaste breedte, te lange tekst, of stijlen van een module die geen rekening hielden met een smal scherm. Je zet de verbetering in custom.css van het child theme, in een regel die alleen op telefoons geldt. Verberg een element alleen als klanten op een telefoon het echt niet nodig hebben.
Auteur: Het TellMyShop-team. Een gids voor eigenaren van PrestaShop-winkels: de oorzaak, de oplossing met de hand en hetzelfde werk in een gesprek met de chat.
Laatst bijgewerkt: · 6 min lezen
Waarom ziet een element er op een telefoon verkeerd uit?
Een PrestaShop-webshop heeft geen aparte mobiele versie. Dezelfde code deelt zich anders in als het scherm smal is. Problemen beginnen als een element niet kan krimpen.
| Wat je op de telefoon ziet | Meest voorkomende oorzaak | Wat meestal helpt |
|---|---|---|
| de pagina scrolt opzij | een element met een vaste breedte in pixels, een brede tabel in een beschrijving | 100% breedte, of alleen de tabel laten scrollen |
| tekst loopt buiten zijn vak | een lang woord, adres of code dat niet afbreekt | lange woorden in dat element laten afbreken |
| garantiepictogrammen nemen half het scherm in | de module heeft grote pictogrammen en drie kolommen zonder regel voor telefoons | kleinere pictogrammen, één kolom, of verbergen op telefoons |
| een knop wordt afgedekt | een chatvenster, cookiebanner of vaste balk | het venster verplaatsen of een lagere balk |
| de producttitel loopt over vier regels | een groot kopfont uit de desktopversie | een kleinere kopgrootte onder een gekozen breedte |
| een afbeelding is bijgesneden of uitgerekt | een vaste afbeeldingshoogte in de CSS | automatische hoogte |
De elementen die het vaakst breken, zijn later toegevoegd: modules van derden, tekstblokken die uit een editor zijn geplakt, maattabellen in productbeschrijvingen en meldingsbalken. Het thema zelf is vaak in orde.
Zo controleer je de mobiele weergave zonder telefoon
Je browser geeft je een snel voorbeeld. Open in Chrome de ontwikkelaarstools en zet de apparaatwerkbalk aan, zoals de handleiding over de apparaatmodus in Chrome uitlegt. Je kiest de breedte van een populaire telefoon en ziet meteen waar de pagina uit elkaar valt.
De apparaatmodus is een benadering. Controleer altijd ook op een echte telefoon, het liefst in een privévenster, zodat je niet naar een oude versie uit de browsercache kijkt.
Controleer op volgorde:
- De homepage.
- Een categorie met filters.
- Een productpagina met een lange naam en meerdere varianten.
- De winkelwagen en de eerste stap van het afrekenen.
- Een pagina met een tabel, zoals een maattabel.
Noteer op welke pagina en bij welke breedte het probleem verschijnt. Dat is de helft van de oplossing.
Het element op telefoons verbeteren of verbergen?
Probeer het eerst te verbeteren. Verbergen gaat snel, maar de klant op een telefoon verliest informatie die de klant op een computer wel ziet.
Verbergen heeft zin als het element:
- informatie herhaalt die al hoger op de pagina staat,
- decoratie zonder inhoud is,
- de knop of de prijs afdekt en niet makkelijk te verplaatsen is.
Verberg de productbeschrijving, de prijs, de beschikbaarheid, de levertijd of informatie over retourneren niet. Daar zoeken klanten op een telefoon het meest naar.
Waar je de CSS-verbetering voor telefoons toevoegt
In het bestand custom.css in je child theme. De regels voor telefoons zet je in een media query, een blok dat alleen onder een gekozen schermbreedte geldt. De handleiding van MDN over media queries legt uit hoe dat werkt.
Het child theme doet om één reden ertoe: een update van het hoofdthema overschrijft je bestand niet. De PrestaShop-documentatie over child themes legt uit hoe je er een bouwt en je eigen stylesheet koppelt. Waarom wijzigingen na een update verdwijnen, bespreken we in ons bericht over hoe een thema-update mijn wijzigingen wiste.
Wat zijn de meest voorkomende verbeteringen voor telefoons?
De meeste problemen met de mobiele weergave los je op met een handvol terugkerende verbeteringen. Elk zet je in het blok voor smalle schermen, zodat de desktopversie ongewijzigd blijft.
- Een brede tabel in een productbeschrijving. Een maattabel met veel kolommen maakt de pagina breder. Laat in plaats van samenpersen alleen de tabel opzij scrollen, niet de hele pagina.
- Lange woorden en adressen. Een kortingscode, een e-mailadres of een lange materiaalnaam zonder spaties loopt buiten zijn vak. Een regel om lange woorden in dat ene element af te breken is genoeg.
- Een chatvenster over de knop In winkelwagen. Chatmodules hebben vaak een eigen instelling voor de positie op telefoons. Controleer die voordat je CSS gaat schrijven.
- Te grote koppen. Een productnaam over vier regels duwt de prijs van het eerste scherm. Een kleinere kopgrootte op telefoons is meestal genoeg.
- Drie kolommen met pictogrammen. Blokken met garantie, levering en retourneren zien er op telefoons beter uit in één kolom met kleinere pictogrammen.
Verbeter één ding tegelijk en controleer de pagina na elke wijziging. Wijzig je meerdere regels tegelijk, dan weet je moeilijk welke iets heeft gebroken.
Wat je na de verbetering controleert
Leeg na het opslaan de cache in Geavanceerde parameters → Prestaties. Zie je de wijziging nog steeds niet, loop dan de lijst na in ons bericht over PrestaShop wijzigingen niet zichtbaar.
Zo verbeter je de mobiele weergave met de chat
Je beschrijft wat er mis is en op welke pagina. Je kunt een schermafbeelding van je telefoon in het gesprek plakken. Je chat (Claude of ChatGPT) leest de themabestanden en de code van de pagina, zoekt uit welke klasse het element bepaalt en laat de regel zien voor het opslaan.
Jij: Op telefoons nemen de garantiepictogrammen onder de knop In winkelwagen half het scherm in. Verberg ze onder 768 px en maak de producttitel kleiner. Alleen in custom.css.
Je chat: De pictogrammen komen uit de module voor het geruststellingsblok, klasse .blockreassurance_product. Het child theme heeft een lege custom.css. Ik voeg toe:
Op een computer verandert er niets. Voor het opslaan maak ik een kopie van het bestand, daarna leeg ik de cache.
Jij: Ja.
Je chat: Opgeslagen. Op de productpagina geldt de regel alleen onder 768 px. Controleer het ook op je eigen telefoon in een privévenster.
Status van de kaart: wacht op jouw “ja”oude versie: (leeg bestand)
nieuwe versie: @media (max-width: 767px) {
nieuwe versie: .blockreassurance_product { display: none; }
nieuwe versie: .product-container h1 { font-size: 1.25rem; }
nieuwe versie: }
De groottes en klassenamen in dit voorbeeld zijn ter illustratie; in jouw thema kunnen ze anders zijn. Een voorbeeldverzoek staat in de use case een element op telefoons verbergen of verbeteren.
TellMyShop Pro wijzigt themabestanden zodra je de schakelaar Thema in het modulepaneel aanzet. De schakelaar werkt 24 uur en vereist een databaseback-up van dezelfde dag. Voor elke opslag van een bestand wordt een kopie gemaakt, en de wijziging komt in de wijzigingsgeschiedenis, dus elke wijziging kun je met één verzoek ongedaan maken. De gratis versie TellMyShop Free leest en wijzigt geen themabestanden; die helpt met rapporten over de webshop. De versies worden vergeleken op de pagina prijzen.
Vragen en antwoorden
Heeft PrestaShop een aparte mobiele versie van de webshop?
Nee. Het thema Classic en de meeste nieuwere thema’s zijn responsive: dezelfde webshop deelt zich op een smal scherm anders in. Daarom maak je verbeteringen voor telefoons in hetzelfde stylesheet, alleen binnen een regel die onder een gekozen schermbreedte geldt.
Schaadt een element verbergen op telefoons je in Google?
Een kleine decoratie of herhaalde informatie verbergen is meestal geen probleem. Wees voorzichtig met inhoud die ertoe doet voor klanten en voor Google, zoals de productbeschrijving of de prijs. Google beoordeelt een webshop vooral op de telefoonversie, dus belangrijke inhoud hoort daar te blijven.
Hoe controleer ik de mobiele weergave zonder telefoon?
Open de webshop in Chrome, open de ontwikkelaarstools en zet de apparaatmodus aan. Je ziet de pagina op telefoonbreedte en kunt de schermgrootte wijzigen. Het is een goede benadering, maar doe de laatste test op een echte telefoon.
Waarom zijn mijn verbeteringen voor telefoons na een thema-update verdwenen?
Omdat ze in een themabestand stonden dat de update heeft overschreven, zoals theme.css. Bewaar je eigen stijlen in custom.css van het child theme. Dat bestand wordt niet overschreven als het hoofdthema wordt bijgewerkt.
Kan de chat zien hoe mijn webshop er op een telefoon uitziet?
Hij kijkt niet naar een telefoonscherm. Hij leest de themabestanden en de code van de pagina, en jij beschrijft het probleem of plakt een schermafbeelding in het gesprek. Daaruit leidt de chat af welke regel moet veranderen en laat hij je die zien voor het opslaan.
PrestaShop is een geregistreerd handelsmerk van PrestaShop SA. Claude is een handelsmerk van Anthropic PBC. ChatGPT en OpenAI zijn handelsmerken van OpenAI. TellMyShop is niet gelieerd aan deze bedrijven.