Kde tato nastavení najdete
Tato nastavení se konfigurují pro každý trh zvlášť a v rámci jednoho trhu ovlivňují všechny stránky najednou. Otevřete editor, vyberte trh pomocí záložky trhů (ikona vlajky země) v levém postranním panelu a poté klikněte na záložku Nastavení (ikona ozubeného kola). Změny se použijí na trh, který máte vybraný, a projeví se po kliknutí na tlačítko Publikovat. Úplný seznam všech nastavení najdete v článku Přehled nastavení editoru.
Barevné palety
Storeep používá paletu až 9 barevných schémat. Každá sekce, blok a komponenta ve vašem obchodě odkazuje na jedno z těchto schémat podle jeho čísla (1 až 9). Změna barev schématu okamžitě aktualizuje každou sekci, která jej používá, napříč všemi stránkami.
Role barev v rámci každého schématu
Každé schéma definuje následující role barev, všechny zadané jako hexadecimální hodnoty barvy:
- Pozadí: hlavní barva pozadí sekce.
- Vnitřní pozadí: jemně tónované pozadí používané pro karty a vnořené oblasti obsahu uvnitř sekce.
- Barva nadpisu: barva textu nadpisů.
- Barva základního textu: barva textu odstavců.
- Barva zvýrazněného textu: zdůrazněná barva textu používaná pro ceny, odznaky úspory a hodnoty odpočítávání. Obvykle nejtmavší nebo nejvýraznější odstín v paletě.
- Barva odkazu: výchozí barva hypertextového odkazu.
- Barva odkazu při najetí: barva hypertextového odkazu, když na něj zákazník najede myší.
- Barva okraje: barva okrajů prvků a oddělovacích čar.
- Barva obrysu: barva pro fokusové rámečky, zvýraznění výběru klávesnicí a akcentové obrysy, které musí vyniknout více než běžné okraje.
- Barva stínu: barva pro stíny boxů (obvykle s určitou průhledností).
- Pozadí primárního tlačítka: barva výplně primárních tlačítek.
- Text primárního tlačítka: barva popisku na primárních tlačítkách.
- Okraj primárního tlačítka: barva okraje primárních tlačítek.
- Pozadí primárního tlačítka při najetí: barva výplně primárního tlačítka při najetí myší.
- Text primárního tlačítka při najetí: barva popisku primárního tlačítka při najetí myší.
- Okraj primárního tlačítka při najetí: barva okraje primárního tlačítka při najetí myší.
- Pozadí sekundárního tlačítka: barva výplně sekundárních tlačítek.
- Text sekundárního tlačítka: barva popisku na sekundárních tlačítkách.
- Okraj sekundárního tlačítka: barva okraje sekundárních tlačítek.
- Pozadí sekundárního tlačítka při najetí: barva výplně sekundárního tlačítka při najetí myší.
- Text sekundárního tlačítka při najetí: barva popisku sekundárního tlačítka při najetí myší.
- Okraj sekundárního tlačítka při najetí: barva okraje sekundárního tlačítka při najetí myší.
- Pozadí pole: barva pozadí vstupních polí formuláře.
- Barva textu pole: barva textu uvnitř vstupních polí formuláře.
- Barva okraje pole: barva okraje vstupních polí formuláře.
- Barva popisku pole: barva textu popisku nad poli formuláře.
- Pozadí pole při fokusu: barva pozadí pole, když na něj zákazník zaměří fokus nebo najede myší.
Tipy pro silné barevné palety
- Pro Pozadí u většiny sekcí použijte neutrální světlou barvu a výrazné barvy si nechte pro jediné akcentové schéma používané v hero sekcích a sekcích s výzvou k akci.
- Učiňte Pozadí primárního tlačítka vizuálně odlišné od Pozadí sekce, protože tlačítko musí jasně vyniknout.
- Ponechte Vnitřní pozadí jako velmi mírný odstín hlavního Pozadí, aby byla pozadí karet rozpoznatelná, ale ne rušivá.
- Usilujte o kontrast alespoň 4,5:1 mezi Barvou základního textu a Pozadím a mezi Textem primárního tlačítka a Pozadím primárního tlačítka.
Typografie
Typografii napříč všemi stránkami řídí čtyři role písem. Každá role je přiřazena k rodině písem z dostupné knihovny.
- Základní: hlavní písmo pro text odstavců a popisy.
- Nadpisy: písmo pro všechny nadpisy v celém obchodě.
- Podnadpisy: písmo pro sekundární titulky a podnadpisy sekcí, které propojuje styly nadpisů a základního textu.
- Akcent: stylové písmo pro ceny, odznaky a dekorativní zvýraznění.
Dostupná písma zahrnují: 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.
U obchodů s arabským obsahem jsou písma automaticky spárována s odpovídajícími arabskými protějšky: například Inter je spárováno s Cairo a Poppins s Tajawal. Arabské písmo nemusíte vybírat zvlášť.
Šířka stránky
Globální nastavení Šířka stránky řídí maximální šířku hlavní mřížky obsahu v pixelech. Sekce nastavené na šířku Stránka jsou omezeny na tuto hodnotu; sekce nastavené na Celá vždy zabírají celou plochu zobrazení bez ohledu na to. Dostupné hodnoty: 900, 1000, 1100, 1200 (výchozí), 1300 a 1400 px. Na zobrazeních užších, než je vybraná šířka, se sekce automaticky zmenší tak, aby vyplnily 100 % obrazovky.
Logo
Logo se nastavuje v bloku loga sekce Záhlaví a v bloku O nás v zápatí. Klikněte na blok loga v ovládacím panelu, poté klikněte na + Přidat média nebo + Přidat obrázek a nahrajte své logo ze zařízení nebo jej vyberte z knihovny médií. Po nahrání nastavte zobrazovanou šířku (20 až 300 px) a výšku (20 až 300 px); druhý rozměr se škáluje automaticky, aby se zachoval poměr stran.
Favikona
Favikona se nastavuje v editoru v Nastavení → Branding. Klikněte na pole favikony a nahrajte obrázek (doporučeno: čtvercový obrázek). Favikona se zobrazuje na záložkách prohlížeče a v záložkách (oblíbených).
Obrázek na pozadí stránky
Rovněž v Nastavení → Branding: volitelně můžete nastavit obrázek na pozadí celé stránky. Nakonfigurujte, jak se škáluje (Vyplnit vyplní celou plochu zobrazení, Přizpůsobit umístí obrázek dovnitř), a zda se opakuje (dlaždicově), nebo zůstává jako jeden obrázek za posouvajícím se obsahem.
Globální vlastní CSS a JavaScript
Pro pokročilé úpravy, kterých standardní nastavení nedosáhnou, poskytuje Nastavenípole Globální CSS (až 1 000 znaků) a pole Globální JS (až 1 000 znaků). CSS zadané zde se vkládá na každou stránku obchodu; JS zadané zde běží na každé stránce. Používejte je střídmě a pro úpravy specifické pro jednotlivé stránky upřednostněte sekci Vlastní kód.