Přejít na hlavní obsah
Panel nastavení vlastního CSS v editoru storefrontu

Editor storefrontu > Vlastní CSS

Panel Vlastní CSS poskytuje editor kódu pro přidání libovolných pravidel CSS do vašeho storefrontu. Použijte jej pro vše, co vizuální nastavení motivu nepokrývají: vlastní hover efekty, skrytí konkrétních prvků nebo doladění responzivního chování.

Jak to funguje

  1. Klikněte na ikonu odemknout pro zapnutí úprav.
  2. Napište své CSS do editoru.
  3. Klikněte na Použít změny. Náhled se aktualizuje okamžitě.
  4. Klikněte na Uložit v horní liště editoru pro nasazení změn na živý storefront.
CSS se vkládá až po všech stylech motivu, takže vaše pravidla mají přednost. Editor se spouští uzamčený, aby se předešlo náhodným úpravám. Odemkněte jej pokaždé, když chcete provést změny.
Vlastní CSS se před uložením na serveru sanitizuje. Pravidla @import a @charset se odstraní a každý výraz url(...) se nahradí hodnotou none. To znamená, že pozadí obrázků, webová písma načítaná přes @font-face a pravidla content: url(...) se potichu přestanou zobrazovat. Pro použití obrázků nebo písem využijte nastavení motivu (například Typografie) nebo je načtěte přes vlastní skripty.

Použití proměnných motivu

Každé nastavení motivu je dostupné jako CSS proměnná. Odkazujte se na ně ve svém vlastním CSS, abyste zůstali v souladu se zbytkem motivu, pokud později změníte barvu v panelu Barvy, vaše vlastní CSS změnu automaticky převezme.
Úplný seznam CSS proměnných najdete v panelu Styl motivu.
Vlastní CSS se použije globálně na každou stránku vašeho storefrontu a uložené změny se projeví okamžitě. Otestujte je napříč více stránkami a zobrazeními, než je uložíte.

Související články

Styl motivu

Prohlížejte a kopírujte všechny dostupné CSS proměnné.

Barvy

Definujte barevnou paletu storefrontu.