> ## Documentation Index > Fetch the complete documentation index at: https://www.twicecommerce.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # Jak navrhnout storefront v editoru motivů > Pracujte v editoru storefrontu v pořadí, které šetří přepracovávání: nejdřív globální designové tokeny, potom stránky, s vědomím, že každé uložení jde přímo na živý storefront. ![Editor storefrontu s otevřenou stránkou Domů a panelem nastavení vpravo](https://mintcdn.com/twicecommerce/lZhc_tO8u1u_bL0Q/images/theme-editor-home.webp?fit=max\&auto=format\&n=lZhc_tO8u1u_bL0Q\&q=85\&s=d196cbe8b9e71c7f5b909f4bb501c9d8) Prodejní kanály > Online obchod > Editor storefrontu > **[Otevřít v TWICE Admin](https://admin.twicecommerce.com/online-store/theme)** > > 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 > [!WARNING] > > **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](https://www.twicecommerce.com/docs/cs/settings/users-roles.md). > [!NOTE] > > **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ý. > [!NOTE] > > 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: | Udělejte nejdřív | Panel | | - | - | | Celkový styl a hustota | [Styl motivu](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/theme-style.md) | | Paleta | [Barvy](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/colors.md) | | Fonty a jejich stupnice | [Typografie](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/typography.md) | | Šířka stránky, odstupy | [Rozložení](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/layout.md) | | Tvar a zdůraznění | [Tlačítka](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/buttons.md), [Vstupy](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/inputs.md) | **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í: * [Karta nabídek](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/listings-card.md) a [Karta kolekce](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/collection-card.md): opakující se jednotky, ze kterých je většina storefrontu. * [Záhlaví](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/header-bar.md) a [Vyhledávací lišta](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/search-bar.md): na každé stránce. **5. Vylaďte rezervační panely a potom projděte dokončovací kolo** * [Kalendář](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/calendar.md) a [Ukazatel dostupnosti](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/availability-indicator.md): tady se rezervace skutečně odehrává, takže si zaslouží víc pozornosti, než naznačuje jejich velikost. * [Oznámení](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/announcement-bar.md), [Drobné navigace](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/breadcrumbs.md), [Variant pills](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/variant-pills.md), [Sekce filtru](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/filter-section.md): dokončovací kolo. Úplný seznam panelů najdete na stránce [Editor storefrontu](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/overview.md). **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](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/logo.md) 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](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/custom-css.md) 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. > [!WARNING] > > 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 > **Uložil jsem to a chci to vrátit** > > 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. > **Nemohu najít, kde nahrát logo** > > 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. > **Změnil jsem paletu a stránky, které jsem už nastyloval, vypadají špatně** > > Č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. > **Moje vlastní CSS přestalo fungovat** > > **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. > **Storefront upravoval ve stejnou dobu někdo další** > > 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](https://www.twicecommerce.com/docs/cs/guides/sales-channels/storefront-pages-and-navigation.md)** > > Práce na jednotlivých stránkách, která následuje po globálním designu. > **[Editor storefrontu](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/overview.md)** > > Každý režim a panel v plném rozsahu. > **[Nastavte online obchod](https://www.twicecommerce.com/docs/cs/guides/sales-channels/set-up-the-online-store.md)** > > Posloupnost spuštění, do které tato designová práce patří. > **[Navrhněte výkladní skříň](https://www.twicecommerce.com/docs/cs/guides/launch/shape-the-storefront)** > > Krok spuštění, do kterého tento návod patří. > **[Vlastní CSS](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/custom-css.md)** > > Záchranný východ a jeho cena. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.