Shoprenter London téma dokumentáció

1. Általános téma beállítások:

1.1 Betűtípusok és karakterkészletek
1.2 Oldaltörzs szélesség
1.3 Egyszerűsített mobil termékkártya
1.4 Alkategóriák kezelése
1.5 Termékoldali extrák
1.6 Shoprenter logó a láblécben

2. Sablon színek

3. Fejléc

3.1 Kupon sáv modul
3.2 Nyelv- és valutaváltó

4. Lábléc

5. Dinamikus modulok

5.1 Bannerkezelő
5.2 Főoldali értékajánlat
5.3 Főoldali előnyök
5.4 SEO h1
5.5 Sajtómegjelenés
5.6 Akció visszaszámláló
5.7 Görgethető kollázs
5.8 Lépcsőzetes kártyák
5.9 Lokáció
5.10 Gyakran Ismételt Kérdések (GYIK)
5.11 Történetmesélő
5.12 Linkgyűjtemény
5.13 Videó
5.14 Vásárlói vélemények
5.15 Termékoldali előnyök

6. Kategória oldal

6.1 Rugalmas termékrács
6.2 Interaktív termékkártyák

7. Termékoldal

7.1 Termékoldali alapbeállítások
7.2 Termékoldali előnyök dinamikus modul
7.3 Termékoldal szerkesztő és “harmonika” elrendezés 🆕

8. Blog és tartalomkezelés

🆕 8.1 Tartalom címkék
🆕 8.2 Olvasási idő

9. Ajánlások a képek méretezéséhez

9.1 Retina kijelzők és intelligens képkezelés 🆕
9.2 Képek a dinamikus modulokban
9.3 Termékképek
9.4 Blog bejegyzések képei
9.5 Automatikus vágás

10. Megújult vásárlói fiók 🆕

11. Felelősségteljes témakezelés

Miért ne használj túl sok modult?
Ismerd meg a határokat

12. Támogatás

13. A London téma frissítése

Automatikus frissítések
Téma fájl szerkesztő
Fejlesztő bérlés szolgáltatás

Ez a dokumentáció segít neked abban, hogy a maximumot hozd ki a London témából. A célunk az, hogy technikai tudás nélkül is egy modern, prémium megjelenésű webshopot építhess.

A dokumentáció felépítése a „kívülről befelé” elvet követi: először a globális beállításokat mutatjuk be, amelyek a webshop minden oldalán egységesen jelennek meg, majd haladunk az egyre specifikusabb, egyedi oldalszekciók felé.

A London téma fejlesztésekor kiemelt szempont volt az akadálymentesség, azaz a nemzetközi WCAG irányelveknek való megfelelés. Ezért találkozhatsz a dokumentáció több pontján is (például a színeknél vagy a bannerkezelőnél) erre vonatkozó megjegyzésekkel.

• Miért fontos ez? Az akadálymentesség biztosítja, hogy webshopod mindenki számára - beleértve a látássérült, gyengénlátó vagy mozgáskorlátozott látogatókat is - könnyen használható legyen.
• Gyakorlati előnyök: Az olyan funkciók, mint a megfelelő kontrasztarányok, a billentyűzettel való navigálhatóság vagy a mozgó elemek (sliderek) megállíthatósága, nemcsak a fogyatékossággal élőknek segítenek, hanem minden vásárlód számára tisztább és logikusabb felhasználói élményt nyújtanak.

1. Általános téma beállítások

Útvonal: Megjelenés > Téma testreszabás > Sablon beállítások

Ezek a beállítások a webshopod globális megjelenését és alapvető logikáját határozzák meg.

1.1 Betűtípusok és karakterkészletek

A London téma válogatott betűkészletei nemcsak esztétikusak, hanem rugalmasak is. Az alábbi listában láthatod, mely típusok támogatják natívan a speciális karakterkészleteket (subset):

• Roboto (Latin, Cyrillic, Greek): Modern, tiszta sans-serif, a legszélesebb körű nyelvi támogatással.
• Source Serif 4 (Latin, Cyrillic, Greek): Klasszikus, jól olvasható serif betűtípus.
• Playfair Display (Latin, Cyrillic): Elegáns, magas kontrasztú serif, amely kiválóan alkalmas hangsúlyos címekhez.
• Poppins (Latin): Geometrikus, modern sans-serif, amely letisztult megjelenést kölcsönöz a blognak és a termékoldalaknak.
• Instrument Sans (Latin): Kortárs, minimál stílusú sans-serif.
• Instrument Serif (Latin): Karakteres, divatlapokat idéző klasszikus serif.
• Inconsolata (Latin): Egyedi, írógépstílusú (monospace) betűtípus a különleges részletek kiemeléséhez.

Párosítási javaslatok

A témát kifejezetten divat- és lifestyle webshopokra optimalizáltuk, a betűtípusok párosításánál ezeket érdemes szem előtt tartani:

1. Szerkesztőségi (Editorial) stílus: Használd a Playfair Displayt a címekhez és a **Source Serif 4-**et az alapszöveghez. Ez a párosítás a prémium divatmagazinok világát idézi.
2. Modern elegancia: Párosíts egy karakteres serif címet (Instrument Serif) egy letisztult, könnyen olvasható sans-serif szöveggel (Poppins vagy Roboto). Ez biztonságos választás minden modern márkának.
3. Minimál design: Ha a termékeid önmagukért beszélnek, használj egységesen sans-serif típusokat, mint az Instrument Sans vagy a Poppins. Ez tiszta, szellős és átlátható felületet eredményez.

1.2 Oldaltörzs szélesség

• Teljes szélességű (fullscreen): Maximalizálja a vizuális hatást, a tartalom 100% kitölti a képernyőt.
  • Mikor használd? Ezt az opciót akkor javasoljuk, ha nagy méretű, prémium minőségű képekkel rendelkezel, és látványos, modern hatást szeretnél elérni.
  • Hatása: Ez a beállítás közvetlenül befolyásolja a bannerkezelő és más vizuális modulok megjelenését. Fullscreen mód esetén nagyobb felbontású képeket kell feltöltened a tökéletes eredményhez.
• Fix szélességű (konténeres): Keretbe foglalja a tartalmat, strukturáltabb és fókuszáltabb megjelenést biztosítva.
  • Mikor használd? Ha a hagyományosabb, rendezett webshop arculatot preferálod, ahol a szöveges és képi elemek egy jól meghatározott sávban maradnak.

Fontos tudni, hogy ez a konfiguráció elsősorban az asztali nézetekre van hatással, mobilon a tartalom automatikusan alkalmazkodik a kijelzőhöz

1.3 Egyszerűsített mobil termékkártya

• Bekapcsolva mobilon csak a legfontosabb adatok (terméknév, ár, készlet információ, gombok) látszanak.

1.4 Alkategóriák kezelése

Ezzel a szekcióval a kategóriaoldalak vizuális felépítését és a navigációt finomhangolhatod, hogy a vásárlók minél könnyebben megtalálják a keresett termékcsoportokat.

• Képek megjelenítése: Dönthetsz, hogy kategória oldalon látszódjanak-e az alkategóriák képei.
• Lapozó: Ha be van kapcsolva, vízszintesen görgethető sávot kapunk (ha van elég kategória hozzá), különben több sorba törnek az elemek.
• Kategória oldal tartalom elrendezése: Itt határozhatod meg a kategória címének és leírásának pozícióját. Választhatsz a “Középen” vagy “Bal” oldali igazítás között.

1.5 Termékoldali extrák

• Kosárba gomb görgetés közben: Mindig látható marad a gomb, így a vásárló bármikor dönthet a vétel mellett.

• Média elrendezés: A "Képek listában" opció nagy, egymás alatti képeket jelent (prémium brandeknek), a "Bélyegképes galéria" a hagyományosabb, helytakarékos megoldás.

  

• Bélyegképek elrejtése mobilon: Ezzel a kapcsolóval eldöntheted, hogy mobilon a fő termékkép alatt megjelenjenek-e a további kisméretű képek (bélyegképek).
  • Igen: A bélyegképek eltűnnek, így a felület tisztább marad. Ebben az esetben egy diszkrét téglalap formájú indikátor jelenik meg a kép alatt, amely jelzi a vásárlónak, hogy több kép is elérhető a galériában.
  • Nem: A kiegészítő képek kisméretben felsorakoznak a fő kép alatt, hasonlóan az asztali nézethez

1.6 Shoprenter logó a láblécben

• Ez a funkció vezérli a „Powered by Shoprenter” hivatkozás megjelenítését a webshop legalsó sávjában.

2. Sablon színek

Útvonal: Megjelenés > Téma testreszabása > Sablon színek

Itt adhatod meg a boltod egyedi arculatát. A téma intelligensen keveri a szöveg színeket a megfelelő olvashatóság érdekében. (akadálymentességi irányelvek alapján)

3. Fejléc

Útvonal: Megjelenés > Modulok > Fejléc

A fejléc az első dolog, amivel a vásárló találkozik. Többek között itt állíthatod be a kapcsolatfelvételi adatokat is.

• Kapcsolati adatok: Megjeleníthetsz egyedi telefonszámot és egyedi e-mail címet ikonokkal együtt vagy ikonok nélkül is. Ha üresen hagyod, az "Általános beállításoknál" megadott adatok jelennek meg. Ha semmilyen kapcsolati adatot nem akarsz megjeleníteni a fejlécben, úgy ezt az opciót egyszerűen kapcsold ki.
• Keresés modul: Beállítható, hogy a kereső a termékleírásokban is keressen-e.
• Fejléc logó
  • Javaslat: Fekvő tájolású, SVG formátum a tűéles megjelenésért. Mobilon is ez jelenik meg. Amennyiben nem töltesz fel semmit, úgy az Általános beállítások oldalon megadott kerül megjelenítésre (ha ott van feltöltve logó)

  • Elrendezés: A London témában a logó lehet a fejlécben középen vagy akár balra rendezve is.

    

• Sticky fejléc: A sticky vagy más néven rögzített fejléc olyan fejlécet jelent, ami az oldal görgetése közben mindig látható marad a képernyő tetején. Ezáltal könnyebben elérhetővé válnak a fontos menüpontok és funkciók az oldalon. A kezdőlapon a kategória menü elérhető részleges rögzített elemként, azaz csak felfelé görgetéskor jelenik meg, így olvasás és lefelé görgetés közben nem zavarja a böngészést.

• Fejléc alsó sáv: Beállíthatod, hogy a kategória menüsáv a banner felett, áttetsző módon rajta, vagy lebegő módon jelenjen meg.

  

Ahhoz, hogy a fejléc átlátható maradjon, érdemes megfontoltan kiválasztani a megjelenített menüpontokat.

• Menüpontok száma: Azt javasoljuk, hogy a fejlécben maximum 3-4 elsődleges szöveges menüpontot jeleníts meg. Ez biztosítja, hogy a navigáció ne váljon zsúfolttá, és minden képernyőméreten elegáns maradjon.
• Csoportosítás: Amennyiben több fontos aloldalt szeretnél elérhetővé tenni, használd a logikai csoportosítást. A több mint 4 menüpontot érdemes szülő-gyerek struktúrába rendezni: ilyenkor a főmenüpontra mutatva a többi elem egy lenyíló menüben jelenik meg.
• Mobil szinkronizáció: Fontos tudnod, hogy a fejlécben beállított menüstruktúra - beleértve a szülő-gyerek szinteket is - automatikusan és teljes körűen megjelenik a mobil menüben is. Így a vásárlóid mobilon is pontosan ugyanazt a logikus felépítést találják, mint asztali gépen.

3.1 Kupon sáv modul

Útvonal: Megjelenés > Modulok > Kupon sáv

Ez egy kiemelt sáv a fejléc tetején (vagy a kezdőlapon), ami azonnali konverziót ösztönöz.

• Működése: Megadhatsz egy címet, rövid szöveget és egy kuponkódot.
• Interakció: A vásárló a gombra kattintva egyetlen mozdulattal vágólapra másolhatja a kuponkódot, amit a pénztárban felhasználhat. Ez sokkal hatékonyabb, mint a kézzel gépelés.

3.2 Nyelv- és valutaváltó

Útvonal: Megjelenés > Modulok > Nyelvváltó modul és Pénznemek

Ha nemzetközi piacra lépsz, elengedhetetlen, hogy boltod több nyelven és valutában is elérhető legyen. A London téma teljes körű támogatást nyújt ehhez, de magukat a nyelveket és pénznemeket a Shoprenter adminisztrációs felületén kell rögzítened.

• Beállítás: A nyelveket és valutákat nem a témán belül, hanem a Shoprenter admin felület megfelelő oldalain adhatod hozzá (Beállítások > Nyelv beállítások, valamint Beállítások > Pénzügyi beállítások > Árak, árkerekítés, pénznem). A téma automatikusan megjeleníti azokat az adatokat, amelyeket a rendszerből kap.
• Megjelenés mobilon: A képernyő optimalizálása érdekében mobilnézetben ezek a választók a mobil menübe kerülnek át, így nem foglalnak felesleges helyet a fejlécben.

4. Lábléc

Útvonal: Megjelenés > Modulok

A lábléc minden oldal alján megjelenik, stabil pontot nyújtva a navigációhoz és a bizalomépítéshez.

• Klasszikus elrendezés: A London téma egy modern, 4 oszlopos struktúrát használ, amely átláthatóan rendszerezi az információkat.
• Információs modulok: Ideálisak szöveges menüpontok (pl. ÁSzF, Szállítási feltételek) listázására. Több információk modult is használhatsz több oszlopba rendezve azokat.
• Kapcsolati adatok és közösségi ikonok: Az “Elérhetőségek” modul segítségével megjelenítheted címedet, telefonszámodat és a közösségi média profiljaidra mutató ikonokat.
• Hírlevél feliratkozás: Integrált modul, amellyel közvetlenül a láblécből gyűjthetsz feliratkozókat.
• 🆕 Lábléc logó: A London témában már lehetőséged van egy nagy méretű boltlogót is elhelyezni a láblécben. Beállítása: Megjelenés > Modulok > Lábléc logó.
• Bizalomépítő ikonok: A fizetési és szállítási módok logói a megszokott módon, az alsó sávban helyezhetők el, növelve a vásárlói bizalmat.

5. Dinamikus modulok

A téma számos testreszabható dinamikus modult tartalmaz, amelyeket tetszőleges sorrendben adhatsz hozzá oldalaidhoz (főként a kezdőlaphoz), így teljesen egyedi elrendezést hozhatsz létre.

5.1 Bannerkezelő

Útvonal: Megjelenés > Modulok > Bannerkezelő

A kezdőlap leglátványosabb eleme, amely jelentős fejlesztéseken ment keresztül a London témában.

A modul lehetővé teszi, hogy képekkel vagy videókkal, feliratokkal és gombokkal ellátott “diákat” adj hozzá az oldaladhoz.

Mikor használd? Ez a webshopod "kirakata". Itt kommunikáld a legfontosabb kampányaidat, az új kollekciókat vagy a márka fő üzenetét.

• Animációk és vezérlés:
  • Átmenet típusa: Választhatsz a dinamikus csúsztatás (slide) vagy a lágyabb áttűnés (fade) között.
  • Lejátszás/szünet gomb: A látogatók manuálisan megállíthatják a váltakozást. Ez kiemelt fontosságú az akadálymentességi irányelvek (WCAG) miatt.
  • Vezérlők stílusa: A léptető lehet pont, vízszintes vonal vagy szám, de akár el is rejthető.
• 🆕 YouTube videó: A klasszikus képek mellett már YouTube videót is beállíthatsz háttérként. Csak a linket kell megadnod, és a videó némítva, végtelenítve fog futni.
  • Ajánlás: Olyan videót válassz, amely 10-15 másodpercnél nem hosszabb és érhető hang nélkül is. Ne reklámfilmet tölts fel. Ne legyen túl gyors vágás. A bannerkezelő = figyelem megragadás. Arc / termék lehetőleg középen, ne legyen széleken fontos információ. „A videó nem gyorsítja az oldalt - csak akkor használd, ha hozzáad. A hero videó = branding. Ha YouTube videót használsz, győződj meg róla, hogy a videón nincs reklám engedélyezve.
  • Borítókép: Mindig állíts be borítóképet, mert ez jelenik meg, amíg a videó töltődik.

• Képek és olvashatóság:
  • 🆕 Sötét overlay: Aktiválható egy sötétítő réteg a képek felett, hogy a fehér feliratok minden esetben jól olvashatók maradjanak (WCAG kompatibilitás).
  • Mobil optimalizálás: Lehetőséged van más képet feltölteni mobilra, így elkerülhető a fontos részek levágása.
  • 🆕 Retina támogatás: A London téma natívan kezeli a retina felbontású képeket. Ez azt jelenti, hogy a látogatók minden eszközön - mobilon, tableten, hagyományos és nagy felbontású kijelzőkön - éles, részletgazdag képeket látnak, ami növeli a vásárlók bizalmát és így közvetlenül az eladásokat is.

• 🆕 Rugalmas tartalom elhelyezés: Minden banner blokknál egyedileg döntheted el a szöveg pozícióját. Lehet balra vagy jobbra zárt, lehet középre rendezett, és a képen belül is eltolhatod a szöveg pozícióját is (pl. bal felül legyen a képen vagy a kép közepén).

  

   

5.2 Főoldali értékajánlat 🆕

Útvonal: Megjelenés > Modulok > Főoldali értékajánlat

Egy sima gördüléssel mozgó sáv, amelyben (kattintható) elemeket helyezhetsz el.

A hazai piac után a nemzetközi terjeszkedés sok webshop számára komoly kihívás.Nem elég lefordítani a szöveget - a teljes megjelenésnek is globális szinten kell működnie.

A London téma kifejezetten olyan Shoprenteres webáruházak számára készült, ahol a vizualitás, a részletek és a nemzetközi megjelenés kulcsszerepet játszanak. Retina-kép támogatásával a termékeid tűélesen jelennek meg minden eszközön. Nemzetközi használatra optimalizált tipográfiával és akadálymentesített nyelvváltó modullal készült, így külföldi vásárlóid számára is professzionális élményt nyújt.

Mikor használd? Kiválóan alkalmas rövid, ütős üzenetek (pl. "Ingyenes szállítás 20.000 Ft felett", "14 napos elállás", "Saját raktárkészlet") folyamatos megjelenítésére. A mozgás megragadja a tekintetet, de nem zavarja a böngészést.

5.3 Főoldali előnyök

Útvonal: Megjelenés > Modulok > Főoldali előnyök

Az előzőhöz hasonló, de fixen megjelenő modul, amelyben maximum 3 kiemelt előnyt tüntethetsz fel, statikus módon.

Mikor használd? Ha a legfontosabb 3 bizalomerősítő érvedet akarod állandó jelleggel, mozgás nélkül az ügyfél elé tárni.

5.4 SEO h1

Útvonal: Megjelenés > Modulok > SEO h1

Speciális szekció, amely a technikai keresőoptimalizálás jegyében született.

Mikor használd? Minden oldalnak szüksége van egyetlen releváns H1-es címsorra a Google számára. Ezzel a modullal úgy helyezheted el a kulcsszavazott főcímet, hogy az esztétikailag is illeszkedjen a London témába.

5.5 Sajtómegjelenés 🆕

Útvonal: Megjelenés > Modulok > Sajtómegjelenés

Lehetővé teszi logók (pl. magazinok, partnerek, médiafelületek) felsorolását.

Szürkeárnyalatos effekt: Bekapcsolva a feltöltött színes logókat egységes szürke árnyalattá alakítja.

Mikor használd? A társadalmi bizonyíték (social proof) egyik legerősebb eszköze. A szürkeárnyalatos mód segít, hogy a sokféle logó ne legyen zavaró, és megmaradjon a webshopod prémium összképe.

5.6 Akció visszaszámláló 🆕

Útvonal: Megjelenés > Modulok > Akció visszaszámláló

Elegáns és sürgető visszaszámláló az időhöz kötött ajánlatokhoz. Beállítható név, leírás, gomb és akadálymentes leírás is.

Okos ütemezés és automatizáció: A modul legnagyobb előnye, hogy automatikusan eltűnik az vásárlói felületről, amint a beállított időzítő eléri a nullát. Ez azt jelenti, hogy nem kell manuálisan figyelned a határidőket és éjfélkor belépned az adminba; a rendszer magától leveszi a lejárt ajánlatot a kezdőlapról.

Mikor használd? Akciók, szezonális leárazások végéhez vagy limitált idejű tartalmakhoz.

5.7 Görgethető kollázs 🆕

Útvonal: Megjelenés > Modulok > Görgethető kollázs

Több képet és leírást mutat be egy sima, vízszintes görgetéssel.

Mikor használd? Vizuális történetmesélésre, ahol a képek egymást követve adnak ki egy kerek egészet (pl. egy termék életútja vagy hangulatképek egy kollekcióról).

5.8 Lépcsőzetes kártyák 🆕

Útvonal: Megjelenés > Modulok > Lépcsőzetes kártyák

Opcionális aszimmetrikus, "fancy" elrendezés, ahol a páros és páratlan kártyák eltolva jelennek meg.

Mikor használd? Ha szakítani akarsz a hagyományos rácsos elrendezéssel. Ez a modul modern, magazinszerű hatást kölcsönöz az oldalnak.

5.9 Lokáció

Útvonal: Megjelenés > Modulok > Lokáció

Ennek a modulnak a segítségével bemutathatod a fizikai üzleted helyszínét, nyitvatartását és elérhetőségeit.

Mikor használd? Ha rendelkezel offline bolttal vagy átvételi ponttal. Segít áthidalni az online és offline világ közötti szakadékot, növelve a bizalmat.

5.10 Gyakran Ismételt Kérdések (GYIK)

Útvonal: Megjelenés > Modulok > Gyakran ismételt kérdések

Világos válaszok a felmerülő kérdésekre, maximum 10 blokkban. A kép elhelyezkedése (bal/jobb) és az első kérdés állapota (nyitva/zárva) is állítható.

Mikor használd? Az ügyfélszolgálati terhelés csökkentésére. Válaszold meg itt a szállítással, garanciával vagy méretezéssel kapcsolatos leggyakoribb kételyeket.

5.11 Történetmesélő

Útvonal: Megjelenés > Modulok > Történetmesélő

Váltakozó (cikcakkos) elrendezésű kép-szöveg blokkok (max. 10).

Mikor használd? Hosszabb bemutatkozásokhoz, márkatörténethez vagy komplex szolgáltatások lépésről lépésre történő bemutatásához. A váltakozó irány fenntartja az olvasó figyelmét.

5.12 Linkgyűjtemény

Útvonal: Megjelenés > Modulok > Linkgyűjtemény

Maximum 15 darab, gomb formájú szöveges hivatkozás.

Mikor használd? Ha sok fontos aloldalt (pl. Segítség, Blog, Dokumentumok, Karrier) szeretnél gyorsan elérhetővé tenni egy helyen, anélkül, hogy a főmenüt túlterhelnéd.

5.13 Videó

Útvonal: Megjelenés > Modulok > Videó

Maximum 5 videó, amelyeket a látogató indíthat el, és hanggal rendelkeznek.

Mikor használd? Termékbemutatókhoz, használati útmutatókhoz vagy influencer videókhoz, ahol fontos a hang és a felhasználó kontrollja.

5.14 Vásárlói vélemények

Útvonal: Megjelenés > Modulok > Vásárlói vélemények

Vásárlói visszajelzések névvel, fotóval, csillagos értékeléssel és szöveggel. Lejátszás/szünet gombbal a váltáshoz. Manuálisan töltheted fel tartalommal ezt a modult, nincs szinkronban a termék értékelés funkcióval, nem ugyanaz a szerepe a kettőnek.

Mikor használd? A konverzió növelésére. Nincs meggyőzőbb egy hezitáló vásárló számára, mint más elégedett emberek valós tapasztalata.

5.15. Termékoldali előnyök

Útvonal: Megjelenés > Modulok > Termékoldali előnyök

Ez a modul a kezdőlapról már ismerős „Értékajánlat” kistestvére, amelyet kifejezetten a kosárba rakás gomb alatti terület bizalommal való megtöltésére terveztünk.

• Stratégiai elhelyezkedés: Ez az utolsó vizuális meggyőzési pont, mielőtt a látogató kosárba tenné a terméket. A gomb közvetlen közelében elhelyezett érvek eloszlatják az utolsó kételyeket is.
• Független tartalom: Bár a felépítése hasonló, a modul tartalma teljesen eltérhet a kezdőlapon használtaktól. Ez lehetővé teszi, hogy míg a főoldalon a márka általános erejét (pl. „10 éve a piacon”), itt a konkrét tranzakciós előnyöket hangsúlyozd.

Mikor és mire használd? Itt olyan ígéreteket fogalmazz meg, amelyek a vásárlási döntést segítik: „30 napos cseregarancia”, „Hivatalos márkaszerviz”, „Azonnali raktárkészlet” vagy „Diszkrét csomagolás”.

6. Kategória oldal

Útvonal: Beállítások > Megjelenítési beállítások és Beállítások > Általános beállítások > Képek

Tedd emlékezetessé a termékböngészést sokoldalú megjelenítési opciókkal.

🆕 Rugalmas termékrács

A látogatók maguk állíthatják a soronkénti termékszámot. Széles kijelzőn ez maximum 6 kártyát jelenthet egy sorban.

🆕 Interaktív termékkártyák

Ha a Beállítások > Általános beállítások > Képek fülön a "másodlagos termékképek mutatás" kapcsoló Nem opcióra van állítva, a vásárlók végiglapozhatják az összes termékképet közvetlenül a kategóriaoldalon, anélkül, hogy belépnének a termékoldalra.

Termékek száma: A kategóriaoldalanként megjelenő termékek számát a Beállítások > Megjelenítési beállítások oldalon, a “Katalógus oldalanként megjelenő termékek száma” beállítással szabályozhatod.

7. Termékoldal

Útvonal:Megjelenés > Téma testreszabás > Sablon beállítások és Megjelenés > Modulok

A termékoldal a webshopod legfontosabb pontja - itt dől el a konverzió. A London téma eszközeivel ezt a felületet a saját márkád igényeihez szabhatod.

7.1 Termékoldali alapbeállítások

• Kosárba gomb görgetés közben: Aktív állapotban egy lebegő sáv jelenik meg a gombbal, amikor a felhasználó túlgörget az eredeti elemen.

  💡Tipp: Érdemes bekapcsolva hagyni, mert így a vásárlási szándék bármelyik pillanatban azonnal realizálható.
• Média elrendezés
  • 🆕 Képek listában: A termékfotók teljes szélességben, egymás alatt jelennek meg.
    • Mikor válaszd? Ha prémium, vizuálisan hangsúlyos termékeid vannak (pl. divat, ékszer, lakberendezés), ahol a részletek kidolgozottsága a fő eladási érv.
  • Bélyegképes galéria: Hagyományos elrendezés egy főképpel és alatta kis bélyegképekkel.
    • Mikor válaszd? Ha nagyon sok képed van egy termékről és kompaktabb termékoldalt szeretnél.

7.2 Termékoldali előnyök dinamikus modul

Útvonal: Megjelenés > Modulok > Termékoldali előnyök

Ez a modul funkciójában megegyezik a főoldali változattal, de kifejezetten a termékoldalra optimalizálva.

Mikor válaszd? Itt olyan bizalomerősítő érveket jeleníts meg, amik közvetlenül a kosárba rakás előtt segítenek (pl. „Ingyenes visszaküldés”, „2 év garancia”, „Eredeti termék”).

7.3 Termékoldal szerkesztő és “harmonika” elrendezés 🆕

Útvonal:Megjelenés > Termékkártya szerkesztő > Termékoldal szerkesztő

A Shoprenter külön adminisztrációs felületet biztosít a termékoldal elemeinek sorrendezéséhez.

A „2. típusú pozíció” mezőkbe helyezett tartalmak (például a “Leírás”, “Paraméterek”, “Egyedi tartalom”) a termékképtől jobbra, lenyitható (collapsible) “harmonika” módon jelennek meg.

Logika: Az első blokk alapértelmezetten nyitva van, a többi zárt. Több blokk is lehet egyszerre nyitva.

Miért jó ez? Helytakarékos és strukturált. A vásárló nem veszik el a hosszú szövegekben, csak azt nyitja le, ami érdekli, miközben a „Kosárba” gomb és az ár folyamatosan a látóterében marad.

8. Blog és tartalomkezelés

A szöveges tartalmak nemcsak a vevők tájékoztatását szolgálják, hanem a keresőoptimalizálás (SEO) tartópillérei is.

🆕 Tartalom címkék

A megadott címkék mostantól nemcsak a blog listában, hanem a kezdőlapi hírek modulban is láthatóak lesznek. Ez segíti a vásárlót a témák közötti tájékozódásban.

🆕 Olvasási idő

A rendszer automatikusan kiszámolja a tartalom alapján, hogy mennyi időt vesz igénybe a cikk elolvasása, és ezt meg is jeleníti a tartalom elején.

Miért jó ez? Növeli a felhasználói élményt, mert a vevő látja, hogy egy gyors 2 perces tippről vagy egy mélyebb, 10 perces szakmai elemzésről van szó, így könnyebben dönt az olvasás mellett.

9. Ajánlások a képek méretezéséhez

9.1 Retina kijelzők és intelligens képkezelés 🆕

A London téma egyik funkciója a retina-támogatás, amely biztosítja, hogy webshopod a legújabb, nagy felbontású kijelzőkön is kristálytiszta legyen. Ehhez mindössze annyit kell tenned, hogy jó minőségű, nagy felbontású forrásképeket töltesz fel.

Ez a fejezet segít abban, hogy a retina képeid ne csak szépek és élesek legyenek, hanem a webshopod sebességét is támogassák.

• Teljes automatizmus: Neked semmilyen extra beállítással nem kell foglalkoznod, a téma mindent elintéz helyetted.
• Intelligens érzékelés: A látogatók eszközéhez igazodva mindig az optimális képméret jelenik meg, elkerülve a felesleges adatforgalmat. Akinek a kijelzője nem igényel extra felbontást, annál a rendszer nem tölt be feleslegesen nagy fájlokat. Ezáltal a webshopod sebessége mindenki számára optimális marad, és csak ott használunk több adatot, ahol az valóban látványos minőségjavulást eredményez.
• Dinamikus betöltés: Ha a látogató eszköze indokolja (például egy modern iPhone vagy MacBook kijelzője), a téma automatikusan a nagyobb felbontású képváltozatot tölti be, hogy a látvány tűéles legyen.
• Sebesség-optimalizálás: Annak érdekében, hogy a webshopod villámgyors maradjon, a feltöltött képeket a rendszer automatikusan WebP formátumra konvertálja a megjelenítéskor. Ez a modern formátum sokkal kisebb fájlméretet eredményez azonos minőség mellett, így a sebesség mindenki számára optimális marad.

A kiváló minőségű, mégis gyorsan betöltődő képek alapvetőek a vásárlói bizalom építéséhez és a konverziók növeléséhez.

• Formátum választás: A gyors betöltés érdekében a JPG formátum használatát javasoljuk. A gyors betöltési idők tartása érdekében a meglévő PNG és JPEG formátumú képeket a rendszer WebP-re konvertálja és ebben a formátumban jelenítjük meg a vásárlói felületen. Az eredeti képek nem változnak meg, csak a vásárlói felületen fognak .webp kiterjesztéssel megjelenni. Azon helyeken, ahol a rendszer nem konvertál WebP képeket de mégis azt szeretnénk használni, oda direktben WebP formátumban javasoljuk a képek feltöltését. Ilyen például a hírlevél feliratkozás modul illetve minden egyedi, szöveges tartalom oldal mint például a blog bejegyzések.
• Amit kerülj: Lehetőleg ne használj GIF-eket, mert ezek lassíthatják az oldal betöltését.
• PNG vs. JPG: PNG formátumot akkor válassz, ha feltétlenül szükséged van átlátszó háttérre. (A PNG fájlok akár kétszer nagyobbak is lehetnek, mint a hasonló minőségű JPG képek.)

9.2 Képek a dinamikus modulokban

Amikor képet töltesz fel egy dinamikus modulba (pl. bannerkezelő vagy történetmesélő), az ajánlott méretet általában a képválasztó mező mellett találod meg.

9.3 Termékképek

A termékképek esetén először döntsd el, melyik méretarány illik legjobban a terméktípusodhoz.

• Álló (portré) képek: Ideálisak hosszúkás termékekhez, például ruhákhoz. Példa ajánlott méret: 1800 x 2400 px, JPG formátumban.
• Négyzetes (1:1) képek: Kiválóan működnek elektronikai cikkekhez vagy kiegészítőkhöz. Példa ajánlott méret: 1800 x 1800 px, JPG formátumban.

9.4 Blog bejegyzések képei

Ezek a képek a kezdőlapon (Hírek modul) és a blog lista oldalon jelennek meg.

Ajánlott méret: Fekvő tájolás, például 1200 x 600 px, JPG formátumban.

9.5 Automatikus vágás

Annak érdekében, hogy a webshopod ne essen szét, és a termékrácsok, galériák, modulok esztétikusak maradjanak, a rendszer meghatározott képarányokkal dolgozik.

• Fix arányú elemek: Vannak olyan modulok, ahol a téma fix képarányt alkalmaz (pl. 1:1 négyzetes), függetlenül a feltöltött kép eredeti méretétől. Ez biztosítja, hogy a gombok, feliratok mindig egy vonalba essenek.
• Belenagyítás és vágás: Ha a feltöltött kép vagy videó aránya eltér a modul beállításától, a rendszer automatikusan "belenagyíthat" (zoom), hogy a tartalom torzulás és üres sávok nélkül kitöltse a rendelkezésre álló keretet.

Hogyan optimalizálhatod?

• Fókuszpont középen: A legfontosabb tanács, hogy a fotó vagy videó lényegi része (pl. az arc vagy a termék) mindig a kép mértani közepére essen. Így az automatikus vágás után is garantáltan látható marad a fő üzenet.

  

• Egységes méretarány: Törekedj arra, hogy a boltodban minden termékkép ugyanazt a méretarányt (álló, fekvő vagy négyzetes) használja. Az egységes képméretek homogén, profi megjelenést biztosítanak a terméklistákban.

10. Megújult vásárlói fiók 🆕

A London témával nemcsak a webshop "kirakatát", hanem a belső, vásárlói felületeket is modernizáltuk. A korábbi témákban megszokott egyszerű táblázatos elrendezés helyett egy teljes körű vizuális megújítás történt: a felület modern ikonokkal, átlátható szekciókkal vált esztétikusabbá és használhatóbbá.

• Új áttekintő oldal: A belépés után a vásárló egy összefoglaló oldalt lát, ahol azonnal elérhetők a legfontosabb információk:
  • Személyes adatok: Név, e-mail és telefonszám kiemelt helyen.
  • Hűségpontok: Az elérhető pontok mennyisége és lejáratuk dátuma is látható.
  • Szállítási cím: Az alapértelmezett cím azonnali áttekintése.
  • Rendeléstörténet: A legutóbbi 5 rendelés gyors elérése.
• Navigáció és beállítások:
  • Fix bal oldali menü: A profil minden aloldalán egy állandó menü segíti a gyors navigálást a funkciók között.
  • Integrált beállítások: Egyetlen közös “beállítások” oldalra költözött a hírlevél-feliratkozás, a regisztrációs hozzájárulások kezelése, valamint az adatvédelmi műveletek (GDPR), mint a személyes adatok letöltése vagy törlése.

11. Felelősségteljes témakezelés

A London téma hatalmas szabadságot ad, de a hosszú távú siker érdekében érdemes követni az alábbi bevált gyakorlatokat.

Miért ne használj túl sok modult?

Bár csábító lehet minden modult bekapcsolni, javasoljuk, hogy egy oldalon maximum 10-15 szekciót használj. Ez az alábbi előnyökkel jár:

1. Jobb teljesítmény: A kevesebb modul gyorsabb betöltési időt eredményez.
2. Erősebb fókusz: Ne áraszd el tartalommal a vevőt. A kevesebb, de relevánsabb információ több konverziót hoz.
3. Könnyebb karbantartás: Kevesebb szöveget kell frissítened, így a minőségre koncentrálhatsz.
4. Hatékonyabb SEO: Ahelyett, hogy mindent a főoldalra zsúfolnál, hozz létre dedikált aloldalakat (pl. „Rólunk”).

Ismerd meg a határokat

• Blokkok száma: Bizonyos modulokban szándékosan korlátozzuk a felvehető elemek számát. A kutatások szerint a látogatók ritkán néznek meg például a bannerkezelő modulban háromnál több diát.
• Navigáció: A Shoprenter maximum 3 szintű kategória menüt támogat. Ez a felhasználói élmény aranyszabálya: ha ennél mélyebb a struktúra, a vevő eltéved.

12. Támogatás

Célunk, hogy a London témával való élményed zökkenőmentes és sikeres legyen. Ha bármilyen kérdésed van a beállításokkal vagy a funkciókkal kapcsolatban:

• Shoprenter Akadémia: Böngészd át az átfogó tudásbázist és az oktatóanyagokat.
• Shoprenter support: Szakértőink készséggel válaszolnak a témaspecifikus kérdéseidre is.

13. A London téma frissítése

Folyamatosan dolgozunk a London téma tökéletesítésén, és rendszeresen adunk ki frissítéseket. Ezek tartalmazhatnak kisebb hibajavításokat, új szekciókat vagy a Shoprenter legújabb funkcióival való kompatibilitást.

Ingyenes frissítések: A Shoprenterben a témafrissítések élethosszig ingyenesek minden ügyfél számára.

Automatikus frissítések

Amennyiben nincs semmilyen kódszintű egyedi módosítás a témádban, a Shoprenter automatikusan végzi a frissítéseket, és erről üzenetet jelenít meg a frissítési listán. Az automatikus frissítés feltételei:

• Érintetlen forráskód: Nem végeztél egyedi módosításokat a téma forráskódjában a téma fájl szerkesztő segítségével.
• Nincs egyedi fejlesztés: Nem bíztál meg külsős fejlesztőt, aki manuálisan módosította a téma kódját.