Přejít na hlavní obsah
Editor storefrontu s otevřenou stránkou Domů a panelem nastavení vpravo

Prodejní kanály > Online obchod > Editor storefrontu

Otevřít v TWICE Admin

online-store/themes
Editor storefrontu má hodně panelů a každý z nich je už zdokumentovaný. Co nikde napsané není, je pořadí, ve kterém pracovat. A na pořadí záleží, protože globální nastavení přepíše vzhled stránek, které jste už vyladili. Tento návod je právě ta posloupnost. Jednotlivé panely neopakuje, každý odkazuje na svou vlastní stránku.

​
Předpoklady

Vyžadovaná oprávnění: online_store:editor, v operaci zobrazení pro otevření editoru a ve správě pro jakoukoli změnu. Všechny čtyři systémové role mají na něm všechny operace: Vlastník, Admin, Manažer i Člen mohou design storefrontu upravovat. Viz Uživatelé a role.
Než začnete, pochopte jednu věc:Uložení publikuje. Není tu koncept, krok publikování ani knihovna motivů. Váš účet má přesně jednu konfiguraci storefrontu a editor ji upravuje na místě. Cokoli uložíte, je pro zákazníky okamžitě živé. Práci si naplánujte do sezení, která dokončíte, místo abyste uložili napůl změněný design.

​
Postup

1

Otevřete editor a smiřte se s tím, že uložení je publikování

Pod Online obchod → Motivy zobrazuje jediná karta náhledy pro desktop a mobil a adresu URL vašeho storefrontu. Volba Upravit otevře editor.Není tu motiv k výběru a nic k duplikaci, jen jedna konfigurace upravovaná přímo. Z toho plyne celá podoba tohoto návodu: redesign nemůžete připravit mimo provoz a vydat naráz, takže pracujte odshora dolů a ukládejte v místech, kde je storefront soudržný.
Když editor zavřete s neuloženými změnami, dialog nabídne Uložit změny nebo Zrušit. Volba Zrušit je jediné vrácení zpět, není tu žádná historie verzí, ke které byste se vrátili.
2

Nejdřív nastavte globální designové tokeny v režimu Motiv

Režim Motiv drží nastavení, která platí pro celý obchod. Udělejte je, než se dotknete jakékoli stránky, protože mění vzhled každé stránky, která už existuje:
3

Tokeny usaďte, než začnete ladit stránku

Právě jejich nastavení na první dobrou vás uchrání od toho, abyste domovskou stránku ladili dvakrát. Pozdní změna barvy potichu překreslí každou stránku a každou kartu na ní.
4

Vylaďte komponenty, které zákazníci vidí na každé stránce

S nastavenými tokeny přejděte na panely komponent. Zhruba v pořadí podle toho, jak moc je zákazník vidí:
5

Vylaďte rezervační panely a potom projděte dokončovací kolo

Úplný seznam panelů najdete na stránce Editor storefrontu.
6

Vězte, které prvky značky se nenastavují tady

Dvě věci, které lidé v editoru hledají a nenajdou:
  • Obrázek loga se nastavuje v Nastavení → Všeobecné, ne v editoru storefrontu. Panel Logo v editoru řídí, jak se logo zobrazuje, tedy šířku a umístění, a sám na to upozorňuje s odkazem na Nastavení → Všeobecné pro změnu samotného souboru.
  • Favicon v editoru je, na témže panelu Logo, zobrazený v rozměru 32 × 32 px.
7

Nečekanou barvu vysledujte k tomuto editoru

Nastavení značky na úrovni účtu existuje odděleně od motivu storefrontu. Vzhled storefrontu se vyhodnocuje z nastavení motivu, které upravujete tady, takže pokud barva není taková, jakou jste čekali, přišla z tohoto editoru nebo z výchozí hodnoty motivu, ne z pole značky na účtu.
8

Náhled napříč zobrazeními si projděte před uložením, ne po něm

Editor nabízí náhled pro desktop, tablet a mobil. Protože uložení je publikování, je náhled vaše jediná předletová kontrola. Použijte všechna tři.Na mobilu se design storefrontu láme a na mobilu je většina zákazníků. V mobilní šířce zkontrolujte výslovně záhlaví, mřížku karet nabídek a kalendář. Tyhle tři nesou největší riziko rozpadu rozložení.
9

Po vlastním CSS sahejte jen tam, kde to panely opravdu neumí

Panel Vlastní CSS je záchranný východ pro to, co vizuální editor nenabízí.Berte ho jako poslední možnost, ne jako zkratku. CSS napsané proti aktuálnímu markupu je ta část vašeho storefrontu, která se při aktualizaci storefrontu nejpravděpodobněji potichu rozbije, a nic vás na to neupozorní. Nastavení z panelu ne.
Volba Resetovat celý motiv udělá přesně to, co říká, a protože tu není koncept ani historie verzí, není z čeho obnovovat. Použijte ji jen tehdy, když design opravdu chcete začít znovu.

​
Jak poznám, že to fungovalo?

  • Storefront odpovídá náhledu v editoru, v šířce pro desktop i pro mobil.
  • Zákazníkovi nic nevypadá rozpracovaně, protože jste ukládali v soudržných bodech, ne uprostřed změny.
  • Změna barvy nebo fontu se objeví všude, kde má, na kartách, v záhlaví i v kalendáři, ne jen na stránce, na kterou jste se dívali.
  • Vaše logo je správné, což znamená, že jste ho nastavili v Nastavení → Všeobecné.

​
Řešení potíží a časté chyby

Není tu historie verzí ani koncept, ke kterému byste se vrátili. Volba Zrušit funguje jen před uložením.Co udělat: vraťte nastavení ručně. Právě proto se pracuje odshora dolů a ukládá v soudržných bodech, a právě proto si u všeho, čím si nejste jistí, poznamenejte původní hodnotu, než ji změníte.
V editoru storefrontu to není. Panel Logo řídí šířku a umístění při zobrazení a na samotný obrázek odkazuje do Nastavení → Všeobecné.Co udělat: soubor nastavte v Nastavení → Všeobecné a potom se vraťte do editoru, abyste logo zvětšili a umístili.
Čekaný stav, a právě tento problém s pořadím má návod předejít. Tokeny motivu platí pro celý obchod a překreslí každou stránku.Co udělat: globální tokeny dokončete před prací na jednotlivých stránkách. Pokud už jste za tím bodem, stránky vyladěné zkraje raději překontrolujte, než abyste předpokládali, že to přežily.
Příčina: CSS napsané proti markupu storefrontu není podporované rozhraní a aktualizace storefrontu ho mohou změnit.Co udělat: zkontrolujte, zda to, co dělalo vaše CSS, teď nedělá panel motivu, a dejte přednost panelu. Vlastní CSS držte minimální právě z tohoto důvodu.
Dvěma lidem v úpravách nic nebrání. Když nejsou koncepty, nejsou větve, a vyhrává poslední uložení.Co udělat: před redesignem se dohodněte, kdo v editoru pracuje. Na živém storefrontu na tom záleží víc, než to zní, protože oba lidé publikují za chodu.

​
Související články

Postavte stránky a navigaci

Práce na jednotlivých stránkách, která následuje po globálním designu.

Editor storefrontu

Každý režim a panel v plném rozsahu.

Nastavte online obchod

Posloupnost spuštění, do které tato designová práce patří.

Navrhněte výkladní skříň

Krok spuštění, do kterého tento návod patří.

Vlastní CSS

Záchranný východ a jeho cena.