Dizajn obchodu

Dizajn obchodu je editor, v ktorom skladáte vzhľad obchodov na Storefront v2 — od poradia sekcií na úvodnej stránke po zaoblenie tlačidiel. Otvoríte ho v E-commerce → Dizajn obchodu (Otvorí sa v novej karte) alebo tlačidlom Upraviť dizajn pri obchode v zozname Obchody (Otvorí sa v novej karte). Každú zmenu hneď vidíte v živom náhľade; zákazníci ju uvidia až po publikovaní.

1 — Úroveň2 — Šírka náhľadu3 — Vrátiť a zopakovať4 — Výber sekcií v náhľade5 — Manuál6 — Publikovať7 — Karty8 — Prispôsobiť sekcie9 — Hlavička a päta10 — Sekcie úvodnej stránky11 — Živý náhľad

Prvky na obrazovke

1. 1Úroveň — Predvolený dizajn firmy alebo konkrétny obchod. Zoznam ukazuje nepublikované zmeny a počet odchýlok.
2. 2Šírka náhľadu — Počítač, tablet alebo mobil — náhľad sa prekreslí v zvolenej šírke.
3. 3Vrátiť a zopakovať — Ctrl+Z a Ctrl+Shift+Z (na Macu ⌘Z a ⇧⌘Z). Vrátia aj presun či odstránenie sekcie.
4. 4Výber sekcií v náhľade — Zapnutý: klik na sekciu v náhľade otvorí jej nastavenia. Vypnutý: po obchode sa v náhľade klikáte normálne.
5. 5Manuál — Otvorí túto kapitolu v novej karte.
6. 6Publikovať — Až teraz uvidia zmeny zákazníci. Vľavo od tlačidla je stav konceptu.
7. 7Karty — Sekcie, Dizajn, AI a Verzie.
8. 8Prispôsobiť sekcie — Kým ho nestlačíte, úroveň preberá zoznam sekcií zo zdedeného dizajnu.
9. 9Hlavička a päta — Otvoria nastavenia hlavičky a päty — rozloženie, menu, vyhľadávanie, newsletter, poznámku.
10. 10Sekcie úvodnej stránky — Klik otvorí nastavenia sekcie. Poradie zmeníte potiahnutím, oko sekciu skryje.
11. 11Živý náhľad — Skutočný obchod s vaším katalógom a rozpracovaným dizajnom. Klik na sekciu ju otvorí v editore.

Ako je editor usporiadaný

Editor sa otvorí na celú obrazovku. Šípka vľavo hore vás vráti na zoznam obchodov — rozpracované zmeny sa pritom uložia.

Na mobile sa editor a náhľad nezmestia vedľa seba — prepínate medzi nimi tlačidlami Editor a Náhľad nad nimi.

Upravovať dizajn môže rola admin a editor. Rola viewer si ho môže len prezerať.

Predvolený dizajn firmy a dizajn obchodu

Dizajn má dve úrovne, ktoré prepínate v hornej lište:

• Predvolený dizajn firmy platí pre všetky obchody naraz. Čo tu nezmeníte, preberá sa zo štandardného vzhľadu Monokaido.
• Konkrétny obchod mení len to, v čom sa má od predvoleného dizajnu líšiť. Všetko ostatné sa preberá, takže zmena v predvolenom dizajne sa prejaví aj v ňom.

Pole, ktoré je na tejto úrovni upravené, má pri názve bodku a tlačidlo Vrátiť na zdedené. V zozname úrovní vidíte pri každej, či má nepublikované zmeny a koľko má odchýlok od zdedeného dizajnu. Neaktívny obchod je označený „(neaktívny)“.

Sekcie

Karta Sekcie ukazuje stránku ako strom: Hlavička, sekcie úvodnej stránky a Päta.

• Poradie zmeníte potiahnutím sekcie za úchyt vľavo — alebo z klávesnice: medzerníkom ju zdvihnete, šípkami posuniete a medzerníkom položíte. Menu sekcie (tri bodky) ponúka aj Posunúť vyššie a nižšie, Duplikovať, Pridať sekciu pod túto a Odstrániť.
• Oko sekciu skryje, jej nastavenia ostanú.
• Pridať sekciu otvorí ponuku typov — úvodný banner, mriežka bannerov, kategórie, karusel produktov, text, obrázok s textom, blog, newsletter, kontaktný formulár, medzera a ďalšie. Nová sekcia sa vloží za sekciu, ktorú ste naposledy otvorili, inak na koniec stránky. Úvodná stránka môže mať najviac 30 sekcií.
• Kliknutím na sekciu — v strome alebo priamo v náhľade — otvoríte jej nastavenia, šípka vás vráti na strom. Náhľad sekciu, s ktorou pracujete, orámuje a posunie do zobrazenia. Ak chcete v náhľade normálne klikať po obchode, vypnite v hornej lište Výber sekcií v náhľade.

Rozloženie stránky

Tlačidlo Rozloženie stránky nad stromom ponúka hotové zostavy sekcií úvodnej stránky. Každá karta kreslí náčrt stránky a hovorí, koľko sekcií prinesie. Zostavu potom upravujete ako akýkoľvek iný zoznam sekcií.

Rozloženie nič nevymýšľa: bannery, kategórie a produkty berie z obchodu a sekcie s vlastným textom alebo obrázkom sa v obchode zobrazia, až keď ich vyplníte (v náhľade ich dovtedy vidíte ako prázdne miesto). Sekcia Blog je v rozložení len s doplnkom Blog. Rozloženie nahradí celý zoznam sekcií úrovne — ak ste ho už ručne upravili, editor sa najprv opýta. Zmenu vrátite tlačidlom Vrátiť zmenu.

Zoznam sekcií sa dedí ako celok. Kým ho na úrovni nezmeníte, úroveň používa sekcie z predvoleného dizajnu firmy; Prispôsobiť sekcie pre túto úroveň vytvorí vlastnú kópiu a Vrátiť sekcie na zdedené ju zase zahodí.

Niektoré sekcie berú obsah z iných častí administrácie:

Veľkosť bannerov a vzhľad sekcie

Nastavenia sekcie sú rozdelené na Obsah, Rozloženie a veľkosť a Vzhľad sekcie. Polia, ktoré pri zvolenom nastavení nič nerobia, sa skryjú.

Sekcia Kontaktný formulár

Sekcia Kontaktný formulár pridá na úvodnú stránku formulár, cez ktorý vám zákazník napíše — aj v obchode, ktorý normálne predáva. Každá správa sa uloží do Kontaktných formulárov; v ich zozname sekciu spoznáte podľa nadpisu. Na stránke môžete mať viac takých sekcií, každá je samostatný formulár.

Texty zadávate pre každý jazyk obchodu zvlášť. V náhľade editora si formulár vyskúšate, ale nič sa neodošle ani neuloží.

Hlavička a päta

Riadky Hlavička a Päta v strome otvoria ich nastavenia — tie isté ako skupiny Hlavička a Päta v karte Dizajn. V hlavičke nastavíte rozloženie, navigáciu (lišta kategórií alebo megamenu), vyhľadávanie, oznamovací pruh a či hlavička ostáva hore pri posúvaní. V päte rozloženie, poznámku, prihlásenie k newslettru, prvky dôvery a nápis „Beží na Monokaido“. Texty, napríklad poznámku v päte, zadávate pre každý jazyk obchodu zvlášť.

Dizajn

Karta Dizajn nastavuje vzhľad celého obchodu: štýl, farby, písmo, tvary.

1 — Štýl obchodu2 — Aktívna predvoľba3 — Miniatúra4 — Dedenie5 — Náhľad

Prvky na obrazovke

1. 1Štýl obchodu — Predvoľba nastaví farby, písmo, zaoblenie, tlačidlá a karty naraz. Logá, texty a sekcie nemení.
2. 2Aktívna predvoľba — Fajka a orámovanie ukazujú štýl, ktorý úroveň práve má. Po ručnej úprave nie je aktívna žiadna.
3. 3Miniatúra — Každá karta kreslí nadpis, tlačidlo a kartu produktu tak, ako budú vyzerať — aj písmo a zaoblenie.
4. 4Dedenie — Čo nezmeníte, preberá sa zo zdedeného dizajnu. Upravené polia majú bodku a dajú sa vrátiť na zdedené.
5. 5Náhľad — Farby, zaoblenie, tlačidlá a karta produktu sa prejavia okamžite, bez prekreslenia stránky.

Štýl obchodu

Predvoľba naraz nastaví farby, písmo, zaoblenie, tlačidlá a karty produktov. Logá, texty a sekcie nemení. Každá karta v galérii ukazuje miniatúru obchodu — nadpis, tlačidlo a kartu produktu — tak, ako budú vyzerať.

Galéria ukazuje najprv šesť štýlov, ďalšie otvorí Zobraziť všetky štýly. Štýly od Tmavého po Retro nastavujú celú paletu farieb, takže vyzerajú rovnako bez ohľadu na farby predvoleného dizajnu firmy.

Ak ste niektoré z polí predvoľby už upravili ručne, editor sa pred použitím opýta a vypíše, ktoré polia predvoľba prepíše. Po ručnej úprave poľa, ktoré predvoľba nastavuje, už žiadna karta nie je označená ako aktívna — štýl je odvtedy váš vlastný.

Skupiny nastavení

Pod štýlom sú skupiny, ktoré rozbalíte kliknutím. Zbalená skupina ukazuje, koľko polí je v nej na tejto úrovni upravených (napríklad „Upravené: 2“).

Zmeny farieb, zaoblenia, tlačidiel a karty produktu sa v náhľade prejavia okamžite, bez prekreslenia stránky — posuvník môžete ťahať a sledovať výsledok.

Formulár na dopyt

Obchod v katalógovom režime nepredáva — namiesto tlačidla Kúpiť môže na stránke produktu ponúknuť formulár na dopyt. Nastavíte ho v skupine Formulár na dopyt karty Dizajn. Skupina sa zobrazí, iba kým je katalógový režim zapnutý: pri obchode, keď je katalógom práve tento obchod, v predvolenom dizajne firmy, keď je katalógom aspoň jeden z vašich obchodov.

Dopyt nesie produkt a variant, ktorý mal zákazník práve zvolený. Odoslané dopyty nájdete v Kontaktných formulároch. Štýl obchodu (predvoľba) nastavenia formulára nemení.

Návrh od Monokaido AI

V karte AI opíšete, čo chcete zmeniť — napríklad „elegantný tmavý dizajn so zlatými akcentmi“ — a Monokaido AI navrhne nový dizajn tejto úrovne. Návrh ukáže, čo sa mení a koľko polí, a nič sa neuloží, kým ho nepoužijete tlačidlom Použiť návrh. Ak ste počas prípravy návrhu zmenili tie isté polia, editor sa opýta, či ich má prepísať; Vrátiť zmenu ich vráti.

Na návrh potrebujete dostupnú AI — Monokaido AI alebo vlastného poskytovateľa (pozri Dve cesty k AI). S Monokaido AI návrh čerpá AI tokeny, s vlastným poskytovateľom ho platíte priamo jemu.

Ukladanie, publikovanie a verzie

1. Zmeny sa ukladajú do konceptu

   Každá zmena sa sama uloží do konceptu a náhľad sa prekreslí na mieste, bez skoku na začiatok stránky. Rozpracované zmeny sa uložia aj pri odchode z editora; ak sa uložiť nedajú, editor sa najprv opýta, či chcete odísť bez uloženia.

2. Vrátiť zmenu a Zopakovať zmenu

   Vrátiť zmenu (Ctrl+Z, na Macu ⌘Z) a Zopakovať zmenu (Ctrl+Shift+Z, na Macu ⇧⌘Z) vrátia aj presun či odstránenie sekcie a použitie predvoľby alebo návrhu AI.

3. Publikovať

   Zákazníci uvidia dizajn až po kliknutí na Publikovať. K verzii si môžete pripísať poznámku, napríklad „Jesenná kampaň“. Predvolený dizajn firmy sa publikuje do všetkých obchodov — okrem toho, čo si jednotlivé obchody nastavili inak.

Zahodiť zmeny (v ďalších akciách) vráti koncept na publikovanú verziu. Karta Verzie ukazuje históriu publikovaných verzií s autorom a poznámkou; Obnoviť do konceptu načíta starú verziu do konceptu a v obchode sa prejaví až po ďalšom publikovaní.

Pokročilý režim pre programátora

Tlačidlo Pokročilý režim v hornej lište (prehliadač si ho zapamätá) odkryje polia pre triedy Tailwind a vlastné CSS:

• v karte Dizajn skupinu Pokročilé: vlastné CSS a triedy pre hlavičku, pätu, hlavný obsah, kartu produktu, tlačidlá a nadpisy sekcií — pri každom poli vidíte, na ktorý prvok obchodu sa použije (napr. .sf-slot-header),
• v nastaveniach každej sekcie Vlastné triedy sekcie (prvok [data-sf-section="…"]).

Triedy sa skompilujú priamo v obchode — fungujú aj varianty (md:, hover:) a ľubovoľné hodnoty (py-[72px]). Píšte ich oddelené medzerou, bez úvodzoviek, zložených zátvoriek a bodkočiarky. Neplatné pole sa neuloží a editor pri ňom ukáže, čo mu prekáža.

Prepnutie obchodu na Storefront v2

Editor navrhuje Storefront v2 — nový obchod s vizuálnym editorom dizajnu, blokov a bannerov. Obchod, ktorý ešte beží na klasickom storefronte, dizajn z editora nezobrazí. Storefront v2 zapnete:

• pri vytváraní — v dialógu Vytvoriť storefront so zapnutým Vstavaným storefrontom zapnite Storefront v2 (nový, s builderom); po vytvorení vás Otvoriť builder pošle rovno do editora,
• v nastaveniach obchodu — prepínač Storefront v2 pod „Obchod povolený“ (karta obchodu v zozname ponúka odkaz Vyskúšať Storefront v2),
• priamo v editore — pri obchode na klasickom storefronte sa zobrazí pruh s tlačidlom Zapnúť Storefront v2.

Obchody na Storefront v2 majú v zozname na E-commerce → Obchody (Otvorí sa v novej karte) štítok v2 a tlačidlo Upraviť dizajn, ktoré otvorí editor rovno pre daný obchod. Späť na klasický storefront ho prepnete v nastaveniach obchodu. Doménu, jazyk, menu a prístupový kľúč obchodu popisuje kapitola Obchody a prístupové kľúče.