Webshop sablon: választás, csere és dizájn szerkesztés a CloudCartban

Röviden: a CloudCartban a webshop dizájn kész sablonokból indul, mindegyikhez élő előnézettel. A sablont a Dizájn → Sablonok menüben egy kattintással cseréli, a termékek és a rendelések megmaradnak. A Dizájn → Színek és betűtípusok menüben általában 80-130 színt és nagyjából 88 betűtípust állít be, a főoldalt pedig blokkokból rakja össze. A sablonok minden csomagban benne vannak.

Ez az útmutató annak szól, aki a webáruházát a saját márkájára szabná, ügynökség és programozás nélkül. Ha még azt mérlegeli, hogy ügynökséggel, szabadúszóval vagy bérelhető webáruház rendszerrel dolgozzon, az árak és a határidők összevetését a weboldal készítésről szóló cikkben találja. A CloudCartra, a szófiai e-kereskedelmi platformra vonatkozó tények a platform dokumentációjából, valamint a Dizájn és az Árak oldalról származnak.

Mi az a webshop sablon, és mit lehet benne módosítani

A webshop sablon (más webáruház rendszerekben téma vagy kinézet) a webáruház kész megjelenése: az oldalak elrendezése, a modulok, az alapértelmezett színek és betűtípusok. A CloudCartban minden webshopnak pontosan egy aktív sablonja van, és ez határozza meg, hogyan néz ki a főoldal, a kategória, a termékoldal, a kosár és a blog. A sablon csak a megjelenésért felel. A termékek, a vásárlók és a rendelések külön vannak tárolva, és nem függnek tőle.

A sablon fölött még négy szint van, mindegyik saját képernyővel a Dizájn menüben:

Szint	Hol találja az admin felületen	Mit módosít	Kell hozzá kód?
Sablon	Dizájn → Sablonok	A webáruház teljes megjelenését: elrendezés, modulok, az oldalak blokkjai	Nem
Színek és betűtípusok	Dizájn → Színek és betűtípusok	Általában 80-130 szín, betűtípus, betűméret és vastagság, a termékképek formátuma	Nem
Modulok	Dizájn → Modulok	Bannerek, sliderek, terméksávok, szövegek, fejléc és lábléc	Nem
Oldalak az oldalépítővel	Dizájn → Főoldal, Landing oldalak, Sikeres rendelés, 404-es hibaoldal	Az oldal tartalma, blokkonként, húzással	Nem
Egyedi CSS/JS	Dizájn → Custom CSS/JS	Minden részlet, amelyet a sablon nem kínál beállításként	Igen

Ha olyan vásárlói felületet szeretne, amely egyik sablonra sem hasonlít, az út a Nitrogen, a CloudCart headless technológiája. Erről lent, a Ha a sablon már nem elég részben írunk.

Kinek valók a kész sablonok, és mikor segítenek

A kész sablon annak az új webshopnak segít a legtöbbet, amely az első naptól el akar adni. Az Árak oldal szerint a Baby Pack kész sablonnal kevesebb mint egy nap alatt elindul.

• Új webshop. Az ágazatához illő sablont választ, feltölti a logót és átállítja a színeket.
• Költöző webshop. A termékek a régi oldalról érkeznek (webáruház költözés WooCommerce, Shopify, OpenCart vagy Magento rendszerről), a sablon pedig új megjelenést ad külön dizájnprojekt nélkül.
• Szezonális frissítés. Black Fridayre vagy karácsonyra a bannereket és a főoldalt cseréli, a sablonhoz nem nyúl.

Hogyan válasszon webshop sablont

A sablont az ágazata alapján válassza, és aszerint, hogyan mutat a terméke telefonon. A színt percek alatt átállítja, az elrendezés és a modulok viszont a sablonnal jönnek. A CloudCart sablonjai ágazatok szerint készültek: a Dizájn oldalon 8 látható élő előnézettel (Flair, Fashionista, Beauty treats, Interiors, Hardware, Lifestyle, Motivation, Celebrations), az admin felület katalógusában pedig további, csomagban foglalt és fizetős sablonok vannak.

Választás előtt az élő előnézetben nézze meg:

1. A termékoldalt. Van-e hely több fotónak, termékváltozatoknak (méret, szín) és hosszú leírásnak, ha ilyet használ.
2. A kategóriaoldalt. Hány termék fér egy sorba, és kényelmesek-e a szűrők az Ön termékszámánál.
3. A főoldalt. Milyen modulok vannak: slider, bannerek, terméksávok, blog, vásárlói vélemények.
4. A menüt. Van-e mega menü, ha sok kategóriája van.
5. A telefonos nézetet. Nyissa meg az élő előnézetet a saját telefonján, és menjen végig a főoldaltól a kosárig.

A katalógusban a csomagban foglalt sablonok azonnal telepíthetők, a fizetőst előbb előfizetésként megvásárolja. Az élő előnézet mintatermékekkel mutatja a sablont, a saját termékeivel csak a telepítés után látja.

Mennyibe kerül egy webshop sablon

A CloudCart kész sablonjai minden csomagban benne vannak, a Baby Packtől kezdve, amely éves fizetéssel havi 14 € ÁFA nélkül, a fizetős sablon pedig külön, saját előfizetésként fizetendő. Az ára a katalógusban a vásárlás gombon áll, fizetés után a sablon magától települ. Összehasonlításként: a Shopify Theme Store fizetős témái a cikk írásakor 170 és 420 dollár között mozognak (a katalógus fizetős témáinak első oldala alapján), a Shopify előfizetésén felül. A CloudCart csomagjának árához nem adódik hozzá a forgalom százaléka: a rendelések utáni jutalék 0%.

Lehetőség	Ár	Mikor kész	Kinek való
Csomagban foglalt sablon a CloudCartban	A csomag része: éves fizetéssel havi 14 € és 249 € között, ÁFA nélkül	A regisztráció napján	Új webshop és az a webáruház, amely azonnal el akar adni
Fizetős sablon a CloudCartban	Külön előfizetés, az ár a sablon kártyáján	Közvetlenül a fizetés után	Ágazat, amelyhez speciálisabb vásárlói felületet szeretne
Fizetős téma a Shopifyban	170-420 $ a cikk írásakor, plusz az előfizetés	Vásárlás és beállítás után	Webshop, amely már a Shopifyban van

Fontos: ha regisztrációkor fizetős sablont választ, és nem fizeti ki, az admin felület zárolódik, amíg ki nem fizeti, vagy le nem cseréli egy csomagban foglaltra. A termékei és a rendelései nem vesznek el.

Hogyan cseréli le a sablont: lépésről lépésre

A sablont a Dizájn → Sablonok menüben cseréli, a telepítés gombbal és egy megerősítéssel. Az egész webáruház néhány másodperc alatt átáll.

1. Nyissa meg a Dizájn → Sablonok menüt. Felül az aktív sablont látja asztali és telefonos nézetben, alatta a katalógust.
2. Nyissa meg az élő előnézetet. Nézzen meg egy terméket, egy kategóriát és a kosarat.
3. Kattintson a kiválasztott sablon telepítésére. Fizetős sablonnál a gomb először a fizetéshez visz.
4. Erősítse meg a cserét. Utána üzenet jelzi, hogy a sablon lecserélődött.
5. Ellenőrizze a főoldalt. Az új sablon a saját főoldalát hozza (lent látja, mi marad meg).
6. Nézze át a színeket, a modulokat és a menüt.
7. Várjon, ha még a régi megjelenést látja. A gyorsítótár nagyjából 20 percig a régi oldalakat mutathatja; egy PAT tokennel csatlakoztatott AI asszisztens azonnal kiüríti.

Mi marad meg, és mit érdemes ellenőrizni a csere után:

Adat	A csere után
Termékek, kategóriák, vásárlók, rendelések, blogcikkek	Változatlanok maradnak
A régi sablon színei, betűtípusai és egyedi CSS/JS kódja	A régi sablonhoz mentve maradnak, és visszajönnek, ha újra telepíti
Menü, oldalak és modulok	A bejegyzések megmaradnak, de az új sablon máshol mutathatja őket, vagy egyeseknek nincs helye benne
Modulok, amelyek az új sablonban nincsenek	Nem jelennek meg, amíg nem állít be hasonló modult az új sablonban
Főoldal, Sikeres rendelés, 404-es hibaoldal	Az új sablon a saját oldalait hozza; a régi főoldal a listában marad, de már nem főoldal

Fontos: a sablon cseréjének nincs „visszavonás” gombja. A visszatéréshez a régi sablont telepíti újra. A színei és betűtípusai visszajönnek, a főoldalt viszont újra be kell állítania főoldalnak.

Hogyan állítja át a színeket és a betűtípusokat

A színeket és a betűtípusokat a Dizájn → Színek és betűtípusok menüben állítja át, teljes képernyőn, jobb oldalt az élő webáruházzal. A sablon általában 80-130 színt kínál csoportokba rendezve (alapszínek, promóciós sáv, fejléc, lábléc és mások), valamint nagyjából 88 Google Fonts betűtípust stílus, vastagság és méret választásával.

1. Állítsa át az alapszíneket. A gombok színével kezdje: ez viszi azt a műveletet, amely felé a vásárlót tereli.
2. Válasszon betűtípust. Egy a címekhez és egy a szöveghez elég.
3. Állítsa be a fotók formátumát. Ha a sablon engedi, válasszon álló, fekvő, négyzetes vagy egyedi képarányt. Azt válassza, amelyben a termékeit fotózták.
4. Mentse el. A változások csak mentés után látszanak a webáruházban; a jobb oldali nézet az élő webshop, nem piszkozat.
5. Ellenőrizze mindhárom nézetben. Az előnézet alatt vált a telefon (kb. 375 px), a táblagép (kb. 768 px) és az asztali gép között.

A beállítások sablononként külön mentődnek. A visszaállítás gomb az összes színt és betűtípust egyszerre állítja vissza a sablon alapértékeire; egyetlen színt külön nem lehet visszaállítani.

Hogyan szerkeszti a webshop főoldalát

A főoldalt a Dizájn → Főoldal menüben szerkeszti, amely az oldalépítőt nyitja meg: sorokat és oszlopokat rak össze blokkokból, húzással. Ugyanez az oldalépítő készíti a landing oldalakat, a Sikeres rendelés oldalt és a 404-es hibaoldalt is.

1. Adjon hozzá blokkot. Blokk lehet például termék, „Kosárba” gomb, termékcsomag, cím, gomb, videó, elválasztó, blogcikkek listája, űrlap, vélemények és kód.
2. Rendezze el a blokkokat. Fel-le húzza őket, vagy egy sorba teszi egymás mellé.
3. Tegye közzé. Az automatikus mentések piszkozatok. A webshop a közzététel után mutatja az oldalt.
4. Szükség esetén állítson vissza egy régebbi verziót. Az előzmények a legfeljebb 500 tárolt verzióból az utolsó 50-et mutatják; megnyit egy verziót, és közzéteszi.

Az űrlap, az üzlettérkép és a vélemények blokkja csak a hozzá tartozó alkalmazással jelenik meg (Subscribers, Store Locations, Product Review). Az oldalépítős landing oldalak száma csomagonként korlátozott:

Csomag (éves fizetéssel, ÁFA nélkül)	Landing oldalak vizuális szerkesztővel
Baby Pack, 14 € / hó	5
Starter Pack, 33 € / hó	10
CC Pro, 83 € / hó	100
CC Master, 249 € / hó	250

Az árak és a korlátok az Árak oldalról származnak. A landing oldal hirdetések céloldalaként a leghasznosabb (Facebook-hirdetés, Google Ads): aki egy karácsonyi hirdetésre kattint, csak a karácsonyi termékeket látja, és az onnan jövő eladások külön mérhetők.

A modulok: bannerek, slider és terméksávok

A modulok a sablon kész elemei: slider, bannerek, szövegek, terméksávok, legutóbb megtekintett termékek, kapcsolódó termékek, hírlevél, elérhetőségek, térkép, promóciós sáv, kereső, fejléc és lábléc. A Dizájn → Modulok menüben állítja be őket: megnyitja a részt, rákattint a modul kártyájára, és az oldalsó panelen módosítja a szöveget, a képeket, a termékeket és a linkeket.

A modulok listája az aktív sablontól függ. Új modult ezen a képernyőn nem lehet hozzáadni, a kikapcsolt modul pedig egyszerűen nem látszik a webshopban. A terméksávokban megjelenő termék- és kategórialeírásokat megírhatja az Aura Studio, az admin felület AI munkatársa (AURA).

Webshop menü: hogyan rendezi a navigációt

A menüt a Dizájn → Navigáció menüben rendezi, ahol két fa áll egymás mellett: a fejléc főmenüje és a lábléc menüje. A menüpont vezethet termékre, kategóriára, márkára, cikkre, oldalra, Smart Collectionre vagy külső címre.

• A menü legfeljebb 4 szintű.
• A menüpontokat húzással rendezi át, egy menüpont törlésével az almenüi is törlődnek.
• A menü típusát (legördülő, függőleges vagy mega menü) és a mobilmenü típusát (oldalpanel vagy legördülő) a fejléc moduljában, a Dizájn → Modulok menüben választja ki.

Egy jó webshop menüben 5-7 főkategória van, azokkal a szavakkal elnevezve, amelyekre a vásárlók a Google-ben keresnek. Hogy a kategória neve hogyan hat a keresőoptimalizálásra, azt a webshop keresőoptimalizálásról szóló cikk mutatja be.

Logó, favicon és megosztási kép

A logót a Dizájn → Logó menüben tölti fel, ahol egy panelen van a logó, a favicon (a kis ikon a böngészőfülön) és a kép, amely a webshop közösségi megosztásakor jelenik meg. A logót átlátszó háttérrel töltse fel, és ellenőrizze, hogy világos és sötét háttéren is olvasható-e. A logó elkészítéséről a webshop logó cikk szól. A favicon négyzetes, és 16 px-en is felismerhetőnek kell lennie: egy kezdőbetű vagy a logó jele, felirat nélkül.

Egyedi CSS és JS: mikor van rá szükség

Az egyedi CSS és JS kódot a Dizájn → Custom CSS/JS menüben adja hozzá, és a webshop minden oldalának elejére (head) kerül. Arra használja, amit a sablon nem kínál beállításként: saját betűtípus, nagyobb gomb, elrejtett elem.

Fontos: a kód ellenőrzés nélkül kerül be, a hibás kód azonnal minden oldalt elront. Mentse el a működő változat másolatát, mielőtt újat ment. A kód sablononként külön tárolódik. A Meta Pixelhez, a TikTok Pixelhez és a Google Analyticshez kész integrációk vannak (Meta Pixel, Conversions API és TikTok Pixel a CloudCartban, Google Tag Manager és GA4), ezek biztonságosabbak a kézzel beillesztett kódnál.

Hogyan néz ki a webshop telefonon

A mobilnézet minden CloudCart csomagban benne van, az aktív sablont pedig már az admin felületen is látja telefonos nézetben. A mobilnézet azért döntő, mert Magyarországon a weboldalak látogatásainak 59,33%-a telefonról érkezik a legutóbbi havi adat szerint (StatCounter Global Stats), a Google pedig minden oldalt a mobil változata alapján rangsorol (Google Search Central).

A kiskereskedelemben a mobilos konverzió nagyjából 2,0%, az asztali gépen 3,7% (Contentsquare).

A legbiztosabb ellenőrzés a saját telefonja: rendeljen meg egy terméket az elejétől a fizetésig. A 12 pontos ellenőrzőlista a mobilbarát webshopról szóló cikkben van, a telefonos sebességről pedig a PageSpeed Insights és Core Web Vitals cikk szól.

Dizájn AI asszisztenssel: színek és oldalak egyetlen mondattal

Egy AI asszisztens, például a Claude Code, a ChatGPT Codex, a Gemini CLI vagy a Cursor, átállíthatja a sablon színeit és betűtípusait, ha PAT tokennel összekapcsolja a webshoppal. Az API-n keresztül csak a kért színeket módosítja, és kiüríti a gyorsítótárat, hogy a változást azonnal lássa.

Példamondat: „Mutasd meg, milyen gombszínek vannak a sablonban, állítsd őket sötétzöldre, és utána ürítsd ki a gyorsítótárat, de előbb mutasd meg, mit változtatsz.”

A webshopban végzett módosításoknak nincs „visszavonás” gombja, ezért kérje az asszisztenst, hogy előbb mutassa meg, mit változtat. Hogy mit vállal még át az ügynök a webshopban (e-maileket, hirdetéseket, Search Console-t, riportokat), azt az AI ügynök webshopnak cikk írja le.

Ha a sablon már nem elég: Nitrogen és egyedi vásárlói felület

Ha olyan vásárlói felületet szeretne, amely egyik sablonra sem hasonlít, a CloudCart a Nitrogent kínálja: teljesen az Ön dizájnja szerint készülő headless felületet, miközben a termékkatalógus, a rendelések és a fizetések ugyanabban az admin felületben maradnak. Saját sablont feltölteni nem lehet, ezért a saját dizájn Nitrogen-projekt.

	Kész sablon	Nitrogen
Indulás	A regisztráció napján	Dizájnprojekt után
Ki készíti	Ön, a Dizájn menüből	Az Ön fejlesztője vagy AI asszisztense, illetve a CloudCart csapata
Mi módosítható	Színek, betűtípusok, modulok, oldalak, egyedi CSS/JS	A teljes vásárlói felület, a dizájnnak nincsenek korlátai
Admin felület, katalógus, rendelések	CloudCart	Ugyanaz a CloudCart

A két útról a Dizájn oldalon olvashat bővebben, a regisztrációtól az első rendelésig tartó teljes utat pedig a webshop készítés lépésről lépésre cikk mutatja be. A dizájnnal kapcsolatos kérdéseit írja meg a support@cloudcart.com címre.

Honnan tudja, hogy az új dizájn többet ad-e el

Az új dizájnt három számmal ellenőrzi a csere előtt és után: konverzió, telefonos konverzió és átlagos kosárérték. A Statisztika vásárlási tölcsére a kosár → elkezdett rendelés → rendelés utat külön mutatja telefonra és számítógépre.

1. Jegyezze fel a kiinduló számokat. A csere előtt vegye ki a Statisztikából az utolsó 14 nap konverzióját, telefonos tölcsérét és átlagos kosárértékét.
2. Csendes héten cseréljen, és várjon legalább 14 napot. Kampány nélkül, egyforma időszakokat összevetve tudja, mi okozta a különbséget.
3. Hasonlítsa össze ugyanazokat a számokat. Ha a konverzió csak telefonon esik, a hibát a mobilnézetben keresse: menü, banner vagy kosár gomb.
4. Kérdezze meg az AI ügynököt a rendelésekről. Egy csak olvasási jogú (Read Only) PAT kulccsal csatlakoztatott ügynök, például a Claude Code vagy a ChatGPT Codex, egyetlen mondatra kiszámolja a két időszak rendeléseit, bevételét és átlagos kosárértékét.

Hogy mely mutatókat figyelje, és hogyan számolja őket, azt a webshop KPI mutatókról szóló cikk írja le, a konverziót növelő változtatásokat pedig a konverziós ráta cikk gyűjti össze.

7 bevált gyakorlat a webshop dizájnhoz

1. Egy szín a cselekvésnek. A „Kosárba” gomb olyan színű, amelyet az oldalon máshol nem használ.
2. Termékek felül. Telefonon az első termékek sok görgetés nélkül látszódjanak, ezért a főoldalon egy, alacsony slider legyen.
3. Fotók egy formátumban. Állítsa be a képarányt a szerkesztőben, és minden terméket abban fotózzon.
4. Két betűtípus. Egy a címekhez, egy a szöveghez.
5. Menü a vásárló szavaival. A kategóriák neve az legyen, amire keresnek: „Férfi futócipő”, és ne „Run kollekció”.
6. Szezonális bannerek határidővel. A modulokban azon a napon cserélje őket, amikor a kampány véget ér, hogy ne ígérjenek lejárt kedvezményt.
7. Telefonos próba minden módosítás után. Egy próbarendelés a saját telefonjáról elkapja a hibákat a vásárlók előtt.

Hibák, amelyeket érdemes elkerülni

• Sablon cseréje a szezon csúcsán. Az új sablon a saját főoldalát hozza, és elrejthet modulokat. Csendes napon cseréljen, és utána azonnal ellenőrizze a webshopot.
• Választás az előnézet fotói alapján. Az élő előnézet profi fotókkal készült. Nézze meg, hogyan mutat a sablon az Ön fotóival és termékszámával.
• Visszaállítás egyetlen szín miatt. A visszaállítás minden színt és betűtípust visszaállít. Ha csak egyet szeretne visszahozni, jegyezze fel az alapértékét, és írja be kézzel.
• Nehéz bannerek. Egy több megabájtos banner telefonon lelassítja az oldal leglátványosabb részét. A képeket abban a méretben töltse fel, amelyben megjelennek.

Gyakori kérdések

Ha még nincs webshopja, válasszon sablont, és nézze meg a saját termékeivel: a csomagok és árak.