Preskočiť na obsah
Pomoc
Slovenčina
Builder obchodu

Farby, písma a vizuálna identita

Nastavte globálne farebné schémy, typografické roly, šírku stránky, logo, favicon a obrázok na pozadí.

Kde sa tieto nastavenia nachádzajú

Tieto nastavenia sa konfigurujú pre každý trh osobitne a v rámci trhu ovplyvňujú všetky stránky naraz. Otvorte editor, vyberte trh pomocou karty trhu (ikona vlajky krajiny) v ľavom paneli a potom kliknite na kartu Nastavenia (ikona ozubeného kolieska). Zmeny sa použijú na vybraný trh a stanú sa aktívnymi po kliknutí na Publikovať. Úplný zoznam všetkých nastavení nájdete v príručke Príručka nastavení editora.

Farebné schémy

Storeep používa paletu až 9 farebných schém. Každá sekcia, blok a komponent vo vašom obchode odkazuje na jednu z týchto schém podľa jej čísla (1 až 9). Zmena farieb schémy okamžite aktualizuje každú sekciu, ktorá ju používa, naprieč všetkými stránkami.

Roly farieb v rámci každej schémy

Každá schéma definuje nasledujúce roly farieb, všetky nastavené ako hexadecimálne hodnoty farieb:

  • Pozadie: hlavná farba pozadia sekcie.
  • Vnútorné pozadie: jemne zafarbené pozadie používané pre karty a vnorené obsahové oblasti v rámci sekcie.
  • Farba nadpisu: farba textu nadpisov.
  • Farba textu: farba textu odsekov.
  • Farba zvýrazneného textu: zvýraznená farba textu používaná pre ceny, odznaky úspory a hodnoty odpočítavania času. Zvyčajne najtmavší alebo najvýraznejší tón v palete.
  • Farba odkazu: predvolená farba hypertextového odkazu.
  • Farba odkazu pri prejdení myšou: farba hypertextového odkazu, keď naň zákazník prejde myšou.
  • Farba orámovania: farba orámovania prvkov a oddeľovacích čiar.
  • Farba obrysu: farba pre prstence zaostrenia, zvýraznenia klávesnicového výberu a akcentové obrysy, ktoré musia vyniknúť viac ako bežné orámovanie.
  • Farba tieňa: farba pre tiene boxov (zvyčajne s istou priehľadnosťou).
  • Pozadie primárneho tlačidla: výplňová farba primárnych tlačidiel.
  • Text primárneho tlačidla: farba popisu na primárnych tlačidlách.
  • Orámovanie primárneho tlačidla: farba orámovania primárnych tlačidiel.
  • Pozadie primárneho tlačidla pri prejdení myšou: výplňová farba primárneho tlačidla pri prejdení myšou.
  • Text primárneho tlačidla pri prejdení myšou: farba popisu primárneho tlačidla pri prejdení myšou.
  • Orámovanie primárneho tlačidla pri prejdení myšou: farba orámovania primárneho tlačidla pri prejdení myšou.
  • Pozadie sekundárneho tlačidla: výplňová farba sekundárnych tlačidiel.
  • Text sekundárneho tlačidla: farba popisu na sekundárnych tlačidlách.
  • Orámovanie sekundárneho tlačidla: farba orámovania sekundárnych tlačidiel.
  • Pozadie sekundárneho tlačidla pri prejdení myšou: výplňová farba sekundárneho tlačidla pri prejdení myšou.
  • Text sekundárneho tlačidla pri prejdení myšou: farba popisu sekundárneho tlačidla pri prejdení myšou.
  • Orámovanie sekundárneho tlačidla pri prejdení myšou: farba orámovania sekundárneho tlačidla pri prejdení myšou.
  • Pozadie vstupného poľa: farba pozadia vstupných polí formulára.
  • Farba textu vstupného poľa: farba textu vo vstupných poliach formulára.
  • Farba orámovania vstupného poľa: farba orámovania vstupných polí formulára.
  • Farba menovky vstupného poľa: farba textu menovky nad poliami formulára.
  • Pozadie vstupného poľa pri zaostrení: farba pozadia vstupného poľa, keď naň zákazník zaostrí alebo naň prejde myšou.

Tipy pre silné farebné schémy

  • Pre Pozadie väčšiny sekcií použite neutrálnu svetlú farbu a výrazné farby si nechajte pre jednu akcentovú schému používanú v hlavných a výzvových sekciách.
  • Nech sa Pozadie primárneho tlačidla vizuálne líši od Pozadia sekcie, pretože tlačidlo musí jasne vyniknúť.
  • Ponechajte Vnútorné pozadie ako veľmi jemný odtieň hlavného Pozadia, aby boli pozadia kariet rozoznateľné, no nepôsobili rušivo.
  • Usilujte sa o kontrast aspoň 4,5:1 medzi Farbou textu a Pozadím, ako aj medzi Textom primárneho tlačidla a Pozadím primárneho tlačidla.

Typografia

Typografiu naprieč všetkými stránkami riadia štyri roly písma. Každá rola je priradená k rodine písma z dostupnej knižnice.

  • Telo: hlavné písmo pre text odsekov a opisy.
  • Nadpis: písmo pre všetky nadpisy v celom obchode.
  • Podnadpis: písmo pre sekundárne názvy a podnadpisy sekcií, ktoré prepája štýly nadpisu a tela.
  • Akcent: štylistické písmo pre ceny, odznaky a dekoratívne zvýraznenie.

Medzi dostupné písma patria: Inter, Helvetica, SF Mono, New York, System UI, Roboto, Open Sans, Lato, Montserrat, Poppins, Raleway, Nunito, Merriweather, Playfair Display, Lora, PT Sans, PT Serif, Quicksand, Space Grotesk, DM Sans, Syne, Manrope, Outfit, Urbanist, Oswald, Bebas Neue, Abel, Abril Fatface a Acme.

Pri obchodoch s arabským obsahom sa písma automaticky párujú so zodpovedajúcimi arabskými náprotivkami: napríklad Inter sa páruje s Cairo a Poppins s Tajawal. Arabské písmo nemusíte vyberať samostatne.

Šírka stránky

Globálne nastavenie Šírka stránky riadi maximálnu šírku hlavnej obsahovej mriežky v pixeloch. Sekcie nastavené na šírku Stránka sú obmedzené na túto hodnotu; sekcie nastavené na Plnú šírku vždy zaberajú celý zobrazovací priestor bez ohľadu na to. Dostupné hodnoty: 900, 1000, 1100, 1200 (predvolené), 1300 a 1400 px. Na zobrazovacích priestoroch užších ako vybraná šírka sa sekcie automaticky zmenšia, aby vyplnili 100 % obrazovky.

Logo sa nastavuje vo vnútri bloku loga v sekcii Hlavička a vo vnútri bloku O nás v päte. Kliknite na blok loga v ovládacom paneli a potom kliknite na + Pridať médium alebo + Pridať obrázok, aby ste nahrali svoje logo zo svojho zariadenia alebo ho vybrali z knižnice médií. Po nahratí nastavte zobrazovaciu šírku (20 – 300 px) a výšku (20 – 300 px); druhý rozmer sa automaticky prispôsobí, aby sa zachoval pomer strán.

Favicon

Favicon sa nastavuje v Nastavenia → Vizuálna identita v editore. Kliknite na pole favicon a nahrajte obrázok (odporúčaný: štvorcový obrázok). Favicon sa zobrazuje na kartách prehliadača a v záložkách.

Obrázok na pozadí tela stránky

Tiež v Nastavenia → Vizuálna identita: voliteľne môžete nastaviť obrázok na pozadí pre celú stránku. Nastavte, ako sa škáluje (Pokrytie vyplní celý zobrazovací priestor, Obsiahnutie doň obrázok zmestí) a či sa opakuje (dlaždicovo) alebo zostáva ako jeden obrázok za posúvajúcim sa obsahom.

Globálne vlastné CSS a JavaScript

Pre pokročilé úpravy, ktoré štandardné nastavenia nedokážu dosiahnuť, poskytuje NastaveniaGlobálne CSS pole (až 1 000 znakov) a pole Globálne JS (až 1 000 znakov). CSS zadané sem sa vkladá na každú stránku obchodu; JS zadané sem sa spúšťa na každej stránke. Používajte ich striedmo a pre úpravy špecifické pre jednotlivé stránky uprednostnite sekciu Vlastný kód.