top of page
Szerző képeDorina Miskolczi-Barna

Shoprenter referencia: A crystalstore.hu sablon testreszabása

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.



Crystalstore.hu régi Róma design

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.



Shoprenter szín beállítások admin felületen

Í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. 


róma sablon kategória lenyíló

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. 


Egyedi kategória menü html/css módosításokkal Shoprenterben

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.

Párizs sablon mozaik menü

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.



egyedi modulok elhelyezése termékoldalra Shoprenterben

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.


Párizs sablon előnykommunikációs modul

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.


előnykommunikáció shoprenterben

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.


Róma sablon lábléc megjelenés

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. 


Párizs sablon egyedi lokáció megjelenés

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!


Shoprenter sablon testreszabás

Olvasd el a szolgáltatás részleteit bemutató oldalamat és nézd meg a referenciáimat, ügyfeleim véleményét!


Friss bejegyzések

Az összes megtekintése

Commenti


bottom of page