Ha már a London témát használod, témaváltáson gondolkodsz, vagy a webáruházadat indítanád el az új divat témával, akkor jó helyen jársz! Ez a téma azért készült, hogy technikai tudás nélkül is modern, letisztult és prémium megjelenésű webáruházat építhess. Ebben a cikkben végigvezetünk a legfontosabb beállításokon és lehetőségeken, hogy a lehető legtöbbet hozhasd ki a témából.
Először azokat a globális beállításokat mutatjuk meg, amelyek a webshop teljes megjelenésére vannak hatással, például a színeket, alapvető design elemeket vagy az általános struktúrát. Ezután haladunk tovább az egyre specifikusabb részek felé, ahol már az egyes oldalak és szekciók testreszabásával foglalkozunk.
A London téma fejlesztésekor kiemelt szempont volt az akadálymentesség és a nemzetközi WCAG irányelveknek való megfelelés. Ezért a cikk több pontján is találkozhatsz olyan megjegyzésekkel, amelyek például a megfelelő színkontrasztra, a bannerek használatára vagy az egyes felületi elemek működésére hívják fel a figyelmet.
1. Általános téma beállítások
Amikor egy webshop megjelenését alakítod, érdemes először azokat a beállításokat átnézni, amelyek a teljes oldal működésére és a vizuális világára is hatással vannak. A London témában ezek a globális opciók segítenek meghatározni a bolt alapstílusát, tipográfiáját, elrendezését és néhány fontos felhasználói élményt érintő működést is.
⚙️ Ezeket a beállításokat a következő útvonalon találod:
Megjelenés → Téma testreszabás → Sablon beállítások
Ebben a részben olyan döntéseket hozhatsz meg, amelyek a webshop minden oldalán egységesen jelennek meg, a betűtípusoktól kezdve a tartalom szélességén át egészen a termékoldal viselkedéséig.
Betűtípusok és karakterkészletek
A London téma több gondosan kiválasztott betűtípust kínál, amelyek nemcsak esztétikusak, hanem jól használhatók webshop környezetben is. A kínálatban megtalálhatók modern, letisztult sans-serif betűk, valamint elegáns, klasszikus serif típusok is.
A választható betűtípusok között szerepel például a Roboto, amely modern és rendkívül jól olvasható, a Source Serif 4, amely klasszikus könyvszerű hangulatot ad a szövegeknek, vagy a Playfair Display, amely különösen jól működik látványos címeknél. Ha modernebb, minimalista stílust szeretnél, a Poppins vagy az Instrument Sans jó választás lehet, míg az Instrument Serif divatmagazinokra emlékeztető, karakteres megjelenést adhat a webshopnak.
Fontos szempont lehet az is, hogy egyes betűtípusok több karakterkészletet támogatnak (például cirill vagy görög karaktereket). Ha nemzetközi piacra értékesítesz, érdemes olyan típust választani, amely ezeket natívan támogatja. Ha mégsem, akkor sincs gond: a böngésző automatikusan egy rendszerbetűtípussal helyettesíti a hiányzó karaktereket, így a szöveg olvasható marad.
A betűtípusok párosításánál érdemes a márkád stílusát figyelembe venni. Egy elegáns, editorial jellegű webshopnál például jól működhet a Playfair Display címekhez és a Source Serif 4 szövegekhez. Modern, letisztult márkák esetében egy karakteres serif cím és egy könnyen olvasható sans-serif törzsszöveg kombinációja lehet ideális. Ha pedig teljesen minimalista megjelenést szeretnél, akár egységesen sans-serif betűtípusokat is használhatsz.
Oldaltörzs szélesség
A következő fontos döntés az oldal alapelrendezése. A London témában két fő megoldás közül választhatsz.
Az egyik a teljes szélességű elrendezés, ahol a tartalom a képernyő teljes szélességét kitölti. Ez különösen jól működik olyan webshopoknál, ahol erős vizuális tartalomra, például nagy méretű lifestyle képekre vagy látványos bannerekre épül a design. Ilyenkor a webshop modern, magazinszerű megjelenést kap.
A másik lehetőség a fix szélességű (konténeres) elrendezés, amely egy középre igazított tartalmi sávba rendezi az elemeket. Ez strukturáltabb, hagyományosabb webshop megjelenést eredményez, ahol a figyelem inkább a termékeken és a tartalmon marad.
Fontos tudni, hogy ez a beállítás főként az asztali nézetet befolyásolja. Mobilon a rendszer automatikusan a kijelző méretéhez igazítja a tartalmat.
Érdemes arra is figyelni, hogy a választott elrendezéshez megfelelő méretű képeket tölts fel. Teljes szélesség esetén például nagyobb felbontású bannerekre lesz szükség a tűéles megjelenítéshez.
Egyszerűsített mobil termékkártya
A mobilos vásárlás ma már sok webshopnál a forgalom jelentős részét adja. A London téma ezért kínál egy olyan opciót, amely leegyszerűsíti a terméklisták megjelenését mobilon.
Ha ezt a beállítást bekapcsolod, a termékkártyák csak a legfontosabb információkat jelenítik meg: a termék nevét, az árát, a készletinformációt és a legfontosabb gombokat.
Ez tisztább, gyorsabban átlátható felületet eredményez, és csökkenti a felesleges görgetést, ami különösen fontos mobilhasználat közben.
Alkategóriák kezelése
A kategóriaoldalak fontos szerepet játszanak a webshop navigációjában, hiszen itt segíted a vásárlókat abban, hogy gyorsan megtalálják a keresett terméktípust.
A London témában több beállítással is finomhangolhatod ezek megjelenését. Eldöntheted például, hogy az alkategóriák mellett megjelenjenek-e képek, ami vizuálisan segítheti a navigációt. Ha sok alkategóriád van, választhatod a vízszintesen görgethető megjelenést is, amely egy elegáns, lapozható sávban jeleníti meg őket.
A kategóriaoldal fejlécének elrendezését is testre szabhatod. A középre igazított cím elegáns, divatorientált hangulatot ad, míg a balra igazított elrendezés inkább a hagyományos webshop struktúrát követi.
Termékoldali extrák
A London téma több olyan funkciót is kínál, amely közvetlenül javíthatja a vásárlói élményt a termékoldalon.
Az egyik ilyen a görgetés közben is látható kosárba gomb, amely biztosítja, hogy a vásárló bármikor hozzáadhassa a terméket a kosarához, anélkül hogy vissza kellene görgetnie az oldal tetejére.
A termékképek megjelenítésének módját is kiválaszthatod. A listás képelrendezés nagy, egymás alatti képeket jelent, ami különösen jól működik prémium márkáknál. A bélyegképes galéria ezzel szemben kompaktabb megoldás, ahol a fő kép mellett kisebb előnézetek jelennek meg.
Mobilon külön opcióval eldöntheted, hogy ezek a bélyegképek látszódjanak-e. Ha elrejted őket, a felület tisztább marad, és a vásárló figyelme jobban a termékleírásra és a fő képre irányul.
2. Sablon színek
A webshopod vizuális karakterét leginkább a színek határozzák meg. A Sablon színek beállítási részben tudod kialakítani azt az arculatot, amely végigkíséri a bolt teljes felületét, a gomboktól kezdve a linkeken át egészen az árak vagy a lábléc megjelenéséig.
⚙️ Ezeket a beállításokat itt találod:
Megjelenés → Téma testreszabása → Sablon színek
A London téma úgy lett kialakítva, hogy a választott színek ne csak esztétikusak, hanem jól olvashatóak is legyenek. A rendszer automatikusan figyelembe veszi az akadálymentességi irányelveket (WCAG), és intelligensen kezeli a szövegszínek és háttérszínek kombinációját, hogy a tartalom minden látogató számára könnyen olvasható maradjon.
Milyen elemek színeit állíthatod?
Ebben a szekcióban több kulcsfontosságú felületi elem színét szabhatod testre.
Az általános színek határozzák meg a webshop alaphangulatát. Ide tartozik az elsődleges és másodlagos szín, valamint a kiegészítő és előcím színek. Ezek jelennek meg többek között különböző kiemeléseknél, grafikai elemeknél vagy tartalmi blokkoknál.
A gombszínek beállításával szabályozhatod a webshop legfontosabb cselekvési elemeit. Ide tartoznak például a fő gombok, mint a „Kosárba”, illetve a másodlagos gombok, például a „Részletek” vagy más navigációs elemek.
A link és hover színek minden kattintható szöveges hivatkozás megjelenését befolyásolják. Ez különösen fontos a felhasználói élmény szempontjából, hiszen ezek segítenek a látogatóknak felismerni az interaktív elemeket.
A lábléc háttérszíne szintén itt állítható. A rendszer ilyenkor automatikusan úgy választja meg a betűszínt, hogy a kontraszt megfelelő legyen, és a szöveg jól olvasható maradjon.
A termékárak színe külön kategóriát kapott, hiszen ezek kulcsfontosságú információk a vásárlók számára. Külön-külön állíthatod az eredeti ár, az akciós ár és a kedvezmény százalékos jelölésének színét is.
Az értékelési csillagok színe a vásárlói véleményeknél jelenik meg. Ez apró részletnek tűnhet, mégis fontos szerepet játszik a bizalomépítésben és a vizuális visszajelzésben.
Végül a fejléc betűszíne határozza meg a navigációs menüpontok megjelenését, vagyis azt, hogyan látszanak a főmenü elemei a webshop tetején.
Fontos: a pénztár oldal külön beállítás
A sablonszínek a webshop felületének nagy részére érvényesek, azonban a pénztár oldal megjelenésére nem vonatkoznak.
⚙️ A checkout felület külön konfigurálható a következő útvonalon:
Beállítások → Kosár és pénztár beállítások → Pénztár beállítások
Ez azért van így, mert a pénztár egy különösen érzékeny felület, ahol a stabil működés, a biztonság és a jól bevált használati minták elsőbbséget élveznek a design teljes szabadságával szemben.
3. Fejléc
A fejléc a webshop egyik legfontosabb része. Ez az a terület, amellyel a látogatók szinte azonnal találkoznak, amikor megérkeznek az oldalra, ezért kulcsszerepet játszik az első benyomás kialakításában és a navigációban is. A London témában a fejlécet több ponton is testre szabhatod, így könnyen kialakíthatod azt a struktúrát, amely leginkább illik a márkádhoz és a vásárlói útvonalhoz.
⚙️ A fejléc beállításait itt találod:
Megjelenés → Modulok → Fejléc
Ebben a szekcióban többek között a kapcsolati adatok, a kereső működése, a logó elhelyezése vagy akár a menüszerkezet is konfigurálható.
Kapcsolati adatok
A fejlécben lehetőséged van megjeleníteni a legfontosabb kapcsolatfelvételi adatokat, például egy telefonszámot vagy e-mail címet. Ezek ikonokkal vagy ikonok nélkül is megjelenhetnek, attól függően, milyen vizuális stílust szeretnél.
Ha itt nem adsz meg külön adatokat, akkor a rendszer automatikusan az Általános beállítások között megadott elérhetőségeket használja. Ha pedig egyáltalán nem szeretnél kapcsolatfelvételi információkat megjeleníteni a fejlécben, ezt a funkciót egyszerűen ki is kapcsolhatod.
Keresés modul
A kereső a webshop egyik legfontosabb navigációs eszköze. A London témában külön beállíthatod, hogy a kereső kizárólag a terméknevekben, vagy akár a termékleírásokban is keressen. Ez különösen akkor hasznos, ha sok terméked van, és a vásárlók kulcsszavak alapján próbálnak navigálni.
Ezen kívül, az általános kereső helyett használhatod a Rapid Search okoskeresőjét is, ami a profi webáruházak egyik kedvenc alkalmazása. Az alkalmazás telepítéséhez kattints ide.
Fejléc logó
A logó a webshop arculatának központi eleme, ezért érdemes megfelelő formátumban feltölteni.
A legjobb választás egy fekvő tájolású SVG formátumú logó, mert ez minden kijelzőn tűéles marad, legyen szó asztali vagy mobil nézetről. Ha itt nem töltesz fel logót, akkor a rendszer automatikusan az Általános beállítások között megadott logót jeleníti meg.
A London témában a logó elhelyezése is rugalmas: választhatod a középre igazított vagy a balra rendezett elrendezést, attól függően, milyen navigációs struktúrát szeretnél.
Sticky fejléc
A sticky fejléc, más néven rögzített fejléc azt jelenti, hogy a fejléc az oldal görgetése közben is látható marad a képernyő tetején. Ennek nagy előnye, hogy a látogatók bármikor könnyen elérik a fő navigációt, a keresőt vagy a kosarat.
A London témában a kezdőlapon a kategóriamenü részlegesen rögzített elemként működik: csak akkor jelenik meg újra, amikor a látogató felfelé görget. Ez segít abban, hogy böngészés közben ne takarja el feleslegesen a tartalmat.
Fejléc alsó sáv
A fejléc alsó sávjában jelenik meg a kategóriamenü. A London témában többféle megjelenési mód közül választhatsz: a menü megjelenhet a banner felett, áttetsző módon ráhelyezve, vagy akár lebegő elrendezésben is.
Ez a beállítás elsősorban vizuális hatással bír, és segít abban, hogy a webshop designja jobban illeszkedjen a márkád stílusához.
A fejléc menü felépítése
Ahhoz, hogy a fejléc valóban jól működjön navigációs szempontból, érdemes tudatosan kialakítani a menüstruktúrát.
Általános javaslat, hogy a fejlécben legfeljebb 3–4 fő menüpont jelenjen meg. Ez biztosítja, hogy a navigáció átlátható maradjon, és minden képernyőméreten elegáns legyen a megjelenés.
Ha ennél több fontos oldalad van, érdemes logikai csoportosítást alkalmazni. Ilyenkor a fő menüpont alá további elemek kerülnek, amelyek lenyíló menüben jelennek meg. Ezzel egy jól strukturált, könnyen használható menürendszert alakíthatsz ki.
Fontos tudni, hogy a fejlécben létrehozott menüstruktúra, beleértve a szülő-gyerek kapcsolatokat is, automatikusan megjelenik a mobil menüben. Így a látogatók mobilon is ugyanazt az átlátható struktúrát kapják, mint asztali nézetben.
Tipp: A kevesebb gyakran többet ér. Egy letisztult főmenü segít a vásárlóknak gyorsabban megtalálni a termékeket, ami közvetlenül javíthatja a webshop konverziós arányát.
Kupon sáv modul
A kupon sáv egy kiemelt információs sáv, amely általában a fejléc tetején jelenik meg. Célja, hogy azonnal felhívja a figyelmet egy aktuális akcióra vagy kedvezményre.
⚙️ Beállítás útvonala:
Megjelenés → Modulok → Kupon sáv
Ebben a modulban megadhatsz egy címet, egy rövid leírást, valamint egy kuponkódot is.
A London téma egyik kényelmi funkciója, hogy a látogatók a gombra kattintva egyetlen mozdulattal a vágólapra másolhatják a kuponkódot. Ez jelentősen leegyszerűsíti a használatot, hiszen nem kell manuálisan begépelni a kódot a pénztárnál.
Nyelv- és valutaváltó
Ha webshopod nemzetközi piacra is értékesít, fontos, hogy a látogatók saját nyelvükön és pénznemükben is használhassák az oldalt.
A London téma támogatja a nyelv- és valutaváltást, azonban magukat a nyelveket és pénznemeket nem a témán belül kell létrehozni. Ezeket a Shoprenter adminisztrációs felületén tudod hozzáadni.
⚙️ A szükséges beállításokat itt találod:
- Beállítások → Nyelv beállítások
- Beállítások → Árak, árkerekítés, pénznem
Miután ezeket rögzítetted, a téma automatikusan megjeleníti a választókat a webshop felületén.
Mobilnézetben a jobb helykihasználás érdekében a nyelv- és pénznemválasztók a mobil menübe kerülnek át, így nem foglalnak helyet a fejlécben.
Fontos: a nyelvváltó modul használatához legalább Shoprenter Gold csomag szükséges.
Tipp: ha azt szeretnéd, hogy mobilon is a fejléc tetején jelenjenek meg ezek a választók, akkor egyedi fejlesztésre lehet szükség. Ilyen esetben érdemes igénybe venni a Shoprenter fejlesztői szolgáltatásait.
4. Lábléc
A lábléc minden oldal alján megjelenik, ezért fontos szerepet tölt be a webshop felépítésében. Egyrészt segíti a navigációt, másrészt olyan információk elhelyezésére ad lehetőséget, amelyek növelik a látogatók bizalmát, vagy megkönnyítik számukra a tájékozódást.
⚙️ A lábléc moduljait itt tudod kezelni:
Megjelenés → Modulok
A lábléc felépítése
A London téma egy modern, négyoszlopos elrendezést használ, amely átláthatóan rendezi a tartalmakat. Ez a struktúra ideális arra, hogy különböző információkat logikusan csoportosíts, például navigációs linkeket, kapcsolatfelvételi adatokat vagy marketing elemeket.
Hírlevél feliratkozás
A láblécben egy hírlevél feliratkozó modul is elhelyezhető. Ez lehetőséget ad arra, hogy a látogatók közvetlenül a webshop alján iratkozzanak fel a levelezési listádra, ami hatékony módja lehet a későbbi marketingkommunikációnak.
Lábléc logó
A London téma egyik újdonsága, hogy a láblécben nagy méretű boltlogót is megjeleníthetsz. Ez különösen jól működik márkaépítési szempontból, hiszen vizuálisan is lezárja az oldalt, miközben erősíti a brand jelenlétét.
⚙️ A logó beállítását itt találod:
Megjelenés → Modulok → Lábléc logó
5. Dinamikus modulok
A London téma egyik legnagyobb erőssége a rugalmas dinamikus modulrendszer. Ezekkel a modulokkal szinte teljesen szabadon építheted fel az oldalad elrendezését, különösen a kezdőlapon. A blokkok tetszőleges sorrendben helyezhetők el, így könnyedén kialakíthatsz egyedi struktúrát, amely illeszkedik a márkádhoz, a termékeidhez és a vásárlói útvonalhoz.
A modulok kombinálásával egyszerre tudsz vizuális élményt, bizalomépítést és konverziót támogató tartalmakat megjeleníteni. Az alábbiakban a London témában elérhető legfontosabb dinamikus modulokat mutatjuk be.
Bannerkezelő
A bannerkezelő a kezdőlap egyik legmeghatározóbb eleme. Ez az a terület, amely azonnal megragadja a látogatók figyelmét, ezért érdemes stratégiailag használni.
⚙️ Beállítás útvonala:
Megjelenés → Modulok → Bannerkezelő
A modul segítségével képeket vagy akár videókat is megjeleníthetsz, amelyekhez szöveg, gombok és különböző animációk is társíthatók. Gyakorlatilag egy több diából álló vizuális kirakatot hozhatsz létre.
Ez a felület ideális arra, hogy bemutasd a legfontosabb kampányaidat, új kollekciókat vagy a márkád fő üzenetét.
Animációk és vezérlés
A banner animációja kétféleképpen működhet: választhatod a dinamikus csúsztatás (slide) hatást, vagy a visszafogottabb áttűnés (fade) animációt.
A látogatók számára egy lejátszás és szünet gomb is megjeleníthető, amellyel megállíthatják az automatikus váltást. Ez nemcsak kényelmi funkció, hanem az akadálymentességi irányelvek miatt is fontos.
A navigációs vezérlők stílusa szintén testre szabható. Megjelenhetnek pontok, vonalak vagy számozott jelölések, de akár teljesen el is rejthetők.
Videó használata
A London témában már YouTube videó is használható háttérként a főoldali bannerben. Ehhez elegendő megadni a videó linkjét, a rendszer pedig automatikusan némítva és folyamatosan ismételve jeleníti meg.
A legjobb eredmény érdekében érdemes rövid, legfeljebb 10–15 másodperces videót választani, amely hang nélkül is érthető. A banner célja a figyelem megragadása, ezért érdemes olyan képi világot használni, amelyben a termék vagy a fő vizuális elem a kép középpontjában helyezkedik el.
Fontos, hogy mindig állíts be borítóképet is, mert ez jelenik meg addig, amíg a videó betöltődik.
Képek és olvashatóság
A modul több olyan funkciót is tartalmaz, amely segít abban, hogy a bannerek minden eszközön jól működjenek.
Az egyik ilyen a sötét overlay, amely egy enyhe sötét réteget helyez a háttérkép fölé. Ez biztosítja, hogy a világos színű feliratok minden esetben jól olvashatóak maradjanak.
Lehetőség van külön mobil képek feltöltésére is. Ez azért fontos, mert egy széles banner képe mobilon gyakran levágódhat, így a mobilra optimalizált kép segít megőrizni a kompozíciót.
A London téma emellett natív retina támogatással rendelkezik, vagyis a magas felbontású kijelzőkön is éles, részletgazdag képek jelennek meg.
Tartalom elhelyezése
A banner szöveges tartalmának pozíciója teljesen szabadon állítható. A szöveg lehet balra vagy jobbra igazítva, középre rendezve, de akár a képen belül is finoman eltolható. Ez lehetővé teszi, hogy a feliratok mindig a vizuális kompozícióhoz igazodjanak.
Főoldali értékajánlat
A főoldali értékajánlat egy folyamatosan görgő sáv, amelyben rövid, ütős üzenetek jelenhetnek meg.
⚙️ Beállítás útvonala:
Megjelenés → Modulok → Főoldali értékajánlat
Ez a modul kiválóan alkalmas olyan információk kiemelésére, mint például az ingyenes szállítás, a gyors kiszállítás vagy a raktárkészlet megléte. A finom mozgás megragadja a figyelmet, miközben nem zavarja a böngészést.
Főoldali előnyök
A főoldali előnyök modul hasonló célt szolgál, mint az értékajánlat sáv, azonban statikus formában jeleníti meg az információkat.
⚙️ Beállítás útvonala:
Megjelenés → Modulok → Főoldali előnyök
Ebben a blokkban legfeljebb három kiemelt előnyt jeleníthetsz meg. Ez ideális akkor, ha a legfontosabb bizalomépítő üzeneteidet szeretnéd állandó jelleggel megmutatni a látogatóknak.
Sajtómegjelenés
Ez a modul lehetővé teszi, hogy különböző partner- vagy média logókat jeleníts meg.
⚙️ Beállítás útvonala:
Megjelenés → Modulok → Sajtómegjelenés
Az egyik legérdekesebb funkció a szürkeárnyalatos mód, amely egységes megjelenést ad a különböző logóknak.
Akció visszaszámláló
Az akció visszaszámláló egy vizuális elem, amely sürgető hatást kelt az időhöz kötött ajánlatoknál.
⚙️ Beállítás útvonala:
Megjelenés → Modulok → Akció visszaszámláló
A modul segítségével megadhatsz egy címet, leírást és gombot is, miközben a visszaszámláló jelzi, mennyi idő van hátra az ajánlat végéig. Ez különösen hatékony lehet kampányok vagy szezonális akciók esetén.
Görgethető kollázs
A görgethető kollázs egy vizuális történetmesélő modul, amely vízszintesen görgethető képsorozatot jelenít meg.
⚙️ Beállítás útvonala:
Megjelenés → Modulok → Görgethető kollázs
Ez a modul ideális olyan tartalmakhoz, ahol a képek egymást követve mesélnek el egy történetet, például egy kollekció hangulatát vagy egy termék használatának különböző fázisait.
Lépcsőzetes kártyák
A lépcsőzetes kártyák modul egy aszimmetrikus, magazinszerű elrendezést kínál.
⚙️ Beállítás útvonala:
Megjelenés → Modulok → Lépcsőzetes kártyák
A kártyák váltakozó pozícióban jelennek meg, ami dinamikusabb vizuális élményt ad, mint a hagyományos rácsos elrendezés.
Lokáció modul
A lokáció modul segítségével bemutathatod a fizikai üzleted vagy átvételi pontod adatait.
⚙️ Beállítás útvonala:
Megjelenés → Modulok → Lokáció
Ebben a blokkban megadhatod a címet, a nyitvatartást és egyéb kapcsolati információkat. Ez különösen fontos akkor, ha a webshop mellett offline jelenléted is van, mert segít hidat képezni az online és offline vásárlás között.
Történetmesélő
A történetmesélő modul váltakozó elrendezésű kép és szöveg blokkokból áll.
⚙️ Beállítás útvonala:
Megjelenés → Modulok → Történetmesélő
Ez a struktúra ideális márkatörténet, termékbemutatás vagy szolgáltatás ismertetése esetén, mert a cikcakkos elrendezés fenntartja az olvasók figyelmét.
Linkgyűjtemény
A linkgyűjtemény modul lehetővé teszi, hogy több fontos aloldalt egy helyen jeleníts meg.
⚙️ Beállítás útvonala:
Megjelenés → Modulok → Linkgyűjtemény
Ebben a blokkban legfeljebb 15 gomb formájú hivatkozás jeleníthető meg, ami segít a látogatóknak gyorsan elérni például a blogot, dokumentumokat vagy segítség oldalakat.
Videó modul
A videó modul segítségével legfeljebb öt videót jeleníthetsz meg egy szekcióban.
⚙️ Beállítás útvonala:
Megjelenés → Modulok → Videó
A videók hanggal indulnak, és a látogató dönt arról, mikor szeretné elindítani őket. Ez ideális például termékbemutatókhoz, használati útmutatókhoz vagy influencer tartalmakhoz.
Vásárlói vélemények
A vásárlói vélemények modulban különböző ügyfélvisszajelzéseket jeleníthetsz meg.
⚙️ Beállítás útvonala:
Megjelenés → Modulok → Vásárlói vélemények
A vélemények tartalmazhatnak nevet, fotót, csillagos értékelést és szöveges visszajelzést is. Fontos, hogy ez a modul nem szinkronizál a termékoldali értékelésekkel, tehát a tartalmat manuálisan kell feltöltened.
Ez a blokk erős bizalomépítő elem, hiszen kevés dolog győzi meg jobban a bizonytalan vásárlókat, mint mások valós tapasztalatai.
6. Kategória oldal
A kategóriaoldal az egyik legfontosabb felület a webshopban, hiszen itt találkoznak a látogatók először a termékkínálattal. Egy jól felépített kategóriaoldal segít abban, hogy a vásárlók gyorsan átlássák a választékot, könnyen összehasonlítsák a termékeket, és gyorsan megtalálják azt, amit keresnek.
⚙️ A kategóriaoldal megjelenítésével kapcsolatos beállításokat több helyen találod az admin felületen:
- Beállítások → Megjelenítési beállítások
- Beállítások → Általános beállítások → Képek
A London téma több olyan funkciót is kínál, amelyekkel rugalmasabbá és felhasználóbarátabbá teheted a termékböngészést.
Rugalmas termékrács
A London téma egyik újítása, hogy a látogatók maguk is szabályozhatják, hány termék jelenjen meg egy sorban. Ez különösen hasznos nagyobb képernyők esetén, ahol a felhasználók több terméket szeretnének egyszerre áttekinteni.
Széles kijelzőkön akár hat termékkártya is megjelenhet egy sorban, így a böngészés gyorsabbá és áttekinthetőbbé válik.
Interaktív termékkártyák
A kategóriaoldal még interaktívabbá tehető az úgynevezett lapozható termékkártyákkal.
⚙️ Ehhez a következő beállítást kell módosítanod:
Beállítások → Általános beállítások → Képek
Ha itt a „másodlagos termékképek mutatása” opciót Nem értékre állítod, akkor a látogatók közvetlenül a kategóriaoldalon lapozhatják végig a termékhez tartozó képeket. Így anélkül is betekintést kapnak a termék különböző nézeteibe, hogy meg kellene nyitniuk a termékoldalt.
Ez jelentősen felgyorsíthatja a böngészést, különösen olyan webshopokban, ahol a vizuális megjelenés fontos szerepet játszik.
Megjelenő termékek száma
A kategóriaoldalon egyszerre megjelenő termékek számát szintén testre szabhatod.
⚙️ Ehhez a következő útvonalon találod a szükséges beállítást:
Beállítások → Megjelenítési beállítások
Itt a „Katalógus oldalanként megjelenő termékek száma” opció segítségével határozhatod meg, hogy egy oldalon hány termék jelenjen meg.
A megfelelő érték kiválasztása segíthet egyensúlyt teremteni az átláthatóság és a gyors böngészés között. Ha túl sok termék jelenik meg egyszerre, az zsúfolttá teheti az oldalt, míg túl kevés elem esetén a látogatóknak többször kell lapozniuk.
7. Termékoldal
A termékoldal a webshop legkritikusabb pontja: itt dől el, hogy a látogatóból valóban vásárló lesz-e. Éppen ezért fontos, hogy ez a felület egyszerre legyen átlátható, informatív és vizuálisan meggyőző. A London téma több olyan beállítást és modult kínál, amelyekkel a termékoldalt a márkád stílusához és a vásárlói igényekhez igazíthatod.
⚙️ A termékoldallal kapcsolatos beállításokat az alábbi helyeken találod:
- Megjelenés → Téma testreszabás → Sablon beállítások
- Megjelenés → Modulok
Termékoldali alapbeállítások
A London téma több olyan funkciót is tartalmaz, amelyek közvetlenül támogatják a vásárlási döntést.
Az egyik ilyen lehetőség a görgetés közben megjelenő kosárba gomb. Amikor a látogató lefelé görget az oldalon, és túllép az eredeti kosárba gomb pozícióján, egy lebegő sáv jelenik meg, amely továbbra is elérhetővé teszi a vásárlás indítását.
Ez azért különösen hasznos, mert így a vásárlási szándék bármelyik pillanatban azonnal realizálható, anélkül hogy a felhasználónak vissza kellene görgetnie az oldal tetejére.
Média elrendezés
A termékképek elrendezése jelentősen befolyásolja a termékoldal vizuális hatását. A London témában két különböző megjelenési mód közül választhatsz.
Az egyik lehetőség a képek listában elrendezés, ahol a termékfotók teljes szélességben, egymás alatt jelennek meg. Ez a megoldás különösen jól működik olyan webshopoknál, ahol a vizuális részletek kulcsszerepet játszanak, például divat, ékszer vagy lakberendezési termékek esetén.
A másik opció a bélyegképes galéria, amely a klasszikus webshop elrendezést követi. Ebben az esetben egy nagy fő kép jelenik meg, alatta pedig kisebb bélyegképek sorakoznak. Ez a megoldás akkor praktikus, ha sok képet szeretnél megjeleníteni egy termékről, miközben kompaktabb termékoldalt szeretnél fenntartani.
Termékoldali előnyök modul
A termékoldali előnyök modul kifejezetten a vásárlási döntés támogatására készült.
⚙️ Beállítás útvonala:
Megjelenés → Modulok → Termékoldali előnyök
Ez a modul funkciójában hasonló a főoldali előnyök blokkhoz, azonban közvetlenül a termékoldalon jelenik meg. Itt olyan bizalomerősítő információkat érdemes elhelyezni, amelyek segítenek a vásárlónak meghozni a döntést.
Ilyenek lehetnek például az ingyenes visszaküldés, a hosszabb garancia vagy az eredeti termékre vonatkozó garancia. Az ilyen üzenetek közvetlenül a kosárba helyezés előtt növelhetik a vásárlási biztonságérzetet.
Termékoldal szerkesztő és harmonika elrendezés
A Shoprenter külön szerkesztőfelületet biztosít a termékoldal tartalmi elemeinek rendezésére.
⚙️ Elérési útvonal:
Megjelenés → Termékkártya szerkesztő → Termékoldal szerkesztő
Ebben a felületben határozhatod meg, hogy a termékoldalon található különböző blokkok – például a leírás, a paraméterek vagy az egyedi tartalmak – milyen sorrendben jelenjenek meg.
A „2. típusú pozíció” mezőkbe helyezett elemek a termékképtől jobbra, egy lenyitható – úgynevezett harmonika elrendezésben jelennek meg.
Ez azt jelenti, hogy a tartalmi blokkok alapértelmezetten összecsukott állapotban látszanak, és a vásárló döntheti el, melyiket szeretné megnyitni. Az első blokk általában automatikusan nyitott állapotban jelenik meg, a többi pedig zárt.
Ez a megoldás több szempontból is előnyös. Egyrészt helytakarékos, másrészt segít strukturáltan megjeleníteni a hosszabb információkat. A vásárlók így nem vesznek el a hosszú szövegekben, miközben az ár és a kosárba gomb folyamatosan látható marad.
8. Blog és tartalomkezelés
A webshop tartalmi részei, például a blogcikkek, útmutatók vagy inspirációs anyagok nemcsak a vásárlók tájékoztatásában játszanak fontos szerepet, hanem a keresőoptimalizálás egyik alapját is jelentik. A jól strukturált, értékes tartalom segít abban, hogy a webshopod a keresőkben is jobban teljesítsen, miközben szakértői képet alakít ki a márkádról.
A London téma több olyan funkciót is kínál, amelyekkel a tartalmak átláthatóbbá és felhasználóbarátabbá tehetők.
Tartalom címkék
A címkék segítenek rendszerezni a blogbejegyzéseket és gyorsabb tájékozódást biztosítanak az olvasók számára. A London témában a megadott címkék nemcsak a blog listanézetben jelennek meg, hanem a kezdőlapi hírek modulban is láthatóvá válnak.
Ez megkönnyíti a látogatók számára, hogy gyorsan felismerjék a cikk témáját, és könnyebben találjanak kapcsolódó tartalmakat.
Olvasási idő
A rendszer automatikusan kiszámolja, hogy egy adott cikk elolvasása körülbelül mennyi időt vesz igénybe, és ezt az információt a tartalom elején meg is jeleníti.
Ez elsőre apró részletnek tűnhet, de jelentősen javítja a felhasználói élményt. Az olvasók így azonnal látják, hogy egy rövid, gyorsan átfutható tartalomról van szó, vagy egy hosszabb, részletesebb cikkről. Ennek köszönhetően könnyebben döntenek arról, hogy az adott pillanatban belekezdenek-e az olvasásba.
9. Ajánlások a képek méretezéséhez
A webshop vizuális minősége nagyban függ attól, milyen képeket használsz. A jó minőségű, megfelelően optimalizált képek nemcsak esztétikai szempontból fontosak, hanem a betöltési sebességre és a vásárlói bizalomra is közvetlen hatással vannak.
A London téma több olyan technikai megoldást is tartalmaz, amelyek segítenek abban, hogy a képek egyszerre legyenek élesek és gyorsan betöltődők.
Retina kijelzők és intelligens képkezelés
A modern eszközök, például az újabb iPhone-ok, MacBookok vagy prémium laptopok nagy felbontású, úgynevezett retina kijelzőkkel rendelkeznek. A London téma natívan támogatja ezeket a kijelzőket, így a webshopod minden eszközön részletgazdag és éles marad.
Ehhez mindössze annyit kell tenned, hogy jó minőségű, nagy felbontású forrásképeket töltesz fel.
A képkezelés teljesen automatikus, így nem kell külön beállításokkal foglalkoznod. A téma intelligensen felismeri a látogató eszközét, és mindig az optimális képméretet tölti be. Ha egy eszköz nem igényel extra felbontást, akkor a rendszer nem tölt le feleslegesen nagy képfájlokat, ami segít megőrizni a webshop gyorsaságát.
Amennyiben a látogató eszköze indokolja, például egy modern retina kijelző esetén, a rendszer automatikusan a nagyobb felbontású képet jeleníti meg, hogy a vizuális élmény tűéles maradjon.
Fontos azonban, hogy a megjelenített kép minősége mindig a feltöltött forrásfájltól függ. Ha alacsony felbontású képet töltesz fel, azt a rendszer sem tudja élesebbé tenni.
A jó minőségű, optimalizált képek alapvető szerepet játszanak abban, hogy a webshopod professzionális benyomást keltsen és támogassa a konverziót.
Képek a dinamikus modulokban
Amikor képet töltesz fel egy dinamikus modulba, például a bannerkezelőbe vagy a történetmesélő modulba, a rendszer általában megjeleníti az ajánlott képméretet a képválasztó mező mellett.
Ezek az értékek jó kiindulópontot adnak, de nem kötelező őket szigorúan követni. Ha a márkád vizuális stílusa más képarányt igényel, nyugodtan eltérhetsz az ajánlástól.
Automatikus vágás és képarányok
A London téma számos felületen meghatározott képarányokkal dolgozik annak érdekében, hogy az oldal struktúrája minden eszközön esztétikus maradjon.
Egyes modulok, például a termékrácsok vagy bizonyos tartalmi blokkok fix képarányt használnak. Ez biztosítja, hogy a kártyák, feliratok és gombok minden esetben egy vonalban jelenjenek meg.
Ha a feltöltött kép aránya eltér a modul által használt képaránytól, a rendszer automatikusan belenagyít és levágja a képet, hogy az torzítás nélkül kitöltse a rendelkezésre álló területet.
Hogyan optimalizáld a képeket?
A legfontosabb szabály, hogy a kép lényegi része, például a termék vagy az arc mindig a kép középpontjában legyen. Így az automatikus vágás után is biztosan látható marad a legfontosabb elem.
Emellett érdemes következetesen ugyanazt a képarányt használni a webshop teljes termékkínálatában. Ez nemcsak esztétikusabb megjelenést ad, hanem átláthatóbbá is teszi a terméklistákat.
Ha részletesebben is szeretnél elmélyedni a képek optimalizálásában, érdemes átnézni a Shoprenter képekkel foglalkozó tudásanyagát is.
10. Megújult vásárlói fiók
A London téma nemcsak a webshop nyilvános felületét újítja meg, hanem a vásárlói fiók megjelenését is. A korábbi témák egyszerű, táblázatos struktúráját egy modern, vizuálisan rendezett felület váltja fel, amely ikonokkal, jól elkülönített szekciókkal és átláthatóbb navigációval segíti a felhasználót.
Az új kialakítás célja, hogy a vásárlók könnyebben eligazodjanak a saját profiljukban, gyorsabban megtalálják a fontos információkat, és egyszerűbben kezelhessék a beállításaikat.
Új áttekintő oldal
A bejelentkezés után a vásárló egy áttekintő felületre érkezik, ahol a legfontosabb adatok egy helyen jelennek meg. Ez az oldal gyors rálátást ad a profil fő elemeire, így a felhasználóknak nem kell külön menüpontok között keresgélniük.
Itt látható például a vásárló személyes adatainak összefoglalója, beleértve a nevét, e-mail címét és telefonszámát. Ugyanezen a felületen jelennek meg a hűségpontok is, ahol a pontok aktuális mennyisége mellett a lejárati dátum is látható.
A rendszer megjeleníti az alapértelmezett szállítási címet, így a vásárló egy pillantással ellenőrizheti, hogy a rendelései milyen címre kerülnek kiszállításra.
Emellett az áttekintő oldalon elérhető a rendeléstörténet rövid kivonata is, ahol a legutóbbi öt rendelés gyorsan megtekinthető.
Navigáció és beállítások
Az új felület egyik fontos eleme a fix bal oldali menü, amely minden profiloldalon látható marad. Ez megkönnyíti a navigációt, hiszen a vásárlók bármikor gyorsan válthatnak a különböző funkciók között.
A beállítások kezelése is egyszerűbbé vált. A korábban különböző helyeken található opciók most egy közös beállítások oldalon érhetők el. Itt kezelhető a hírlevél-feliratkozás, a regisztráció során adott hozzájárulások, valamint az adatvédelmi beállítások is.
Ide tartoznak például a GDPR-hoz kapcsolódó műveletek, mint a személyes adatok letöltése vagy törlése.
Fontos tudni
A megújult vásárlói fiók a London témában alapértelmezett funkcióként érhető el, így külön beállítást nem igényel.
Ha azonban más Shoprenter témát használsz, de szeretnéd ezt a modern profilfelületet is elérhetővé tenni, akkor erre egyedi fejlesztés keretében van lehetőség. Ilyen esetben érdemes igénybe venni a Shoprenter fejlesztői szolgáltatásait.
11. Mérettáblázat
A mérettáblázat kulcsszerepet játszik a visszaküldések csökkentésében, hiszen a divatcikkek esetében ezek jelentős része a rossz méretválasztásból adódik. Egy jól elhelyezett útmutató nemcsak információt ad, hanem bizalmat is épít, és segít a vásárlási döntésben.
A London témában elérhető mérettáblázat funkcióval egyszerűen automatizálhatod a megjelenítést: kategóriák vagy gyártók alapján rendelheted hozzá a táblázatokat, így azok minden érintett terméknél – akár új feltöltéseknél is – automatikusan megjelennek. A funkció akkor is működik, ha nincsenek méretvariációk megadva.
Nemzetközi értékesítésnél több nyelven is megadhatod a tartalmat, és akár képekkel vagy videókkal is segítheted a vásárlókat a pontos méretválasztásban.
⚙️ A beállítást a Termékek → Mérettáblázat menüpont alatt találod, és jelenleg a London témában, Silver csomagtól érhető el.
Felelősségteljes témakezelés
A London téma nagy szabadságot ad a webshop megjelenésének kialakításában. A sok modul, elrendezési lehetőség és vizuális elem segítségével könnyen egyedi felületet hozhatsz létre. A jó eredményhez azonban nem feltétlenül az vezet, ha minden elérhető funkciót egyszerre használsz.
A hosszú távon jól működő webshopok általában tudatosan építkeznek: átlátható struktúrát, jól szervezett tartalmat és fókuszált oldalakat használnak.
Miért érdemes korlátozni a modulok számát?
Bár csábító lehet minél több dinamikus modult elhelyezni az oldalon, általános javaslat, hogy egy oldalon legfeljebb 10–15 szekció jelenjen meg. Ez több szempontból is előnyös.
Az egyik legfontosabb előny a gyorsabb betöltési idő. Minél több modul jelenik meg egy oldalon, annál több tartalom és médiaelem töltődik be, ami lassíthatja az oldal működését.
A kevesebb modul emellett erősebb fókuszt is biztosít. Ha túl sok információ jelenik meg egyszerre, a látogatók könnyen elveszíthetik a figyelmüket. Egy jól felépített oldal inkább néhány kulcsüzenetre koncentrál, amelyek valóban segítik a vásárlási döntést.
A letisztult struktúra a karbantartást is megkönnyíti. Ha kevesebb tartalmi blokkot használsz, akkor a frissítések és módosítások is gyorsabban elvégezhetők, így több idő jut a minőségi tartalomra.
Végül SEO szempontból is érdemes tudatosan felépíteni a struktúrát. Ahelyett, hogy minden információt a kezdőoldalra zsúfolnál, érdemes külön dedikált aloldalakat létrehozni például a márkatörténet, a szolgáltatások vagy a részletes információk bemutatására.
A rendszer logikus korlátai
A London téma és a Shoprenter platform bizonyos pontokon szándékosan korlátozza az egyes elemek számát. Ezek a korlátok a felhasználói élményt szolgálják.
Például a bannerkezelő modulban általában nem érdemes háromnál több diát használni, mert a látogatók ritkán nézik végig a hosszabb sorozatokat.
Hasonló logika érvényesül a navigációs struktúránál is. A Shoprenter legfeljebb háromszintű kategóriamenüt támogat. Ez egy bevált UX-gyakorlat, mert a túl mély kategóriastruktúra könnyen összezavarhatja a vásárlókat.
Ha bizonytalan vagy abban, hogyan érdemes felépíteni a kategóriarendszert, érdemes megnézni a témában készült részletes útmutatót is.
Támogatás
A London téma használata során az a célunk, hogy a beállítások és a mindennapi használat a lehető legegyszerűbb és legzökkenőmentesebb legyen. Ha kérdésed merül fel a funkciókkal, beállításokkal vagy a működéssel kapcsolatban, több támogatási lehetőség is rendelkezésedre áll.
Az egyik legfontosabb segítségforrás a Shoprenter Akadémia, ahol részletes útmutatókat, lépésről lépésre bemutatott beállításokat és oktatóanyagokat találsz. Érdemes itt kezdeni a keresést, mert a legtöbb gyakori kérdésre már készült részletes magyarázat.
Ha további segítségre van szükséged, a Shoprenter support csapata is rendelkezésedre áll. Szakértő kollégáink a rendszer működésével és a témához kapcsolódó beállításokkal kapcsolatban is készséggel segítenek.
A London téma frissítése
A London téma fejlesztése folyamatos. Rendszeresen dolgozunk azon, hogy új funkciókkal, finomhangolásokkal és technikai fejlesztésekkel még jobb felhasználói élményt biztosítsunk. Az időről időre megjelenő frissítések tartalmazhatnak kisebb hibajavításokat, új modulokat vagy a Shoprenter rendszer legújabb funkcióival való kompatibilitási frissítéseket.
A jó hír, hogy a Shoprenterben a témafrissítések minden ügyfél számára élethosszig ingyenesen elérhetők.
Téma fájl szerkesztő
A Shoprenter admin felületén, a London témában is hamarosan elérhető lesz a Téma fájl szerkesztő, amely segítségével akár teljesen egyedi megjelenést is létrehozhatsz a webshopod számára.
Fontos: A Téma fájl szerkesztő használatát fejlesztőknek javasoljuk! A Shoprenter nem vállal felelősséget a Téma fájl szerkesztőben végrehajtott módosításokért, és az egyedi témát használó boltoknak korlátozottan tud csak támogatást nyújtani. Menj biztosra és bízd a kódolási munkát szakértőinkre, ha egyedi megjelenést szeretnél webáruházadnak!
Fontos azonban tudni, hogy a forráskód módosítása hatással lehet az automatikus frissítések működésére, ezért érdemes előre megismerni a használat feltételeit.
Segítünk az egyedi igényeid megvalósításában!
Ha a webshopod megjelenését vagy működését egyedi funkciókkal szeretnéd bővíteni, lehetőséged van fejlesztői támogatást igénybe venni. A fejlesztői napok szolgáltatás keretében szakértőink segítenek olyan testreszabásokat megvalósítani, amelyek pontosan illeszkednek a márkád és az üzleti céljaid igényeihez.
Automatikus frissítések
Ha a témád forráskódját nem módosítottad, a frissítések automatikusan települnek a rendszerben. Ilyenkor nincs szükség külön beavatkozásra: a Shoprenter elvégzi a frissítést, és erről értesítést is láthatsz a frissítési listában.
Az automatikus frissítés akkor működik, ha a témád forráskódja érintetlen maradt, vagyis nem történt manuális módosítás a téma fájljaiban. Ugyanez érvényes akkor is, ha külső fejlesztő nem végzett egyedi kódszintű módosításokat a sablonban.
Valósítsd meg álmaid webshopját a London témával!
A London témát úgy alkottuk meg, hogy minden funkció benne legyen, amire egy mai modern webáruháznak szüksége lehet.
Ha szeretnéd kipróbálni a London téma összes funkcióját, javasoljuk, hogy indíts egy próbawebáruházat, és 14 napig ingyen, teljes szabadsággal fedezheted fel a benne rejlő lehetőségeket.
