V prvem zaslonu se obiskovalec odloči, ali bo ostal. Uporabniki preživijo 57% časa gledanja strani nad prelomom (NN/g, 2018), prvi vtis o vizualni privlačnosti strani pa si ustvarijo v približno 50 milisekundah (Lindgaard et al., 2006). Hero sekcija ni vrh strani; je večina odločitve. Večina Shopify trgovin ga napolni z razpoloženjem in zakoplje sporočilo.

To je vodič za hero, ki si zasluži drsenje navzdol: štiri naloge, ki jih mora opraviti, in kaj odrezati. Umeščen je v vodič za arhitekturo Shopify PDP in se ujema z globljim kontrolnim seznamom za optimizacijo PDP.

Vodim Skuology in gradim Upsellr. To prihaja iz več kot 80 Shopify projektov in več kot 100 mio. $ skupnega eCommerce prometa.

Ključne ugotovitve

  • Prvi zaslon nosi odločitev: 57% pozornosti je nad prelomom (NN/g, 2018), mnenje pa nastane v ~50ms (Lindgaard, 2006).
  • Hero ima štiri naloge: povedati, kaj je, za koga je, zakaj je tukaj boljši in kaj naj storiš naprej.
  • Naslov je za jasnost, ne za domiselnost; F-vzorec postavi zgornjo vrstico in levi rob naprej (NN/g).
  • En hero, ena slika, en CTA. Vrtiljaki in tekmujoči gumbi delijo pozornost, ki si je ne moreš privoščiti izgubiti.
  • Na mobilnih napravah je hero en zaslon: korist, slika, cena, CTA, v tem vrstnem redu.

Štiri naloge hera

Hero, ki prodaja, ob prvem pogledu odgovori na štiri vprašanja: kaj je to, za koga je, zakaj je tukaj boljši in kaj naj storim naprej. Če manjka katero koli, mora obiskovalec garati, da razume stran, in ker se vtis ustvari v milisekundah, se večina ne bo trudila. Hero ni okras; je odgovor na vprašanje "naj berem naprej".

Večina trgovin to zgreši tako, da hero optimizira za vzdušje namesto za jasnost. Lepa lifestyle slika s poetičnim tribesednim naslovom je videti kot znamka, sporoča pa nič. Kupec, ki v prvem zaslonu ne ugotovi, kaj prodajaš, odide, in 57% pozornosti, ki živi nad prelomom, gre za zmedo.

Hero torej obravnavaj kot nalogo, ki jo je treba opraviti, ne kot platno. Vsak od štirih elementov spodaj se ujema z enim od teh štirih vprašanj in vsak si svoje mesto zasluži le tako, da odgovori jasno.

Naslov: kaj je in za koga je

Naloga naslova je prepoznava, hitra. V preprostih besedah, ki jih obiskovalec ob prvem obisku takoj razume, povej, kaj je izdelek in za koga je. "Merino spodnje plasti za tekače v mrazu" prekaša "Ustvarjeno za vse vremenske razmere", ker kupcu pove, kaj ima pred sabo in ali je to zanj. Domiselnost je tukaj sovražnik; jasnost zmaga.

Postavitev šteje toliko kot besedilo. Uporabniki preletavajo v F-vzorcu, zato zgornja vrstica in levi rob dobita nesorazmerno pozornosti (NN/g, 2017). Pomen postavi na začetek naslova, ne za uvodni zalet. Prve besede nosijo prepoznavo; vse za njimi se prebere manj.

Test je isti, kot ga uporabljam za vsak prvi zaslon: bi neznanec lahko prijatelju povedal, kaj prodajaš, zgolj iz naslova? Če ne, je preveč ohlapen, da bi konvertiral.

Hero slika: prikaži izdelek ali rezultat

Naloga slike je prikazati, kar naslov poimenuje. Jasen posnetek izdelka ali rezultata, ki ga ta prinese, naredi več kot katera koli atmosferska fotografija. Kupec hoče videti stvar, ki bi jo morda kupil, zato jo postavi naprej. Vzdušje lahko pride pozneje; hero slika si mesto zasluži s tem, da je informativna, ne le privlačna.

Najprej obreži za mobilne naprave. Večina tvojega prometa je na telefonu, kjer je hero en sam majhen zaslon, zato slika, sestavljena za širok namizni pas, na mobilni napravi pogosto ne prikaže nič uporabnega. Sestavi tako, da je izdelek berljiv v velikosti telefona, in ista slika bo delovala povsod.

Globlja pravila za produktne slike so v vodiču za optimizacijo PDP. V heru je poanta ozka: prikaži, ne namiguj.

Ponudba vrednosti: en razlog za nakup tukaj

Vrstica s ponudbo vrednosti je zakaj. V enem stavku navedi en sam najpomembnejši razlog za nakup tega izdelka v tej trgovini. Ne seznam funkcij, ne tri koristi, ena. Kupec, ki preletava prvi zaslon, lahko zadrži en jasen razlog; odstavek prodajnih argumentov se bere kot šum in se preskoči.

Konkretno vsakič prekaša splošno. "Brezplačna dostava in prihod v dveh dneh" ali "Izdelano po naročilu, z garancijo deset let" kupcu pove nekaj resničnega. "Vrhunska kakovost, ki jo boste vzljubili" mu ne pove nič in nakazuje mašilo. Ponudba vrednosti je tam, kjer si zaslužiš klik, zato jo naredi dovolj konkretno, da je verjeti.

Če imaš pravo razlikovalno prednost, ta sodi sem. Trgovina s pravim razlogom za nakup tukaj, preprosto navedenim v heru, konvertira obiskovalca, ki bi sicer odšel primerjat.

Primarni CTA: eno jasno dejanje

Hero potrebuje natanko en primarni poziv k dejanju, viden brez drsenja, poimenovan po dejanju, ki ga sproži. "Dodaj v košarico", "Oglej si kolekcijo", "Začni naročilo". En gumb, ena naloga. Tekmujoči CTA-ji v heru (kupi zdaj in izvedi več in oglej si video in se prijavi) delijo odločitev in znižujejo verjetnost, da kupec sploh katero ujame.

Naj izgleda kot dejanje, kar je. Primarni CTA naj bo vizualno najopaznejši interaktivni element v prvem zaslonu, v roza poudarku znamke, dovolj velik, da se ga na mobilni napravi dotakneš brez merjenja. Vse ostalo v heru ga podpira; nič mu ne konkurira.

To je trenutek, ko hero preda štafeto preostanku strani ali košarici. Če so štirje elementi pravi, je CTA pritisnjen; če je sporočilo zakopano, ni važno, kako dober je videti gumb.

Kaj odrezati iz hera

Večina herov je slabših zaradi tega, kar je v njih, ne zaradi tega, kar manjka. Odreži vrtljivi vrtiljak: drsniki delijo pozornost, tvoje najboljše sporočilo na časovnik potiskajo izven zaslona in po prvem okvirju redko dobijo pozornost. Odreži drugi in tretji CTA. Odreži gosto navigacijo in trojno naložene obvestilne trakove, ki dejanski hero potisnejo pod prelom strani.

Hero je najdragocenejši zaslon na strani, zato naj drži najmanj, a najjasnejših stvari. Vsak element, ki ga dodaš, tekmuje za 57% pozornosti, ki tam živi. Odštevaj, dokler ne ostanejo le štiri naloge, in vsaka dobi prostor, ki ga potrebuje, da pristane.

Zadržanost je tehnika. Trgovina, ki v prvem zaslonu pove eno jasno stvar, vsakič prekaša tisto, ki pove pet meglenih.

Mobilne naprave: hero je en zaslon

Na mobilnih napravah je hero en sam zaslon brez prostora za zapravljanje, vključenost pa iz leta v leto še pada (Contentsquare, 2026). Zato uredi mobilni hero po tem, kar žene odločitev: najprej korist ali naslov, nato slika izdelka, nato cena, nato primarni CTA. Signali zaupanja in podrobnosti gredo pod tem, kjer kupec drsi le, če si je hero to zaslužil.

Ta vrstni red ni naključen; je zaporedje, ki ga kupec potrebuje za odločitev. Kaj je to, ali ga lahko vidim, koliko stane, kako ga dobim. Hero uskladi s tem zaporedjem in majhen zaslon neha biti omejitev. Celotno mobilno sliko najdeš v vodiču za stopnjo konverzije na mobilnih napravah.

Shopify hero sekcija: pogosta vprašanja

Kaj naj vsebuje Shopify hero sekcija?

Štiri stvari: jasen naslov, ki pove, kaj je izdelek in za koga je, hero sliko, ki prikaže izdelek ali njegov rezultat, vrstico s ponudbo vrednosti z enim razlogom za nakup tukaj, in en sam primarni poziv k dejanju. Vse ostalo lahko počaka pod prelomom strani; hero obstaja zato, da si zasluži drsenje navzdol.

Kako pomemben je prvi zaslon v Shopify trgovini?

Odločilen. Uporabniki preživijo 57% časa gledanja strani nad prelomom (NN/g, 2018), prvi vtis o vizualni privlačnosti strani pa si ustvarijo v približno 50 milisekundah (Lindgaard, 2006). Če prvi zaslon ne pove, kaj je izdelek in zakaj je pomemben, večina obiskovalcev odide, preden vidi karkoli drugega.

Naj ima Shopify hero drsnik ali vrtiljak?

Ne. Vrtljivi drsniki delijo pozornost, najboljše sporočilo potiskajo izven zaslona in po prvem drsniku redko dobijo klik. Hero ima eno nalogo: sporočiti najpomembnejšo stvar. Statičen hero z enim naslovom, eno sliko in enim CTA prekaša vrtiljak, ki želi povedati pet stvari naenkrat.

Kaj naredi dober hero naslov na Shopify?

Jasnost pred domiselnostjo. V preprostih besedah, ki jih obiskovalec ob prvem obisku takoj razume, povej, kaj je izdelek in za koga je. F-vzorec pomeni, da zgornja vrstica in levi rob dobita največ pozornosti (NN/g), zato pomen postavi naprej. Naslov, ki bi lahko stal nad katerokoli trgovino, je preveč ohlapen, da bi konvertiral.

Kako naj bo hero urejen na mobilnih napravah?

Mobilni zaslon prikaže en zaslon, zato uredi po tem, kar žene odločitev: najprej korist ali naslov, nato slika izdelka, cena in primarni CTA. Zaupanje in podrobnosti pridejo pod tem. Ker se vključenost in drsenje iz leta v leto znižujeta (Contentsquare, 2026), mora mobilni hero prodajo nositi skoraj sam.

Kaj storiti naprej

Brez zagotovljenega dviga. Koliko močnejši hero premakne tvoje številke, je odvisno od tvojega izdelka, prometa in tega, kako zakopano je danes sporočilo. Kar lahko obljubim, je, da prvi zaslon nosi več odločitve kot katerikoli drug, in večina trgovin ga zapravi za vzdušje.

Baseline Framework prvi zaslon na novo zgradi okrog štirih nalog, v vrstnem redu, v katerem se kupec odloča. Če želiš vedeti, česa tvoj hero ne pove, rezerviraj brezplačen 30-minutni klic in skupaj bova pregledala tvoj prvi zaslon in kaj te stane.