Canvas — vizuálny editor

Cesta: Zapojenie › Dizajn › Canvas (/admin/settings/canvas)

Canvas je celoobrazovkový editor vášho obchodu. V strede vidíte skutočný obchod v náhľade, vľavo máte zoznam častí stránky (Vrstvy) a vpravo panel s nastaveniami. Kliknete na ľubovoľný prvok priamo v náhľade a upravíte ho — zmenu vidíte hneď. Zákazníci ju uvidia až po kliknutí na Publikovať.

V Canvase upravujete stránky, detail produktu, kartu produktu, zoznam produktov, blog, FAQ, košík, pokladňu, hlavičku, pätičku aj celkový vzhľad obchodu (farby, písma, šírky).

Staré obrazovky otvárajú Canvas

Pôvodné obrazovky Vizuálne nastavenia, Správa témy, tvorba stránok (page builder) aj tvorba produktových blokov už neexistujú — ich odkazy otvoria Canvas. Všetko, čo ste tam nastavovali, nájdete tu.

Ako sa do Canvasu dostanete

• z bočného menu: Zapojenie › Dizajn › Canvas,
• z Dashboardu — úvodná karta „Poskladajte si stránky v Canvase",
• zo zoznamu stránok (Zapojenie › Obsah a správa témy › Všetky stránky) — akcia Upraviť v Canvase pri riadku stránky,
• z úpravy stránky — tlačidlo Canvas alebo Otvoriť Canvas,
• z úpravy produktu — Ďalšie akcie › Canvas (otvorí Canvas priamo na tomto produkte),
• priamo z obchodu: keď ste prihlásení ako správca, na okraji stránky je záložka Upraviť v Canvas a v rýchlom vyhľadávaní (Ctrl/⌘+K) položka Upraviť túto stránku v Canvas.

Horná lišta

Zľava doprava:

Prvok	Na čo slúži
Zavrieť	Zavrie editor a vráti vás na Dashboard.
Výber stránky	Prepína, čo je v náhľade. Skupina Časti obchodu: Zoznam produktov, Blog, FAQ, Košík, Pokladňa. Skupina Stránky: vaše stránky (prvá je Domovská stránka). Do náhľadu sa dostanete aj tak, že v ňom jednoducho klikáte na odkazy.
Stav stránky (farebná bodka)	Otvorí Stav stránky: prepínač Publikovaná / Skrytá a odkaz Upraviť detaily stránky (URL, SEO, heslo)…. Skrytú stránku návštevníci nevidia, v Canvase ju môžete ďalej upravovať. Domovská stránka musí zostať publikovaná. Prepínač platí hneď.
AI	Zobrazí alebo skryje panel Merzio AI.
Vrstvy	Zobrazí alebo skryje ľavý panel so stromom stránky.
Ikony zariadení	Prepína náhľad: počítač, tablet, mobil.
Jazyky (napr. SK / EN)	Len v obchodoch s viacerými jazykmi. Prepne jazyk náhľadu aj jazyk, v ktorom upravujete texty.
Zobraziť obchod	Otvorí živý obchod v novej karte.
Základné nastavenia (ozubené koliesko)	Vzhľad celého obchodu — farby, písma, šírky, košík, pokladňa. Pozri nižšie.
Nepublikované zmeny	Svieti, keď máte rozpracované zmeny. Kliknutím otvoríte prehľad Čo sa publikuje.
Zahodiť	Po potvrdení zahodí všetky nepublikované zmeny.
Uložiť koncept	Uloží rozpracované zmeny. Koncept vydrží, aj keď editor zavriete.
Publikovať	Zverejní všetky nepublikované zmeny naraz.

Canvas nemá krok späť

V Canvase nie je tlačidlo Späť ani Znova (undo / redo). Ak sa pomýlite, hodnotu opravte ručne, alebo použite Zahodiť — to však zahodí všetky nepublikované zmeny, nie iba poslednú.

Práca v náhľade

1. Prejdite myšou nad prvok. Zvýrazní sa a štítok ukáže, o čo ide — pri vnorených blokoch aj celú cestu, napr. „Sekcia › Sekcia › Karta".
2. Kliknite naň. Vpravo sa otvoria jeho nastavenia a nad vybranou sekciou sa zobrazí lišta s akciami.
3. Upravte hodnoty — náhľad sa mení hneď.
4. Klávesom Esc prejdete o úroveň vyššie (z karty na sekciu, v ktorej je).

Lišta nad vybranou sekciou

• cesta k vybranému bloku — kliknutím na ktorúkoľvek úroveň ju vyberiete,
• Nastavenia sekcie,
• Posunúť vyššie / Posunúť nižšie,
• Duplikovať,
• Uložiť sekciu ako šablónu — sekciu potom nájdete medzi uloženými sekciami,
• Stiahnuť sekciu (do iného obchodu) — uloží sekciu ako súbor,
• Odstrániť sekciu,
• + Sekcia — pridá novú sekciu pod túto.

Rovnaké akcie sú aj navrchu pravého panela.

Pridanie sekcie alebo bloku

Kliknite na + Sekcia v náhľade, na Pridať sekciu vo Vrstvách alebo na + pri riadku vo Vrstvách. Otvorí sa okno výberu. Nový prvok sa vloží na miesto modrej čiary v náhľade.

Vo výbere nájdete:

• pole Hľadať sekciu…,
• Uložené sekcie — sekcie, ktoré ste si uložili ako šablónu,
• Nahrať sekciu zo súboru — vloží sekciu stiahnutú z iného obchodu,
• Karty v rade — predvoľby 1× až 4×: jedným klikom vložíte riadok s 1 až 4 kartami vedľa seba,
• bloky v skupinách Základné, Bannery, Karty a záložky, Obsah a marketing, Ostatné,
• Šablóny stránok — nahradia obsah celej stránky uloženou šablónou (stále len ako koncept),
• Uložiť aktuálnu stránku ako šablónu,
• Stiahnuť stránku — uloží celú stránku ako súbor.

Popis jednotlivých blokov a prácu so šablónami nájdete na stránke Bloky a šablóny.

Prenos medzi obchodmi

Sekciu alebo celú stránku si môžete stiahnuť ako súbor a v inom obchode Merzio ju nahrať. Obrázky sa prenesú so súborom.

Vrstvy (ľavý panel)

Panel Vrstvy ukazuje všetko, z čoho sa práve zobrazená stránka skladá.

• Navrchu je riadok Hlavička, naspodku Pätička — kliknutím otvoríte ich nastavenia.
• Medzi nimi sú skupiny podľa toho, čo je v náhľade:
  • stránka — jej sekcie,
  • detail produktu — bloky v zónach Pod košíkom, Nad popisom a Pod popisom,
  • zoznam produktov — bloky Nad produktmi a Pod produktmi.

Pri každom riadku máte:

• oko — skryje alebo zobrazí blok bez toho, aby ste ho zmazali,
• + (Pridať pod tento blok),
• ponuku Ďalšie akcie: Posunúť vyššie, Posunúť nižšie, Duplikovať, Presunúť do: … (do ktoréhokoľvek rozloženia alebo karty na tej istej ploche), Presunúť von, Vložiť do novej sekcie rozloženia, Vymazať.

Riadky môžete aj ťahať myšou — v rámci stránky, do sekcie rozloženia aj von z nej. Presúvať sa nedá medzi plochami: blok stránky nepresuniete na detail produktu ani do zoznamu produktov a naopak.

Prvky sekcie

Pod sekciou sú vo Vrstvách jej prvky — napríklad Nadpis, Text, Tlačidlo, Druhé tlačidlo. Pri každom je oko (skryť / zobraziť) a odstránenie. Riadok Pridať prvok (n/m) ukazuje, koľko z možných prvkov sekcia používa, a pridá chýbajúci.

Snímky a položky

Sekcie so zoznamom majú položky ako samostatné riadky: snímky karuselu (+ Pridať snímok), dlaždice (+ Pridať dlaždicu) a ďalšie opakované položky, napr. výhody (Pridať položku). Položky môžete pridávať, duplikovať, mazať, posúvať a ťahať.

Panel sekcie (vpravo)

Panel vybranej sekcie začína časťou Obsah sekcie — zoznam jej prvkov a položiek, takže sa k nim dostanete aj bez Vrstiev. Pod ňou sú záložky Obsah, Dizajn a Vedľajšie.

Úprava textu priamo v náhľade

Keď kliknete na text v sekcii (nadpis, popis, tlačidlo), zobrazí sa nad ním malá lišta:

• Farba textu (pri tlačidle aj Farba tlačidla),
• Veľkosť — mení sa veľkosť pre zariadenie, ktoré náhľad práve zobrazuje (počítač, tablet alebo mobil),
• Hrúbka písma,
• Zarovnanie,
• Veľké písmená,
• Rozstup písmen,
• Všetky nastavenia v paneli — otvorí úplné nastavenia vpravo.

Samotný text prepíšete v pravom paneli. Pri nadpisoch a popisoch tam máte aj jednoduché formátovanie: Tučné, Kurzíva, Odkaz; nový riadok vložíte cez Shift+Enter.

Čo všetko v Canvase upravíte

Stránky

Sekcie pridávate, presúvate, duplikujete, skrývate a mažete tak, ako je popísané vyššie. Každá sekcia má vlastnú šírku a odsadenie.

Detail produktu

Otvorte produkt v náhľade (alebo Canvas z úpravy produktu) a kliknite na to, čo chcete zmeniť:

• Produkt — názov, krátky a dlhý popis a poradie obrázkov (prvý je hlavný). Nové obrázky sa nahrávajú v úprave produktu.
• Skupiny spoločné pre všetky produkty: Vzhľad detailu, Odsadenie detailu (vrátane Šírka detailu s možnosťou Zdediť šírku obchodu), Tlačidlo do košíka, Akordeón Doručenie, Sekcia Recenzie, Parametre, Cena, Zobrazenie na detaile, Sklad a doručenie.
• Bloky produktu — pri každom nastavíte Umiestnenie (Pod košíkom / Nad popisom / Pod popisom) a Rozsah: Všetky produkty (blok bude na každom produkte) alebo Len tento produkt.

Karta produktu

Kliknite na kartu produktu kdekoľvek v náhľade. Variant karty vyberáte zvlášť pre počítač, tablet a mobil; nasledujú farby, zaoblenie, ohraničenie a tlačidlo do košíka. Karta je jedna pre celý obchod — zoznam produktov, mriežky aj odporúčania.

Zoznam produktov

Vo výbere stránky zvoľte Zoznam produktov alebo v náhľade otvorte kategóriu. Nastavenia sú v skupinách: Rozloženie stránky, Vzhľad zoznamu, Hero sekcia, Zoradenie, Horný popis, Dolný popis, Rýchle menu kategórií, Bočný panel s filtrami, Mriežka a stránkovanie, Stránkovanie.

Všetky kategórie, alebo len jedna?

Navrchu panela vidíte, čo práve upravujete: Všetky kategórie a značky, alebo len Táto kategória (prípadne Táto značka). Zmena pre všetky kategórie sa prejaví v celom obchode; zmena pre jednu kategóriu platí iba pre ňu. Kategóriu vrátite na spoločné nastavenia tlačidlom Vrátiť celú kategóriu na globálne.

Blog a FAQ

Vo výbere stránky zvoľte Blog alebo FAQ a upravte nadpis, podnadpis, farby a rozloženie.

Blog a FAQ sa ukladajú hneď

Pri týchto dvoch paneloch uvidíte poznámku Ukladá sa priamo (bez konceptu). Zmena je v obchode okamžite, nečaká na Publikovať.

Hlavička

Kliknite na hlavičku v náhľade alebo na Hlavička vo Vrstvách. Nájdete tu: Variant hlavičky, Rozloženie prvkov, Menu (kliknutím na odkaz v náhľade otvoríte priamo jeho text, adresu a dizajn), Rozbaľovacie menu, Farby hlavičky, Logo, Vyhľadávanie, Oznamovacia lišta, Mobilné menu a odkaz na Navigačná cesta (breadcrumbs).

• Mobilné menu — animácia, šírka panela, farby a hrúbky písma. Prepnite náhľad na mobil a menu otvorte. Bannery, kontakty, text a sociálne siete nad alebo pod položkami menu pridáte odkazom Upraviť bloky mobilného menu na konci panela — pozri Bloky mobilného menu.
• Položky menu pridávate a mažete v Zapojenie › Dizajn › Správa menu; v Canvase upravujete existujúce.

Oznamovacia lišta

V paneli hlavičky upravíte text a odkaz existujúcich oznámení a spôsob zobrazenia — Striedanie (karusel) alebo Plynulý beh (marquee), rýchlosť, smer a šípky. Nové oznámenie vytvoríte v Zapojenie › Marketing › Oznámenia.

Pätička

Kliknite na pätičku alebo na Pätička vo Vrstvách. Upravíte logo pätičky, text v spodnej lište, logá platobných metód a odkazy v stĺpcoch. Ak používate pätičku poskladanú v editore pätičky, panel vás naň pošle tlačidlom Otvoriť Footer builder (Zapojenie › Dizajn › Editor pätičky).

Základné nastavenia

Ozubené koliesko v hornej lište otvorí nastavenia, ktoré platia pre celý obchod:

Sekcia	Čo nastavíte
Značka a farby	Primárne a sekundárne farby, farby textu, pozadia a stavov.
Typografia	Písma obchodu a ich hrúbky.
Logo a favicon	Logo pre počítač, mobil a pätičku, jeho veľkosť, favicon.
Vyhľadávanie	Variant a vzhľad vyhľadávacieho poľa.
Bočný panel kategórií	Zapnutie a správanie bočného menu kategórií na počítači.
Navigačná cesta (breadcrumbs)	Zobrazenie na počítači a mobile, farby, veľkosť písma.
Zoznam produktov	Rozloženie zoznamu a rozloženie filtrov.
Rozloženie a šírky	Šírky a odsadenie stránok — pozri nižšie.
Formuláre a prepínače	Polia formulárov, prepínacie tlačidlá, záložky prihlásenia v pokladni. Platí pre celý obchod.
Správanie košíka	Čo sa stane po pridaní do košíka.
Pokladňa a košík	Rozloženie pokladne a vzhľad výberu dopravy a platby.

Hotové témy (celý vzhľad obchodu naraz) tu nehľadajte — sú v Zapojenie › Dizajn › Témy.

Rozloženie a šírky

• Šírky obchodu — šírka celého obchodu a zvlášť šírka hlavičky, zoznamu produktov a úvodnej stránky. Pri týchto troch môžete zvoliť Zdediť šírku obchodu.
• Horné odsadenie stránky (px) a Spodné odsadenie stránky (px) — zvlášť pre Desktop, Tablet a Mobil, 0 až 240 px. Hodnota sa pridáva k existujúcemu odsadeniu; 0 alebo prázdne pole nič nemení.

Šírku detailu produktu nastavíte na detaile produktu v skupine Odsadenie detailu (Šírka detailu).

Správanie košíka

Po pridaní do košíka vyberiete jednu z možností:

• Vysúvací košík — po pridaní sa vysunie panel košíka,
• Modálne okno — otvorí sa okno s odporúčanými produktmi,
• Bez akcie — zákazník zostane na stránke, zmení sa len počet položiek v košíku.

Pokladňa a košík

• Rozloženie pokladne
  • Všetko na jednej stránke — celá pokladňa na jednej obrazovke.
  • Po krokoch (1 – 2 – 3) — 1 Doprava a platba (vrátane krajiny doručenia) → 2 Vaše údaje → 3 Zhrnutie. Ďalší krok sa zákazníkovi odomkne až po správnom vyplnení predchádzajúcich. V náhľade Canvasu môžete kroky prepínať voľne.
• Doprava a platba
  • Oválne tlačidlá — kompaktné — metódy ako malé tlačidlá,
  • Karty — detailné — karty na celú šírku s logom, popisom a cenou.
• Prihlásenie v pokladni — vzhľad prihlásenia a registrácie v pokladni.
• Zobraziť ako neprihlásený zákazník — prepínač len pre náhľad. Prihlásenie, registráciu a „Vytvoriť účet" vidia iba hostia, a vy ste v Canvase vždy prihlásení.

Pokladňa v náhľade

Pokladňa sa v náhľade zobrazí, len keď je v košíku aspoň jeden produkt. Pridajte ho priamo v náhľade.

Koncept a zverejnenie

Takmer všetko v Canvase je koncept, kým nekliknete na Publikovať: sekcie stránok, dizajn a základné nastavenia, zoznam produktov, položky menu, oznámenia, texty a bloky produktov, logo, texty o dostupnosti a doručení aj prepínače zobrazenia. Pri týchto nastaveniach uvidíte poznámku Aplikuje sa pri Publikovať.

Hneď sa ukladajú iba nastavenia stránok Blog a FAQ (a prepínač Publikovaná / Skrytá pri stránke).

• Uložiť koncept — uloží rozpracované zmeny bez zverejnenia. K práci sa môžete vrátiť neskôr.
• Čo sa publikuje — kliknite na Nepublikované zmeny. Uvidíte zoznam čakajúcich zmien: pridané, zmenené a odstránené sekcie, staré a nové hodnoty dizajnu, zmeny v zozname produktov, v menu, oznámeniach a blokoch.
• Publikovať — zverejní všetko naraz. Zobrazí sa „Publikované. Zmeny sú teraz naživo."
• Zahodiť — zahodí všetky nepublikované zmeny.

Canvas nemá históriu zmien. Ak si chcete pred väčšou zmenou uchovať súčasný vzhľad obchodu, uložte si ho ako tému v Zapojenie › Dizajn › Témy.

Zmeny jedného produktu

Ak má produkt nepublikované zmeny z Canvasu, na stránke úpravy produktu sa zobrazí upozornenie Tento produkt má nepublikované zmeny z Canvasu. Priamo tam ich môžete zverejniť alebo zahodiť len pre tento produkt — ostatné rozpracované zmeny obchodu zostanú nedotknuté. Urobte to skôr, než produkt uložíte v administrácii, inak neskoršie publikovanie z Canvasu vaše uloženie prepíše.

Merzio AI v Canvase

Tlačidlo AI v hornej lište otvorí panel Merzio AI. Opíšete, čo chcete (alebo priložíte obrázok), a AI nastaví farby, písma a sekcie. Všetko zapíše ako koncept — skontrolujete to v náhľade a publikujete sami. Vlastné CSS píše AI do samostatného poľa CSS od AI dizajnéra; váš Vlastný kód nemení.

Súvisiace stránky

• Dizajn (prehľad) — čo je kde v menu Dizajn
• Bloky a šablóny — katalóg blokov a práca so šablónami
• Merzio AI — asistent, ktorý navrhuje dizajn aj obsah