A felhasználói igények és szokások folyamatosan változnak és adaptálódnak az új technikai megoldásokhoz, ezért fontos, hogy a webáruházad működtetéséhez is olyan megoldást válassz, ahol ezeknek az igényeknek rugalmasan meg tudnak felelni a fejlesztők, könnyen megvalósíthatóak az új igények.
Egy dobozos webáruház rendszernél ezek a fejlesztési költségek eloszlanak az előfizetők között, így többek között ezért is van lehetőség naprakész megjelenések/design sablonok közül választani.
Az információ feldolgozási szokások változása miatt nagyon fontos, hogy mindig naprakész megjelenéssel szolgálj a webáruházadba látogató potenciális vásárlók számára asztali nézetben és mobilon is. Ez bizony azt jelenti, hogy 1-2 évente érdemes sablont váltani vagy teljesen új, egyedi megjelenést adni a boltnak.
Erre nem csak azért van szükség, mert a régi sablonok felhasználói szempontból gyorsan elavulnak, hanem amiatt is, mert a webáruház rendszerek egy idő után már nem vállalják a sablonok supportját.
Ez azt jelenti, hogy ha egy új fejlesztés kerül fel a boltba, azt nem “igazítják” a régi sablonhoz, ezért előfordulhat, hogy bizonyos funkciók nem megfelelően működnek.
Ezeket a sablonokat egyébként fokozatosan vezetik ki a választható megjelenések közül és persze ebben az esetben sem 1-2 évről beszélünk. Minimum 4-5 év biztosan eltelik, mire a sablont “kiöregedettnek” tekinti a webáruház rendszer és kiveszi a kínálatból.
A crystalstore.hu a régi Róma alatt.
A sablon csere projektjeim egy része pontosan ezeknek a veterán megjelenéseknek a módosítása, a legutóbbi például a crystalstore.hu áruház volt, amely a régi Róma sablonról váltott át a hasonló felépítésű, de újabb Párizs megjelenésre.
Edina, a webáruház tulajdonosa azzal a problémával keresett meg engem, hogy a Róma sablonjuk sajnos már nem támogatja a cookie consent mode miatt frissített egész oldalas nanobar megjelenést. A mérések nem működnek megfelelően, ezért fokozatosan ürülnek ki a remarketing listáik, emiatt pedig a hirdetéseik is rosszabbul teljesítenek.
Ez különösen fájó pont, mivel a webáruházban alkalmi, esküvői, koszorúslány illetve fürdőruhákat értékesítenek, tehát gyakorlatilag főszezon előtt ütköztek akadályokba a potenciális vásárlók elérését tekintve.
A sabloncsere folyamata
Edinával és a webáruház operatív teendőit végző kolléganőjével, Enikővel egy előzetes megbeszélés során egyeztettünk az igényeikről.
Megbeszéltük, hogy melyek azok az elemek, amelyeket mindenképpen tovább szeretnének vinni az új megjelenésbe is, van-e esetleg olyan megoldás, amit más felületen láttak, de szeretnék megvalósítani a saját boltjukban is.
A webáruház átnézése után én is javaslatokat tettem plusz elemekre, amelyek a felhasználói élményen javíthatnak, illetve egyeztettünk a kiválasztott Róma sablon előnyeiről és persze korlátairól is.
A feladatok rögzítését követően elkezdődhetett a munka a sandbox szerveren. Ez a felület a Shoprenteres áruház pontos mása. Egy teszt felület, ami abban segít, hogy a vásárlók megzavarása nélkül tudjuk elvégezni a szükséges módosításokat.
Így a későbbi élesítés folyamata is sokkal gyorsabb lesz. A webáruház tulajdonképpen csak 30-40 percig van karbantartáson az élesítés során, ugyanis a kisebb módosításokat már anélkül is el lehet végezni, hogy az a vásárlókat megzavarná a kiválasztott termékek megrendelésében.
Milyen változtatásokat eszközöltünk a sabloncsere során?
Edináék azért választották a Párizs sablont, mert az elrendezését tekintve nagyon hasonlít a korábban használt Rómára.
A logó maradt, ahogy a főoldali bannerek is, itt Enikőnek csak annyi teendője volt, hogy a bannereket a javaslataim alapján átméretezze és az új megjelenéshez igazítsa.
A színvilág tekintetében viszont szerettek volna olyan színeket használni az online felületen, amelyek a budapesti üzletük stylingjában is visszaköszönnek, ehhez pedig CSS módosításokra volt szükség.
Egy egyszerű sablon csere esetében a színek módosítása elég korlátozott, ha csak az admin felületes kapcsolókat alkalmazzuk. Ha szeretnénk egyedibb megjelenést, kicsit eltérni a kiválasztott sablontól, akkor mindenképp szükség lesz HTML/CSS módosításokra is.
Így egyedivé varázsolható például a gombok, különféle boxok megjelenése, növelhetjük a betűméretet, változtathatunk a betűszíneken, ami mind-mind hozzájárul ahhoz is, hogy egy könnyebben olvasható és felhasználóbarátabb felületet alakítsunk ki.
Egyedi megoldások Párizs sablonban
Egy több száz vagy akár több ezer terméket listázó webáruházban általában a kategóriafa is elég nagy méretűre tud nőni.
Azonban ha a legördülő menü túl sok alkategóriát listáz, asztali nézetben ez egy kis anomáliához vezethet. A legördülő menü túl fog nyúlni a látvány vonalon és nehézkessé teszi a kattintást.
Kategória lenyíló a régi crystalstore.hu webáruházban.
Ezt a problémát egy egyedi kategória menü vagy más néven mega menü kialakításával lehet orvosolni, amihez HTML/CSS módosításra van szükség.
Edináéknál az Esküvőre kategória kapott egy sokkal átláthatóbb, három oszlopos mega menüt asztali nézetben.
Kategória lenyíló sablon cserét követően.
A kategória egyedi megjelenése mellett gyakori elem a mozaik vagy csempe elrendezésű modulok használata a designban. Ez a megjelenési forma a Párizs sablonban is elérhető, de a használata laikus kezek alatt gyakran kissé káoszos eredményt szül.
Ennél a modulnál fontos, hogy a képek passzoljanak egymáshoz színvilágban, ezt egy plusz filterrel, illetve valamilyen grafikus program használatával (akár a Canva is jó erre a célra) is el lehet érni.
Mozaik menü az új megjelenésben.
A megfelelő módosítással egy esztétikus mozaikos elrendezést tudunk felmutatni a látogatóknak, ahol könnyen megtalálják a legfontosabb információkat, illetve a modul vissza is tudja tükrözni azt az eleganciát és profizmust, amit a Crystalstore márka képvisel a magyar piacon.
Az egyeztetések során Edináék két elemhez ragaszkodtak, amit mindenképp át kellett hozni a Róma sablonból. Ezek az elemek egyébként is egyedi megoldások voltak, szükség volt a termékoldalakon egy “Hasznos információk” blokkra illetve 3 információs kártyára, ami a ruhapróbára, online kurzusra és a kedvezményekre hívja fel a figyelmet. Ezeket az elemeket az új megjelenésbe is átemeltem és az új arculati színekhez igazítottam.
Előnykommunikációs blokk és lokáció modul
Az újabb sablonokban már külön modult kaptak a webáruház tulajdonosok a vállalkozás előnyeinek egyszerű bemutatására. Ezekben a modulokban meghatározott számú előnyt adhatunk meg, feltölthetünk hozzá ikonokat, rövid magyarázó szöveget, a Madrid sablonban már a blokk színét is könnyen meg tudjuk változtatni.
A Párizs sablon beépített előnykommunikációs blokkja.
A projektek többségében én mégis szeretek beáldozni egy egyedi html modult erre a célra, mert így sokkal feltűnőbb és a vállalkozáshoz még inkább igazodó előnykommunikációs blokkot tudunk létrehozni.
A beépített modul helyett egy egyedi html modult használtam a versenyelőnyök megjelenítésére.
Nem volt ez máshogy a crystalstore projekt esetében sem. Egy szép, színben passzoló hátterekkel ellátott doboz rendszerben jelenítettük meg a legfontosabb információkat.
Erre a megoldásra azért is volt szükség, mert a Párizs beépített előny moduljában nincs lehetőség a tartalmak linkelésére, de Edináék szerették volna, ha minden blokk kattinthatóvá válik és a szükséges információs oldalra irányítja a látogatót.
A Madrid sablonban kedvelt modul a Lokáció modul, amit főleg az offline üzlettel rendelkező webáruházak szoktak kihasználni, de más célokra is optimális. A jatekflotta.hu például a kisautókhoz ajándékba járó névre szóló rendszámtábla termékét emeli ki vele előnyként.
A térkép régi megjelenése.
A crystalstore korábban a lábléc információk moduljában jelenítette meg az üzletük térképes elérhetőségét. A sablon váltás során ez egész oldalas megjelenést kapott lábléc fent pozícióban. Így minden oldalon meg tud jelenni.
Az üzlet elérhetősége és nyitvatartása nagyon fontos információ a vállalkozás számára, mivel gyakori, hogy a menyasszony és a koszorús lányok előre egyeztetett ruhapróbán vesznek részt náluk. Illetve az alkalmi ruhák és bikinik esetében sok vásárló a webáruházban nézi ki a terméket és már konkrét elképzeléssel megy próbálni a budapesti üzletbe.
A térkép új megjelenése lábléc fent pozícióban.
A lokáció modul így méltó megjelenést kaphatott egy erre a célra elkülönített egyedi html modul felhasználásával.
Edina és Enikő visszajelzése
“A sablon átalakításból kiemelném a blog cikkek megjelenítését és a mozaik modult. Szuper, hogy kiemelt helyet és egyedi megjelenést kapott a blog, illetve nagyon harmonikus a mozaik modul megjelenése is az összeillő képekkel. Szeretnénk megköszönni a munkád Dorina!”
A projektet körülbelül 5 nap alatt zártam le és adtam át. Pici csúszást okozott egy szerverhiba, ami pont az élesítés tervezett napján következett be, ezért a biztonság kedvéért megbeszéltem Edináékkal, hogy várjunk egy napot, hogy zaklatni tudjam a régi Shoprenteres kollégáimat, ha valami probléma merülne fel az átállás során. 🙂
Nevezzük női megérzésnek, de a sablon aktiválása során tényleg volt egy kis anomália. Redis cache-t kellett törölni, mert ugyan átváltott a bolt Párizsra adminon, de a vásárlói felületen még a Róma megjelenést adta be. Szerencsére nem kell gyakran zaklatnom a Shoprentert SOS kérésekkel, így 10 perc alatt meg is oldódott a probléma, tehát összesen 40 percig volt karbantartáson az oldal az átállás alatt és körülbelül 2 óra alatt végeztem is az élesítéssel.
Az igazat megvallva ez nekem is így új helyzet volt, most először találkoztam ezzel a hibával, így a jövőre nézve változtattam is a projektek menetén és az élesítéseket ezentúl a Shoprenter ügyfélszolgálati idejére időzítem, biztos ami tuti. 🥲
Az új sablonon már a teljes oldalas nanobar és a consent mode is működik, úgyhogy Edináék teljes nyugalommal vághatnak bele az idei alkalmi ruha és fürdőruha szezonba!
Nálad is aktuálissá vált a sablon csere?
Ha te is egy régebbi sablont használsz, vagy úgy érzed, hogy nem áll össze a képernyőn, amit fejben elterveztél keress bátran és egyeztessünk az elképzeléseidről!
Olvasd el a szolgáltatás részleteit bemutató oldalamat és nézd meg a referenciáimat, ügyfeleim véleményét!
Comments