Mi legyen a webshop termékoldalán mobilon az első képernyőn

Scheo · 2026-10-20 · olvasási idő ~10 perc · Szerző: Schmidt Péter

Mobilon a termékoldal első képernyője egy kb. 360-430 pixel széles és 600-750 pixel magas látható terület, amelyből a böngésző címsora, a sütibanner és a fejléc még elvesz egy jó darabot. Ami ide nem fér be, azt a vásárlók egy része egyszerűen nem látja, mielőtt döntene. Ez a cikk végigveszi, mi legyen ezen a kis felületen, mi mehet lejjebb, és hogyan ellenőrizd mindezt mérhető módon, ne csak szemre.

A cikkben három jelölést használunk. [Hivatalosan igazolt] az, ami szabványban, a Google vagy egy eszközgyártó dokumentációjában szerepel. [Saját tapasztalat] az, amit webshopok mobil termékoldalainak átnézésekor rendszeresen látunk. [Szakmai feltételezés] az, ami logikusan következik, de általános érvénnyel nem bizonyított.

Mi legyen görgetés nélkül látható a termékoldalon mobilon?

Görgetés nélkül a termékképnek, a termék nevének, az árnak, a készletállapotnak, a szállítási időnek és a kosárba gombnak kell látszania. Ha a gomb nem fér be, egy ragadós kosárba sáv pótolhatja, de a többi öt elemnek akkor is fent a helye.

Miért pont ez a hat elem?

Mert ezek felelnek a vásárló első öt kérdésére. Mi ez (kép és név)? Mennyibe kerül (ár, akciónál az eredeti ár is)? Van-e belőle (készlet)? Mikor kapom meg (szállítási idő)? Hol veszem meg (gomb)? Ha ezek közül bármelyikhez görgetni kell, a vásárló keresgél, és a keresgélő vásárló egy része visszalép a találati listára.

[Saját tapasztalat] A leggyakoribb hiba a túl magas képgaléria. Egy négyzetes termékkép 390 pixel széles kijelzőn 390 pixel magas, és ha fölötte 120-150 pixel fejléc, keresősáv és morzsamenü van, alatta pedig a név két sorba tördelődik, az ár már a hajtás alá csúszik. Erre jó megoldás, ha a kép mobilon kicsit alacsonyabb képarányt kap (például 4:3), vagy ha a morzsamenü a név alá kerül, egyetlen sorban.

Hogyan írd ki a szállítási időt és a készletet?

Egyetlen rövid sorban, a gomb közelében. Például „Raktáron, 1-3 munkanap alatt nálad” vagy „Utolsó 2 db”. A pontos dátumot csak akkor írd ki, ha a rendszered tényleg ki tudja számolni a rendelés idejéből és a futár menetrendjéből, mert a rossz becslés több bizalmat visz el, mint amennyit egy szép dátum hoz.

Mi kerülhet nyugodtan lejjebb a termékoldalon?

Lejjebb kerülhet minden, ami a döntést megerősíti, de nem az első benyomáshoz kell. Ilyen a részletes leírás, a műszaki adatok táblázata, a vélemények szövege, a mérettáblázat, a részletes szállítási és visszaküldési feltételek, valamint a kapcsolódó termékek.

• Értékelés. A csillagok átlaga és a vélemények száma fent, a név alatt egy sorban elfér, és egy koppintással leugorhat a vélemények blokkjára.
• Méretválasztás. A méretválasztó fent van, a méretáblázat egy link a választó mellett, a táblázat maga lehet felugró panelben.
• Ingyenes szállítás határa. Ha van ilyen, egy rövid sorban fent is szerepelhet, a részletek lent.
• Leírás. Két-három soros rövid összefoglaló fent hasznos lehet, a hosszú szöveg lent, lenyitható blokkban.

Melyik mobil képernyőméreteken ellenőrizd az első képernyőt?

Azokon, amelyeken a te látogatóid ténylegesen vásárolnak, ezt az analitikád megmondja. Kiindulásnak a leggyakoribb CSS-viewportok 360×800, 375×667 (kisebb iPhone-ok), 390×844, 393×852 és 412×915 pixel, de a sorrend boltonként eltér.

[Hivatalosan igazolt] A böngészők CSS-pixelben számolnak, ami nem azonos a kijelző fizikai felbontásával. A ténylegesen látható magasság ennél is kisebb, mert a címsor és az alsó eszköztár elfoglal egy sávot. A CSS-ben erre van a dvh mértékegység (dinamikus viewport-magasság), amely a W3C CSS Values and Units 4. szintű specifikációjában szerepel.

Lépésről lépésre

1. A GA4-ben nyisd meg a Technológia jelentést, szűrj a mobil eszközkategóriára és a termékoldalakra, és írd ki a vásárlás szerinti öt leggyakoribb képernyőfelbontást.
2. A Chrome DevTools eszköz módjában állítsd be egymás után ezeket a méreteket, és készíts képernyőképet görgetés nélkül.
3. A képernyőképeket nyitott sütibannerrel is készítsd el, mert az új látogató először ezt látja.
4. Húzz vízszintes vonalat a látható terület aljára, és jelöld, melyik elem van felette, melyik alatta.
5. Ugyanezt nézd meg legalább egy valódi iPhone-on Safarival és egy valódi Androidon Chrome-mal, mert az eszköztárak magassága eltér az emulátortól.
6. Állítsd a telefon betűméretét nagyobbra, és nézd meg újra. A gyengébben látó vásárlóknál a név három sorba tördelődhet, és ezzel lecsúszik az ár.
7. Ismételd meg minden termékoldal-típusra (lásd lejjebb), mert a variálható termék választói másképp tolják le a gombot.

Gyors mérés a böngésző konzoljában

A konzolba illesztett rövid kód megmondja, hogy a kosárba gomb alja a látható területen belül van-e. WooCommerce-ben a gomb osztálya single_add_to_cart_button, más rendszerben ezt cseréld a sajátodra.

const g = document.querySelector('.single_add_to_cart_button'); const r = g.getBoundingClientRect(); console.log(r.bottom <= window.innerHeight ? 'Látszik görgetés nélkül' : 'A hajtás alatt van', Math.round(r.bottom), 'px / látható magasság', window.innerHeight, 'px');

Hogyan derül ki hőtérképből, hogy a vásárló nem találja a kosárba gombot?

Abból, hogy a kattintások olyan helyre esnek, ahol nincs gomb, a görgetés a gomb fölött elakad, vagy ugyanarra az elemre gyorsan, többször koppintanak. Ezt csak mobilra és a termékoldal-sablonra szűrt hőtérképen érdemes nézni.

[Hivatalosan igazolt] A Microsoft Clarity külön méri a halott kattintásokat (dead clicks, koppintás olyan elemre, amely nem reagál), a dühös kattintásokat (rage clicks, gyors, ismételt koppintás ugyanott) és a gyors visszalépéseket (quick backs), és mindegyikhez visszanézhető munkamenet-felvétel tartozik. Hasonló funkciókat a Hotjar is kínál.

Mire figyelj a hőtérképen?

• Koppintás az áron vagy a készletsoron. Ha sokan koppintanak az árra, jó eséllyel gombnak hiszik, vagy a gomb nincs a közelében.
• Koppintás a termékképen ismételten. Lehet nagyítási igény, de ha a kép alatt rögtön a hajtás van, a vásárló talán görgetés helyett a képpel próbálkozik.
• A görgetési térkép éles esése a gomb fölött. Ha a látogatók jelentős része nem jut le a gomb magasságáig, a gomb túl lent van.
• Dühös kattintás a szürke, inaktív gombon. Variálható terméknél ez azt jelenti, hogy a vásárló nem vette észre, hogy előbb méretet kell választani.
• Koppintás a ragadós sávon, de kosárba tétel nélkül. A sáv látszik, de valami (például a kötelező változat) megakasztja.

[Szakmai feltételezés] Néhány tucat munkamenetből még nem érdemes következtetni. Termékoldal-sablononként néhány száz mobil munkamenet már jó eséllyel kirajzolja a mintát, de a végső döntéshez a hőtérképet a kosárba tételi arány változásával együtt nézd, lehetőleg A/B tesztben.

Kell-e ragadós kosárba gomb, és mire figyelj vele?

Hosszú mobil termékoldalon a ragadós kosárba gomb jó eséllyel segít, de csak akkor jelenjen meg, amikor az eredeti gomb kigördült a képből, és soha ne takarja el a tartalmat vagy a fókuszban lévő elemet. Rövid oldalon, ahol a gomb amúgy is látszik, felesleges.

[Hivatalosan igazolt] A WCAG 2.2 szabvány 2.5.8-as feltétele legalább 24×24 CSS-pixeles koppintási célt ír elő, az Apple tervezési irányelve 44×44 pontot, a Google Material Design 48×48 dp-t ajánl. A 2.4.11-es feltétel szerint a ragadós elemek nem takarhatják el teljesen a billentyűzettel fókuszba került elemet. Az iPhone alsó gesztussávja miatt a sávnak a env(safe-area-inset-bottom) értéknyi alsó belső margó is kell.

Egy egyszerű, kipróbálható megoldás CSS-sel és JavaScripttel.

.ragados-kosar { position: fixed; left: 0; right: 0; bottom: 0; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .2s; } .ragados-kosar.lathato { transform: none; } .ragados-kosar button { min-height: 48px; width: 100%; }

const eredeti = document.querySelector('.single_add_to_cart_button'); const sav = document.querySelector('.ragados-kosar'); new IntersectionObserver(([e]) => sav.classList.toggle('lathato', !e.isIntersecting)).observe(eredeti);

A sáv a transform miatt mozog, ezért nem tolja el a tartalmat, és nem rontja a CLS-t (Cumulative Layout Shift). Az oldal aljára viszont tegyél a sáv magasságával egyező üres helyet, hogy a lábléc utolsó sora ne bújjon alá. Variálható terméknél a ragadós gomb ne tegyen kosárba változat nélkül, inkább görgessen vissza a méretválasztóhoz, vagy nyisson egy alsó panelt a választóval.

[Saját tapasztalat] Gyakori hiba, hogy a ragadós sáv, a chatbuborék és a sütibanner egyszerre ül az oldal alján, egymásra csúszva. Ilyenkor a vásárló a buborékot vagy a bannert koppintja meg a gomb helyett. A chatbuborék, ha kell, kerüljön a sáv fölé, oldalra.

Mennyit takar el a sütibanner, és hogyan kezeld?

Kis kijelzőn egy alsó sütibanner a látható terület harmadát, felét is elfoglalhatja, ezért az első képernyőt mindig nyitott bannerrel is meg kell nézni. A cél egy tömör, alul elhelyezett banner, amely mellett legalább a termékkép, a név és az ár látszik.

[Hivatalosan igazolt] A Google Search Central a tolakodó, tartalmat eltakaró felugró elemeket nem javasolja, de kifejezetten kiveszi ez alól a jogi kötelezettség miatt megjelenő elemeket, például a sütik használatáról szólót, ha észszerű méretűek. Az Európai Adatvédelmi Testület (EDPB) sütibanner-munkacsoportjának 2023-as jelentése szerint az elutasítás lehetősége ne legyen nehezebben elérhető az elfogadásnál. A banner tehát lehet kicsi, de a két gomb egyenrangú maradjon.

• Mérd le a banner magasságát pixelben mindegyik vizsgált viewporton, és vond le a látható magasságból. Ami marad, az a valódi első képernyőd.
• A ragadós kosár sáv ne jelenjen meg, amíg a banner nyitva van, különben a kettő egymást takarja.
• Nézd meg a PageSpeed Insightsban, mi az LCP-elem (Largest Contentful Paint). [Saját tapasztalat] Szöveges bannernél előfordul, hogy a banner lesz a legnagyobb elem a termékkép helyett, ez torzítja a mérést.
• Teszteld, hogy a banner bezárása után nem ugrik-e meg az oldal, mert az rontja a CLS-t.

Hogyan néz ki az ellenőrzőlista termékoldal-típusonként?

Minden termékoldal-típusra külön ellenőrizd az első képernyőt, mert a variánsválasztó, a készlethiány vagy az egyedi szállítás mind más elemeket tol fel vagy le. Az alábbi listát másold ki, és viewportonként jelöld meg, hogy teljesül-e (igen / nem / nem releváns).

Minden termékoldalon

• ☐ A termékkép görgetés nélkül látszik, és nem foglalja el a teljes képernyőt.
• ☐ A név legfeljebb két sorban kifér a leggyakoribb viewporton.
• ☐ Az ár (akciónál az eredeti ár is) görgetés nélkül látszik.
• ☐ A készletállapot és a szállítási idő egy rövid sorban fent van.
• ☐ A kosárba gomb vagy a ragadós sáv görgetés nélkül elérhető, legalább 44-48 pixel magas.
• ☐ Nyitott sütibannerrel is látszik a kép, a név és az ár.
• ☐ Nagyobb rendszer-betűméretnél sem csúszik le az ár.
• ☐ A strukturált adatokban szereplő ár és készlet egyezik a látható értékkel.

Egyszerű termék (nincs változat)

• ☐ A mennyiségválasztó nem tolja a gombot a hajtás alá.
• ☐ A gomb a kosárba tétel után visszajelzést ad (felirat vagy kis kosárpanel).

Variálható termék (méret, szín)

• ☐ A változatválasztó görgetés nélkül látszik vagy egy koppintással elérhető.
• ☐ Változat nélkül a gomb érthető üzenetet ad, nem csak szürke.
• ☐ Változatváltáskor frissül az ár, a készlet és a kép.
• ☐ A méretáblázat linkje a választó mellett van.

Készlethiányos vagy előrendelhető termék

• ☐ A hiány vagy az előrendelés ténye a gomb mellett szerepel, nem csak a leírásban.
• ☐ Van értesítést kérő gomb, ha a termék nem rendelhető.
• ☐ A várható beérkezés csak akkor szerepel, ha a beszállító ezt megerősítette.

Nagy méretű vagy egyedi szállítású termék

• ☐ Fent jelezve van, hogy a szállítás eltér (például bútorszállítás, házhoz hordás).
• ☐ A szállítási feltételek egy koppintással elérhetők.

Digitális termék vagy szolgáltatás

• ☐ Fent látszik, hogyan és mikor jut hozzá a vásárló (letöltés, e-mail, időpontfoglalás).
• ☐ A gomb felirata a tényleges lépést mondja (például „Megveszem és letöltöm”).

Hogyan kapcsolódik az első képernyő az AI-kereséshez és a strukturált adatokhoz?

A látható ár, készlet és szállítási adat ugyanaz az információ, amit a strukturált adatokban is megadsz, és a kettőnek egyeznie kell. Ha egyeznek, a keresők és az AI-asszisztensek jó eséllyel pontosabban értelmezik az ajánlatot, de ez megjelenést vagy helyezést nem garantál.

[Hivatalosan igazolt] A Google irányelvei szerint a strukturált adat nem tartalmazhat olyat, ami a felhasználó számára nem látható az oldalon. A Schema.org Offer típusában a price, az availability és a shippingDetails tulajdonság írja le ugyanazt, amit az első képernyőn mutatsz. A Google mobilelső indexelése óta az oldal mobil változata számít az elsődlegesnek.

[Szakmai feltételezés] A böngészőt önállóan kezelő AI-ügynökök a renderelt oldalt olvassák. Ha a gomb egyértelmű felirattal és valódi button elemként szerepel, az jó eséllyel nekik is könnyebb, mint egy kattintható div.

Források és további olvasnivalók

• Google Search Central, Mobilelső indexelés és a tolakodó felugró elemek kerülése
• Google Search Central, Termék és kereskedői listázás strukturált adatai
• web.dev, Largest Contentful Paint és Cumulative Layout Shift
• W3C, Web Content Accessibility Guidelines (WCAG) 2.2
• W3C, CSS Values and Units Module Level 4
• Schema.org, Product, Offer és OfferShippingDetails
• Apple Human Interface Guidelines és Material Design irányelvek
• Microsoft Clarity dokumentáció
• EDPB, Report of the work undertaken by the Cookie Banner Taskforce (2023)