Labdamedence.hu
Egyedi WooCommerce webáruház labdamedencékhez: saját fejlesztésű konfigurátor, amellyel a szülő két formából, nyolc méretből és 35…
Megnézem a projektet: Labdamedence.hu →
SC-009 · Webáruház
Mélia Kids
Többeladós piactér hazai kézműves alkotók gyerektermékeihez: 22 alkotó kínálata egy felületen, egyedi WordPress témán — oldalépítő nélkül.
Rövid összefoglaló
A Mélia Kids magyar piactér, ahol hazai kézműves alkotók árulják a gyerekeknek és kismamáknak készült termékeiket — fejlesztő játékoktól a házikóágyakon és Montessori bútorokon át a névre szóló ajándékokig. Nem egyetlen webshop: 22 önálló alkotó kínálata fut egy felületen, alkotónként saját szállítási feltételekkel, elszámolással és számlázással.
A projekt a teljes redesign volt: a meglévő, Elementor-alapú sablonrendszer kiváltása egyedi WordPress témával. A kikötés az volt, hogy a működő üzleti logikák — rendelés, fizetés, szállítás, számlázás, alkotói elszámolás — érintetlenül maradjanak, az élő oldal pedig a fejlesztés alatt végig üzemeljen és bevételt termeljen.
Kiindulópont
A piactér működött, de az alapja korlátozta. Az Elementor-réteg minden oldalra ráterhelte a saját kódját — egy többeladós rendszerben pedig ez halmozódik: minden termékoldal, minden alkotói bolt és minden szűrés ugyanazon a nehéz alapon futott. A mobilteljesítmény ennek megfelelően alakult.
A nagyobb gond viszont nem a sebesség volt, hanem a tájékozódás. 470 termék, 22 alkotó és 29 kategória között a vásárlónak magának kellett megtalálnia, amit keresett — miközben a kereső sem látta tisztán, mi hol van. Egy piactér attól piactér, hogy sok mindent kínál; ez azonban csak akkor előny, ha a vevő három kattintáson belül eljut a neki való termékig.
Irány
A feladat ezért nem „szebb design” volt, hanem sablonszintű újratervezés: olyan rendszer, amely 470 termék és 22 alkotó mellett is átlátható marad, gyorsan tölt, és a keresőknek is egyértelműen megmutatja, mije van.
Mindezt úgy, hogy közben egyetlen rendelés se vesszen el. A fejlesztés local környezetben készült, és csak kész, tesztelt állapotban került az élő oldalra — a meglévő rendelési, fizetési és szállítási folyamatokhoz csak ott nyúltunk hozzá, ahol a redesign technikailag elkerülhetetlenné tette.
Megoldás
Egyedi téma, oldalépítő nélkül
A weboldal jóváhagyott dizájnrendszerből és márkabriefből készült, klasszikus WordPress sablonrendszerként. Az Elementor teljesen kikerült a képből: nincs felesleges kódréteg, és minden sablon pontosan azt csinálja, amire való.
- Teljes sablonrendszer: piactér, kategóriák, termékoldal, alkotói boltok, kosár, pénztár, blog
- Fejlesztés local környezetben, majd költöztetés — az élő oldal végig működött
- Teljesítményoptimalizálás: JavaScript-késleltetés, képek lusta betöltése, adatbázis-tisztítás, rendszerszintű ütemezés
- A mobil teljesítménypontszám 53-ról 67-re nőtt, a desktop végig kifogástalan maradt
Szűrés, ami 470 termék között is használható
A piactér szíve a szűrőrendszer. Több szempont egyszerre kombinálható, és a vevő mindig látja, mi van éppen bekapcsolva.
- Több-értékű szűrők: kategória, termékfajta, alkotó, ársáv, akciós és személyre szabható termékek
- Az aktív szűrők külön-külön levehető címkékként jelennek meg — egy kattintás, egy szempont
- A találatok oldalújratöltés nélkül frissülnek
Keresőbarát alapok — a piactér sajátos buktatójával
Egy szűrőrendszer óhatatlanul duplikált tartalmat termel: ugyanaz a terméklista elérhető a szűrőn keresztül és a kategóriaoldalon is. A Google ilyenkor eldönti, melyiket veszi komolyan — és rosszul dönt. Itt ez oda vezetett, hogy a kézzel megírt kategóriaoldali SEO-tartalom nem érvényesült.
- A szűrt címek 301-es átirányítással a valódi kategóriaoldalra visznek, a lapozást és a rendezést megőrizve
- Mind a 29 kategória saját canonical címmel, egyedi metaadatokkal és indexelhető, beágyazott URL-szerkezettel működik
- A hibás címek feltérképezése és rendezése: állandó átirányítás az áthelyezett, „végleg megszűnt” státusz a törölt tartalmakra
- Belső linkelés és webhelytérkép úgy, hogy minden alkategória elérhető és bejárható legyen
Akadálymentesség, ami az egész oldalra kihat
A márka terrakotta színe fehér szöveggel 4,01:1 kontrasztot adott, miközben a WCAG AA 4,5:1-et ír elő. Mivel ez a szín minden elsődleges gomb, a kosárjelvény és a pénztár gomb háttere, a hiba az egész oldalon átment.
- A színtokent néhány százalékkal sötétítettük (4,60:1) — szabad szemmel azonos árnyalat, de már megfelelő
- Címsor-hierarchia helyreállítása a termékoldalakon, a képernyőolvasók és a keresők kedvéért
Pénztár a magyar valóságra szabva
A vásárlás utolsó métere dönti el, lesz-e rendelés. A pénztár ezért magyar logika szerint épült fel, és olyan eseteket is kezel, amelyek egy sablonos webshopból kimaradnak.
- Kéthasábos, magyar sorrendű címmezők, letisztult megjegyzés- és szállítási blokkokkal
- Csomagpontos átvétel és házhozszállítás, alkotónként eltérő feltételekkel
- Céges vásárlás kapcsoló: a vevő megjelölheti, hogy magánszemélyként vagy cégként vásárol — céges módban cégnév és adószám kérhető, NAV-formátum szerinti ellenőrzéssel, a számlázórendszerrel összekötve. Így óvoda, iskola és cég is tud rendelni
Működésfigyelés az átadás után
Egy webshopnál a legveszélyesebb hiba az, amelyik nem látszik: az oldal betöltődik, minden szépnek tűnik, de a vásárlás valahol elakad. Az oldalra ezért automatikus figyelés került, amely negyedóránként végigjárja a valódi vásárlói folyamatot.
- Terméket tesz a kosárba, címet ad meg, szállítási módot választ, és ellenőrzi, hogy a rendszer megjegyzi-e
- Figyeli a félbemaradt fizetéseket és a szerveroldali hibákat
- Hiba esetén azonnal e-mailt küld — és akkor is szól, amikor a hiba megszűnt
Eredmény
- Egyedi téma, sablonfüggőség nélkül — Az Elementor-réteg megszűnt; a rendszer hosszú távon karbantartható, bővíthető alapokra került.
- Gyorsabb mobil élmény — 53-ról 67-re javult teljesítménypontszám, érezhetően gyorsabb betöltéssel, optimalizálás nélkül. Optimalizálással és cache-el 90+ az érték.
- Indexelhető kategóriastruktúra — Mind a 29 kategória saját címmel és leírással kereshető; a szűrt címek a valódi kategóriaoldalra irányítanak.
- Használható szűrőrendszer — 470 termék és 22 alkotó kínálata több szempont szerint, egymással kombinálva szűrhető.
- Akadálymentes színrendszer — A márkaszín a WCAG AA követelménynek megfelelő kontraszttal működik az egész oldalon.
- Céges és intézményi vásárlás — Cégnév és adószám megadható, ellenőrzött formátumban, számlázórendszerrel összekötve.
Tanulságok
A legfontosabb tanulság, hogy egy piactéren a szűrő nem felhasználói felület, hanem keresőoptimalizálási kérdés is. Ahol a vásárló szempontokat kattintgat, ott a háttérben címek százai keletkeznek — és ha ezek nincsenek rendezve, a kereső a saját, megírt kategóriaoldalak helyett a véletlenszerű szűrési kombinációkat látja. A jó szűrő tehát nem ott ér véget, hogy a vevőnek kényelmes.
A második: egy működő boltot átépíteni más műfaj, mint újat építeni. Itt a redesign alatt is folyamatosan érkeztek a rendelések, több tucat alkotó dolgozott a rendszerben, és minden érintett üzleti logika mögött valódi pénzmozgás állt. Ilyenkor a legnagyobb szakmai teljesítmény nem az, amit az ember hozzátesz, hanem amihez fegyelmezetten hozzá sem nyúl.
★★★★★
„Végre egy webfejlesztő, aki nem lehúzni akar, hanem valódi támogatást és működő megoldásokat ad! Ha röviden kéne jellemeznem a Regivel való közös munkát, akkor talán így tudnám összefoglalni.:)) Korrekt. Gyors. Ügyes. Lelkes. Megbízható. Ajánlom őt mindenkinek!"
Projektadatok
- Szolgáltatás: Webshop-fejlesztés, egyedi WordPress téma
- Iparág: Gyerektermék, kézműves piactér
- Rendszer: WordPress, WooCommerce, többeladós piactér
KÖVETKEZŐ LÉPÉS
A te vállalkozásod hogyan nézne ki?
Írd le, hol tartasz most, és megírom, mi lenne a következő jó lépés.
AZ ÜGYFÉL SZAVAIVAL
★★★★★
Valódi támogatás és működő megoldások
Végre egy webfejlesztő, aki nem lehúzni akar, hanem valódi támogatást és működő megoldásokat ad! Ha röviden kéne jellemeznem a Regivel való közös munkát, akkor talán így tudnám összefoglalni.:)) Korrekt. Gyors. Ügyes. Lelkes. Megbízható. Ajánlom őt mindenkinek!
TOVÁBBI MUNKÁK
Nézz körül a többi projektben.
V-Lab Aesthetic
Arculat és weboldal PRP-kezelésekre szakosodott esztétikai rendelőnek: problémából induló főoldal, nyilvános csomagárak, PRP-teszt és beágyazott online…
Megnézem a projektet: V-Lab Aesthetic →
Gyöngyvér Photography
Egyoldalas portfólió-weboldal fotósnak: boudoir-, portré-, családi, kismama- és jegyesfotózás műfajonként, induló árakkal, bemutatkozással és egyetlen kapcsolati…
Megnézem a projektet: Gyöngyvér Photography →