Editor šablón e-shop: ako si poskladáte obchod bez programátora

Väčšina podnikateľov narazí na rovnaký problém: e-shop chcú mať presne po svojom, no každá drobná zmena znamená správu vývojárovi a faktúru navyše. Editor šablón e-shop v NexusShop tento kolotoč preruší. Stránky skladáte ťahaním blokov, texty a farby meníte v paneli a výsledok hneď vidíte na počítači, tablete aj mobile. V článku vás prevedieme celým postupom od prvej stránky až po kontrolný zoznam pred zverejnením.

Čo je editor šablón e-shop a prečo ho nepotrebujete programovať

Editor šablón e-shop je vizuálny nástroj, v ktorom stránky obchodu skladáte ťahaním blokov, upravujete texty a farby v paneli a sledujete náhľad pre počítač, tablet a mobil. Namiesto písania kódu pracujete s hotovými prvkami, takže zmenu zvládnete sami a za pár minút.

Aby ste sa v editore rýchlo zorientovali, oplatí sa rozlišovať tri pojmy:

• Téma – celá sada šablón vášho obchodu.
• Sekcia – veľký blok stránky, napríklad úvodný banner alebo karusel produktov.
• Modul – menší prvok vo vnútri sekcie, napríklad odpočet, mapa či akordeón.

Editor sme vytvorili sami a nie náhodou. Univerzálny nástroj by ste museli dlho prispôsobovať, kým by sedel live predaju. Náš editor je od začiatku prepojený s NexusLive, produktmi a skladom, takže napríklad živé vysielanie vložíte na stránku ako hotovú sekciu. Viac o ňom nájdete na stránke Vlastný editor šablón a stránok.

Z čoho sa skladá editor: sekcie, moduly a knižnica

Editor nie je prázdne plátno, na ktorom by ste museli všetko vymýšľať. Ponúka súbor sekcií, modulov a hotových blokov, z ktorých poskladáte takmer akúkoľvek stránku.

9 typov sekcií témy:

• hero banner,
• karusel produktov,
• video sekcia,
• live stream,
• prehliadač kategórií,
• banner výhod,
• časová os alebo feed,
• newsletter,
• vlastné HTML.

11 modulov do každej sekcie: akordeón, kontaktný formulár, odpočet, oddeľovač, slider obrázkov, mapa, fotogaléria, sociálne odkazy, medzera, taby a video slider. K nim pribúdajú navigačné prvky: účet, košík, odkaz, vyhľadávanie a kontajner.

Knižnica hotových vecí: 8 blokov a 5 celých stránok. Nezačínate od nuly, bloky len upravíte podľa seba. Praktické je to najmä pri stránkach typu FAQ, kde stačia taby alebo akordeón.

Rozloženie obrazovky je prehľadné: horná lišta, panel nástrojov, plátno, panel úprav, živý náhľad a undo pre návrat o krok späť. Celé je to súčasť vlastného e-shopu s editorom šablón.

Postup krok za krokom: prvá stránka za jedno popoludnie

Prvú stránku zvládnete poskladať za jedno popoludnie. Postupujte takto:

1. Spustite sprievodcu novou stránkou. Vyberiete si hotovú stránku z knižnice alebo prázdne plátno.
2. Pridajte sekcie ťahaním. Pre úvodnú stránku funguje osvedčené poradie: hero s jasnou výzvou na akciu, produktový karusel, banner výhod a newsletter.
3. Upravte texty, obrázky a farby v paneli. Potom v náhľade prepnite desktop, tablet a mobil a skontrolujte, ako stránka vyzerá na telefóne.
4. Použite dynamické tagy z produktov. Názvy a ceny sa doťahujú automaticky, nemusíte ich ručne prepisovať a pri zmene ceny nezostane na stránke stará hodnota.
5. Uložte, skontrolujte náhľad a zverejnite. Ak sa vám zmena nepáči, vrátite ju cez undo alebo cez export a import dizajnu.

Export a import dizajnu oceníte, keď chcete skúšať väčšie úpravy: aktuálny stav si uložíte a kedykoľvek sa k nemu vrátite. Pre pokročilých je k dispozícii aj vlastné CSS a animácie, bežne ich však nepotrebujete.

Témy, skiny a vlastné fonty: zmena vzhľadu bez straty obsahu

Vzhľad obchodu môžete zmeniť bez toho, aby ste prišli o obsah. Téma je celá sada šablón, skin je farebnosť. Pred aktiváciou si zobrazíte náhľad a ak sa nová podoba nepáči, vrátite sa jedným klikom.

Čo všetko môžete doladiť:

• hlavička a pätka s hotovými presetmi,
• self-host fonty a vlastné fonty pre zladenie s vašou značkou,
• vlastné CSS a animácie pre tých, ktorí chcú ísť ďalej.

Dôležitá je jednotnosť. Ak predávate cez live vysielania, zladte farby a písmo e-shopu s vizuálom vašich streamov, banerov a príspevkov. Zákazník tak vníma jednu značku a nemá pocit, že z vysielania prišiel na cudzí web. Nástroje na vizuál vysielania nájdete v časti Vlastné vysielanie NexusLive.

Live stream sekcia: keď e-shop predáva aj počas vysielania

Špeciálnou sekciou je live stream. Je napojená na NexusLive a na vašom e-shope zobrazí prehrávač, pripnutý produkt, výber variantu a košík na jednej obrazovke. Košík v prehrávači je zatiaľ v beta režime a modul otvárame nájomcom postupne. Podrobnosti nájdete na stránke Nákup počas live na vlastnom e-shope.

Na hlavnú stránku sa hodí aj modul odpočet. Umiestnite ho tesne pod hero banner a nastavte na štart najbližšieho vysielania alebo na koniec akcie. Návštevník hneď vidí, kedy sa oplatí vrátiť.

Po skončení vysielania vznikne záznam s produktmi na časovej osi. Zákazník klikne na produkt, video sa pretočí na moment predstavenia a nakúpi aj po skončení live.

Dôležité je, že na live predaj nie ste odkázaní. E-shop funguje ako klasický obchod a live zapnete, keď budete chcieť. Pre túto cestu je určená stránka Pre klasický e-shop.

AI pomocník, preklady a SEO: čo editor dopĺňa

Editor nestojí osamote, dopĺňa ho niekoľko nástrojov, ktoré ušetria prácu:

• AI návrh dizajnu: AI navrhne rozloženie a vy doladíte detaily. Je to dobré východisko, nie hotový verdikt.
• AI produkty z fotky: produkt do katalógu založíte z fotky a potom sa zobrazí v karuseloch a kategóriách. Pozrite AI tvorbu produktov.
• Viacjazyčnosť: prekladač spracuje produkty, kategórie a stránky a hreflang so sitemapou sa vytvoria samy. Cenu prekladu vidíte vopred. Viac v článku Predaj v 10 jazykoch.
• SEO základy: pekné URL, meta údaje, CMS stránky a blog priamo v e-shope. Prehľad nájdete v časti SEO a AI obsah.

Najčastejšie chyby pri skladaní e-shopu a ako sa im vyhnúť

• Preplnená úvodná stránka. Menej sekcií a jedna jasná výzva na akciu na každú sekciu.
• Zabudnuté mobilné zobrazenie. Vždy skontrolujte náhľad pre telefón, veľká časť zákazníkov nakupuje z mobilu.
• Ručné prepisovanie cien a názvov. Používajte dynamické tagy, ušetríte čas a vyhnete sa chybám.
• Príliš veľa fontov a farieb. Držte sa jedného skinu a dvoch fontov.

Pred zverejnením prejdite tento kontrolný zoznam:

1. Skontrolovali ste náhľad pre desktop, tablet a mobil?
2. Má každá sekcia jednu jasnú výzvu na akciu?
3. Sú ceny a názvy z dynamických tagov?
4. Zodpovedajú farby a písmo vašej značke?
5. Fungujú odkazy, košík a vyhľadávanie?
6. Máte uloženú zálohu dizajnu cez export?

Časté otázky

Potrebujem na prácu s editorom šablón e-shopu vedieť programovať?

Nie. Stránky skladáte ťahaním hotových sekcií a modulov, texty a farby meníte v paneli a výsledok vidíte v náhľade. Kód potrebujete len vtedy, ak chcete pokročilé úpravy cez vlastné CSS alebo animácie, no bežná prevádzka obchodu to nevyžaduje.

Viem si vrátiť zmeny, ak sa mi nový vzhľad e-shopu nepáči?

Áno. Pri zmene témy alebo skinu vidíte náhľad ešte pred aktiváciou a späť sa vrátite jedným klikom. Pri úprave stránok môžete použiť undo a dizajn si môžete uložiť aj exportom a neskôr naimportovať.

Dá sa v editore zobraziť live vysielanie priamo na mojom e-shope?

Áno, na to slúži sekcia live stream napojená na NexusLive. Zobrazí prehrávač, pripnutý produkt, výber variantu a košík. Košík v prehrávači je zatiaľ v beta režime a modul otvárame nájomcom postupne.

Zhrnutie

Editor šablón e-shop v NexusShop vám dáva kontrolu nad vzhľadom obchodu bez programátora: 9 typov sekcií, 11 modulov, knižnicu hotových blokov a stránok, témy so skinmi a živý náhľad na všetkých zariadeniach. Začnite hotovou stránkou, držte sa jednoduchého rozloženia a pred zverejnením skontrolujte mobil. Ak chcete editor vyskúšať na vlastných produktoch, pozrite si cenník a využite 7 dní zadarmo bez platobnej karty.