> ## 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. # Editor storefrontu - Nastavení motivu > Přehled všech kategorií nastavení motivu: designových tokenů, které řídí vzhled vašeho storefrontu. ![Panel nastavení motivu v editoru storefrontu](https://mintcdn.com/twicecommerce/lZhc_tO8u1u_bL0Q/images/theme-editor-theme-panel.webp?fit=max\&auto=format\&n=lZhc_tO8u1u_bL0Q\&q=85\&s=b196ddb14099bc9b5fea105534c3de29) Editor storefrontu > Nastavení motivu Panel Nastavení motivu je vstupním bodem pro všechny globální designové tokeny: barvy, typografii, rozložení, styly komponent a vlastní CSS. Vyberte kategorii pro otevření jejího panelu nastavení. Změny se projeví na každé stránce vašeho storefrontu a v náhledu se zobrazí okamžitě. ## Kategorie Nastavení motivu je rozděleno do čtyř sekcí: ### Header Globální designové tokeny, které ovlivňují celkový vzhled storefrontu. | Kategorie | Popis | | - | - | | [Logo](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/logo.md) | Šířka loga v záhlaví storefrontu. | | [Barvy](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/colors.md) | Barvy pozadí, textu, rámečků a stavů. | | [Typografie](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/typography.md) | Rodiny písem a škálování pro nadpisy a text. | | [Rozložení](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/layout.md) | Maximální šířka stránky a vodorovné okraje. | ### Components Styly interaktivních prvků uživatelského rozhraní. | Kategorie | Popis | | - | - | | [Tlačítka](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/buttons.md) | Barvy tlačítek, tloušťka rámečku a poloměr rohu. | | [Vstupy](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/inputs.md) | Barvy polí formuláře, tloušťka rámečku a poloměr rohu. | | [Drobné navigace](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/breadcrumbs.md) | Barvy textu a aktivní položky drobné navigace. | | [Sbalitelná sekce](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/collapsible-section.md) | Barvy, rámeček a poloměr rohu rozbalitelných bloků. | | [Kalendář](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/calendar.md) | Barvy stavu zásob, rámečky a odsazení kalendáře dostupnosti. | ### Cards Styly kartových ploch a dalších vizuálních bloků. | Kategorie | Popis | | - | - | | [Variant pills](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/variant-pills.md) | Barvy, rámeček a poloměr rohu voliče variant. | | [Karta nabídek](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/listings-card.md) | Barvy, rámečky, odsazení a nastavení obrázků karty nabídky. | | [Karta kolekce](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/collection-card.md) | Barvy, rámečky, odsazení a nastavení obrázků karty kolekce. | | [Dostupnost vyzvednutí](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/pickup-availability.md) | Karta dostupnosti vyzvednutí na stránce nabídky. | | [Výběr obchodu v košíku](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/cart-store-selector.md) | Výběr obchodu na stránce košíku. | | [Ukazatel dostupnosti](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/availability-indicator.md) | Tečka stavu dostupnosti a její text. | | [Záhlaví](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/header-bar.md) | Barvy pozadí, textu, ikon a rámečku záhlaví. | | [Oznámení](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/announcement-bar.md) | Barvy pozadí a textu oznamovacího pruhu. | | [Vyhledávací lišta](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/search-bar.md) | Barva pozadí vyhledávací lišty. | | [Sekce filtru](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/filter-section.md) | Barva rámečku sekce filtru na stránce kolekce. | ### Settings Pokročilé nástroje motivu. | Kategorie | Popis | | - | - | | [Vlastní CSS](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/custom-css.md) | Přidejte do storefrontu libovolná pravidla CSS. | | [Styl motivu](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/theme-style.md) | Prohlížejte, kopírujte a hromadně upravujte všechny CSS proměnné motivu. Resetujte celý motiv. | ## Jak to funguje Každý panel kategorie má tlačítko **Obnovit**, které vrátí na výchozí hodnoty pouze nastavení dané kategorie. Pro reset všeho najednou použijte tlačítko **Resetovat celý motiv** v panelu [Styl motivu](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/theme-style.md). Změny se v náhledu zobrazují v reálném čase, ale neukládají se, dokud je neuložíte. **Uložit změny** v horním panelu editoru je zapíše přímo do živého storefrontu. Samostatný krok pro koncept nebo publikování neexistuje. Zavření editoru s neuloženými změnami otevře dialog, kde je uložíte nebo zahodíte. ```text Výchozí postup theme={null} 1. Otevřete editor storefrontu 2. Vyberte kategorii nastavení 3. Upravte hodnoty, náhled se aktualizuje v reálném čase 4. Uložte, změny se projeví okamžitě ``` ## Související články > **[Přehled editoru storefrontu](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/overview.md)** > > Seznamte se s celým editorem storefrontu. > **[Styl motivu](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/theme-style.md)** > > Prohlížejte a upravujte všechny CSS proměnné motivu. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.