Vylepšete vizuální přitažlivost svého e-shopu pomocí dynamických náhledů produktových obrázků a zlepšete tak uživatelskou zkušenost a angažovanost zákazníků.
Nedávno se na nás obrátil klient s přáním, aby obrázky jeho produktů na e-shopu neměly defaultní zoom efekt, který Woo nabízí, ale chtěl, aby při „najetí“ myší (tzv. hover efekt) na obrázek se celý obrázek zobrazil zvětšený, jakoby aby se ukázal větší obrázek nad původním náhledem bez toho, aby návštěvník musel obrázek rozkliknout.
Klient má e-shop tvořený v Elementoru, takže jsme script vložili přímo do Elementoru do sekce „Custom code“ do <head> a script jsme vložili mezi tagy <script> </script>.
Poté jsme nastavili v Elementoru v šabloně pro single product na kontejneru , kde se nachází blok pro zobrazení náhledu produktu třídu: .p-main-image, je to z důvodu, aby zvětšený obrázek po najetí myši zůstal ukotvený na kontejneru a tím pádem zůstal na místě i při změně šířky obrazovky.
Poté jsme ještě vložili custom CSS:
/*zoom efekt obrázku produktu*/
.p-main-image {
position: relative;
}
.p-large-image-preview {
display: none;
position: absolute;
z-index: 1000;
top: 0;
left: 0;
width: 100%;
height: auto;
overflow: hidden;
}
Pamatujte, že v digitálním světě je každý vizuální prvek příležitostí zaujmout a získat zákazníka. Přidáním dynamických náhledů obrázků na váš e-shop nejenže zlepšíte uživatelskou zkušenost, ale také zvýšíte šance, že návštěvníci vašeho webu přejdou od prohlížení k nákupu. Vyzkoušejte tento tip a sledujte, jak se zlepšuje angažovanost a konverzní poměr vašeho e-shopu.
Pochopitelně co klient, to jiný názor, někomu toto zobrazení pro jeho účely nemusí vyhovovat, avšak náš klient toto chtěl.
Plánujete nový web nebo potřebujete oživit ten stávající? Napište nám a získejte přesnou cenovou kalkulaci právě pro vaše potřeby. Bez závazků, plně přizpůsobené vašemu rozpočtu a představám.
©2016- 2025 Oxystudio.cz