Unde se găsesc aceste setări
Brandingul se configurează pentru fiecare piață, iar în cadrul unei piețe afectează toate paginile simultan. Deschide builderul, alege o piață cu butonul de piețe (steagul țării) din partea de sus a barei laterale stânga, apoi deschide fila Settings (pictograma roată). Settings are propriile sub-file în această ordine: Branding, Colors, Fonts, Layout, Animations, Automations, Inputs, Icons, Prohibitions, Checkout, Checkout form, Maintenance page, Custom CSS și Custom Javascript. Modificările se aplică pieței selectate și devin active când apeși Publish. Schimbarea pieței reîncarcă propriile culori, fonturi și layout pentru acea piață.
Schemelor de culori
Fila Colors conține până la 9 scheme de culori. Când atingi limita, cardul de adăugare devine o insignă de numărătoare dezactivată, de exemplu 9/9. Fiecare secțiune, bloc și componentă folosește o schemă după numărul ei, astfel încât modificarea culorilor unei scheme restilizează instant toate secțiunile care o folosesc pe toate paginile. Click dreapta pe un card de schemă pentru a-l duplica sau șterge.
Roluri de culoare în fiecare schemă
Fiecare schemă definește aceste roluri, toate setate ca valori hex:
- Background: fundalul principal al secțiunii.
- Inner Background: fundal nuanțat pentru carduri și conținut încadrat în interiorul unei secțiuni.
- Heading: culoarea textului titlurilor.
- Text: culoarea textului de paragraf și a corpului.
- Important text: text evidențiat, cum ar fi prețuri sau valori scoase în evidență.
- Links și Hover links: culoarea hyperlinkurilor în starea normală și la hover.
- Border: borduri ale elementelor și linii de separare.
- Outline: inele de focus și contururi de accent care trebuie să iasă mai mult în evidență decât bordurile.
- Shadow: culoarea umbrei (de obicei semi-transparentă).
- Primary button: fundal, text și bordură, fiecare cu propria culoare la hover (6 valori în total).
- Secondary button: fundal, text și bordură, fiecare cu propria culoare la hover (6 valori în total).
- Input background, text, border și label: stilizarea câmpurilor de formular.
- Input hover background: fundalul inputului când un client trece cu mouse-ul peste câmp.
Sfaturi pentru scheme puternice
- Păstrează un Background neutru și deschis pe majoritatea secțiunilor și rezervă culorile îndrăznețe pentru o schemă de accent pe secțiunile hero și call-to-action.
- Asigură-te că Primary Button Background este clar distinct de Background al secțiunii, astfel încât butonul să iasă în evidență.
- Setează Inner Background ca o nuanță subtilă a Background principal, pentru ca cardurile să fie separate fără a deranja vizual.
- Țintește un contrast de cel puțin 4.5:1 între text și fundalul său.
Fonturi
Fila Fonts asociază patru roluri cu câte o familie de font:
- Body: text de paragraf și descrieri.
- Heading: toate titlurile din magazin.
- Subheading: titluri secundare și subtitluri de secțiune.
- Accent: font stilistic pentru prețuri, badge-uri și accente decorative.
Fonturi disponibile: 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 și Acme. Pentru magazinele cu conținut în arabă, fiecare font este asociat automat cu un corespondent arab, deci nu trebuie să alegi separat un font arab.
Lățimea paginii
Fila Layout are un slider Page width care setează lățimea maximă a grilei principale de conținut, de la 900 la 1400 px în pași de 100 (adică 900, 1000, 1100, 1200, 1300 sau 1400; implicit este 1200). Secțiunile setate pe Page width sunt limitate la această valoare; cele pe Full width ocupă mereu tot viewportul. Pe ecrane mai înguste decât lățimea aleasă, secțiunile se micșorează la 100% din lățimea ecranului.
Logo
Logo-ul se setează în două locuri: blocul Logo din secțiunea Header și blocul About Us din footer. Dă click pe bloc, apoi folosește selectorul de imagine Logo pentru a alege o imagine din biblioteca media sau pentru a încărca una nouă. După selectare, setează Width și Height (fiecare între 20 și 300 px); cealaltă dimensiune se ajustează automat pentru a păstra proporțiile. Logo-ul din header are implicit 120 px lățime și 50 px înălțime, iar poziția orizontală (stânga, centru sau dreapta) și paddingul pot fi ajustate. Implicit, logo-ul din header duce către pagina principală; îl poți face doar decorativ dezactivând opțiunea Logo redirects to home din grupul Header al filei Prohibitions.
Favicon
Setează favicon-ul în fila Branding. Apasă Select favicon și alege o imagine PNG, JPEG, WEBP sau ICO (dimensiune recomandată 32x32 sau 16x16 px). Acesta apare în tab-urile browserului și în bookmarks.
Imagine de fundal pentru corpul paginii
Tot în fila Branding poți seta opțional o Body image în spatele întregului magazin (PNG, JPEG sau WEBP). După selectarea imaginii, apar două controale: Size (Cover umple viewportul, tăind dacă e nevoie; Contain afișează întreaga imagine) și Repeat (dacă e activ, imaginea se repetă și se derulează cu pagina; dacă e dezactivat, o singură imagine rămâne fixă în viewport și conținutul derulează peste ea). Folosește o imagine puternic comprimată pentru a nu încetini încărcarea paginii.
CSS și JavaScript personalizat
Pentru modificări pe care setările standard nu le pot face, filele Custom CSS și Custom Javascript acceptă fiecare până la 1.000 de caractere care sunt injectate și rulează pe fiecare pagină a magazinului. Folosește-le cu moderație. Pentru stilizare limitată la o singură secțiune, fiecare secțiune are și propria filă Custom CSS în panoul său de control, care este mai sigură decât câmpul la nivel de site.