Efekt zoom při „najetí“ myší na produktový obrázek ve Woocommerce

3. 4. 2024

V dnešním digitálním světě je zapůsobení na vaše potenciální zákazníky klíčové pro úspěch vašeho online obchodu. Jedním z efektivních způsobů, jak přitáhnout pozornost a zvýšit angažovanost, je vylepšení vizuální stránky vašeho webu. V tomto článku se podělíme o jednoduchý, avšak účinný způsob, jak přidat dynamické náhledy obrázků k produktům ve vašem e-shopu, čímž zvýšíte jejich vizuální přitažlivost a zlepšíte uživatelskou zkušenost.

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.

Jak jsme toho dosáhli?

Řešením bylo implementovat efekt dynamického zoomu – efekt přiblížení, který se aktivuje, když návštěvník najede myší na obrázek produktu. Tento efekt je dosažen kombinací JavaScriptu a CSS, což umožňuje obrázku zůstat v přesné pozici vůči zobrazenému elementu napříč různými zařízeními a velikostmi obrazovek. Takový přístup zajišťuje, že bez ohledu na to, zda váš zákazník používá desktop, tablet, nebo mobilní telefon, vždy získá optimální vizuální zážitek.

Co to přináší?

  • Zlepšení uživatelské zkušenosti: Zákazníci ocení možnost podívat se na produkt detailněji. To jim poskytuje důvěru ve vaše produkty a zvyšuje pravděpodobnost nákupu.
  • Odlišení od konkurence: Nabídnutím něčeho navíc, jako je tento zoom efekt, získá váš e-shop výraznou výhodu oproti konkurentům, kteří takovou funkcionalitu nemají.
  • Zvýšení prodejů: Větší důvěra a lepší vizuální prezentace přirozeně vedou k vyššímu počtu konverzí a prodejů.

Jak na to?

Začínáme s jednoduchým kódem v jQuery, který zachytává události mouseenter a mouseleave na odkazy obrázků produktů. Při najetí myši se dynamicky vytvoří a zobrazí div s třídou .p-large-image-preview, obsahující zvětšený obrázek. Jakmile návštěvník odvede myš, náhled se pomalu skryje. Díky pečlivě navrženému CSS zůstává tento náhled vždy ve správné pozici vůči původnímu obrázku, což zajišťuje konzistentní a plynulý zážitek při prohlížení.

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.

Facebook
LinkedIn

A nyní je na řadě Vaše realizace a Vaše představa. Jsme tu pro Vás, abychom Vám pomohli vytvořit nový web, nebo dát "nový kabát" stávajícímu.

Cenu přizpůsobíme Vašemu rozpočtu a představám

Zjistěte cenu vašeho projektu

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.

Nezávazná poptávka ceny webu