Vylepšete svůj obchod Woocommerce: Objevte efekt přiblížení na obrázcích produktů!

3. 4. 2024

Jitka Peterková

Rubrika: Designové prvky, Elementor, Woocommerce

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

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.

Elementor, Woocommerce

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.

Kolik stojí webové stránky?

Od 9 999,- Kč

Od 12 499,- Kč

Oblíbený

Od 17 999,- Kč

Od 24 900,- Kč

Řekli o nás...

Richard Hlaváč

projekty-hlavac.eu

Kreativní a promptní řešení webových stránek. Zajímavý grafický design za velmi dobrou cenu. Doporučuji všem. 👌

Robert Duben st.

zasklivanilodzii.cz

Spolupráce s paní Peterkovou byla skvělá díky SEO optimalizaci se naše webové stránky zobrazují na předních pozicích na Googlu. PC kampaně na S kliku nám zase pomohly zvýšit viditelnost na seznamu. mj. nám také zajišťuje bezproblémový chod webu což je velice důležité. Za mě naprostá spokojenost mohu jenom doporučit.

Michal Pišta

Spolupráce s paní Peterkovou byla od začátku až do konce naprosto bezproblémová. Každý detail byl promyšlený a vše bylo přizpůsobeno na míru našim požadavkům. Oceňuji také rychlou komunikaci, flexibilitu a odborné rady, které nám pomohly. Nejenže jsme získali nádherný web, ale také dlouhodobou podporu a správu, což nám poskytuje klid a jistotu. Děkujeme za skvělou práci a těšíme se na další spolupráci.

David Smolek

rehypo.cz

Naše spolupráce dopadla nad očekávání. Neměli jsme dostatek času, náš deadline se blížil a i přes to paní Peterková vše zvládá na jedničku a včas. Zadání jsme museli upravit, ale ani to pro ni nebyl problém. Služby Oxystudio v budoucnu rádi využijeme znovu.

DataLive s.r.o.

datalive.cz

Vřele doporučujeme, ochota, rychlé odezvy na všechny naše(nestandardní) požadavky, dostali jsme hotový web kompletně nastavený pro vyhledávače Google.

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.