Butiker
Stilar och delar
Välj stil för en variant, byt stil senare, alternativen per del, form och färger på komponenterna, tokens och egna stilar.
En stil är ett designspråk för hela butiken.
Var: + New variant i designerns variantmeny och fliken Theme i designern.
Tre lager
| Lager | Bestämmer | Ändras i |
|---|---|---|
| Tokens | Färger, typsnitt, basstorlek och radier | Fliken Theme i designern |
| Stil | Hur varje del ser ut, ritad för att passa ihop | När du gör varianten |
| Alternativ | Valen varje del har inom stilen | Options i komponentpanelen |
Välj stil
Du väljer stil när du gör en ny variant i designern.
- Öppna variantmenyn och tryck + New variant.
- Skriv ett namn under Name.
- Välj A style under Start from och sedan en stil. Dina egna stilar har · yours efter namnet.
- Tryck Create variant.
Varianten får stilens utseende och mallarna för Collection pages, Product page och Text pages. Startsidan och dina egna sidor blir som kunderna ser dem.
| Stil | Utseende |
|---|---|
| Classic | Kort, miniatyrer och filter i sidokolumn |
| Bold | Helbreddsbanners, grå plattor, delad produktsida, filterrad och kondenserade versala rubriker |
| Boutique | Höga editorial-kort, serifrubriker, filterrad och mjuka hörn |
| Old school | Crèmefärgad bakgrund, serifrubriker, terrakottafärgade knappar, kort med taggrad och filter i sidokolumn |
| Retro | Senap och ketchup, Archivo Black-rubriker, runda hörn och delad produktsida med bilden till höger |
Prova en stil i en ny variant. Butiken ändras inte förrän du publicerar varianten. Stilens mallar får exempeltext på butikens språk: svenska om butikens språk är svenska, annars engelska.
Byt stil senare
En variant behåller stilen den gjordes med. Vill du ha en annan stil, eller en av dina egna, gör du en ny variant från den med + New variant. Butiken ändras inte förrän du publicerar den nya varianten.
Varianten får en kopia av stilen när du gör den. Senare ändringar i stilen når varianten först när du trycker Reset to följt av stilens namn, till exempel Reset to Bold. Knappen finns under Style of this variant i fliken Theme i designern. Den hämtar den inbyggda stilen, aldrig en av dina sparade stilar, och ber dig bekräfta först.
| Del av varianten | Reset to |
|---|---|
| Färger, typografi, hörn, knappar, delarnas standardval och tema-CSS | Ersätts |
| Logotyp, ljus logotyp, favicon, appikon, tagline och copyrightrad | Behålls |
| Basstorleken | Behålls |
| Komponenternas egna stilar | Behålls |
| Menyns länkar och rubriken över produkterna | Behålls |
Ändringar du har gjort i färger och delar försvinner. ⌘Z tar tillbaka dem.
Alternativ per del
Stilen bestämmer vilka utseenden och val varje del har. Listan per komponent finns under Komponenterna en och en.
Valen ställer du in under Look och Options i komponentpanelen, se Komponentpanelen. Har komponenten en sparad stil sparas valet i stilen. Annars sparas det i varianten. Panelen visar alltid det värde butiken använder.
Färgprickar för varianter
Ett variantalternativ som heter Color, Colour eller Färg visas som färgprickar. Alla värden måste gå att läsa som färger, till exempel black, red, grön eller #E30613. Andra alternativ visas som knappar.
Form och färger på komponenten
Under Options i komponentpanelen finns blocken Shape och Colours. De visar variantens tokens som komponenten använder. Kodredigeraren har inte blocken. En sparad komponentstil innehåller aldrig form eller temafärger.
Shape har chips för hörnen. Vilka chips som visas beror på komponenten:
| Komponent | Chips | Steg |
|---|---|---|
| Product card | Photo corners. Bara för Card och Editorial. Plate har alltid raka hörn | Square 0, Soft 8, Rounded 16, Very round 28 px, och stilens eget värde (Classic: 14) |
| Menu panel | Photo corners. Bara med Links, products, contact och Products beside the links på | Samma |
| Gallery | Photo corners för den stora bilden. Thumbnail corners för miniatyrerna, bara med Thumbnails | Samma |
| Product page, Collection page, Banners | Button corners | Square, Slight, Soft, Rounded, Pill |
Raden under chipsen visar var värdet används:
- Photo corners: alla produktbilder och kategorirutor utan bild.
- Thumbnail corners: miniatyrerna och hörnen på sidans sektioner.
- Button corners: alla knappar i butiken.
Classic har fotohörn på 14 px och Boutique på 20 px. Har stilen ett värde som inte är ett steg får det ett eget chip med talet som namn. Det chipet är nedtryckt på en orörd variant. Har varianten ett annat värde, satt under More tokens, är inget chip nedtryckt och raden visar talet. Ett värde som skiljer sig från stilens får reset.
Colours visar temafärgerna komponenten använder:
| Komponent | Färger |
|---|---|
| Header | Header background, Header text, Header text over hero, Background, Foreground |
| Menu panel | Background, Foreground, Muted |
| Footer | Footer background, Footer text |
| Product card | Surface, Foreground |
| Product page | Primary, Primary text, Background, Foreground, Muted |
| Gallery | Surface, Muted, Foreground, Primary |
| Collection page | Background, Foreground, Muted, Primary, Primary text |
| Banners | Primary, Primary text |
Obs: Färgerna under Colours är variantens. En ändring här ändrar färgen överallt där den används. Färger som bara gäller komponenten sätter du under fliken Design i kodredigeraren.
Tokens i fliken Theme
Fliken Theme i designern ändrar variantens tokens utan att byta stil.
| Block | Innehåll |
|---|---|
| Layout | Page width, bredden på alla sidor: XS 640, S 768, M 1024, L 1280, XL 1440, 2XL 1536, Full eller egen bredd. M 1024 tills du väljer något annat. Sektioner på Page följer den. Side margin visar sidomarginalen, 16, 24 och 32 px. Den är inte ett val. Kassan har sin egen ram. Se Bredd |
| Colours | Variantens färger med namn |
| Typography | Typsnittspar och basstorlek |
| Typography › Headings | Case (As typed, Uppercase, Capitalize), Tracking (0, 0.01, 0.02, 0.04 em eller eget värde) och Weight (400–800) för alla rubriker |
| Buttons | Hörn, vikt, versaler, Font (brödtext eller rubrik) och köpknappens färg |
| Custom CSS | Tema-CSS ovanpå stilen. Se Egen CSS och kod i head |
| More tokens | Hela tokenpanelen, se nästa tabell |
Rubrikval du inte har ändrat följer stilen, och raden visar Style default. Ett eget värde får reset, som lägger tillbaka stilens val.
| Under More tokens | Innehåll |
|---|---|
| Brand palette | 11 färger med roller: Paper, Ink, Primary, On primary, Ketchup, Mustard, Krasse, Bun, Brine, Muted, Char |
| Type system | Rubrik- och brödtextfamilj, rubrikernas case, tracking och vikt, och basstorleken |
| Rhythm | Avståndsskalans steg i px |
| Corner radii | SM, MD, LG och FULL. Samma värden som chipsen under Shape |
| Elevation | 3 skuggor |
| Animation tokens | 3 tider i ms och en easing |
| Your own settings | Egna tokens. Namnet hero-blur blir var(--bunstack-token-hero-blur) i din CSS |
Spara som egen stil
En egen stil sparar variantens stil, alternativ, färger, typsnitt, logotyp och tema-CSS, och sektionerna i de tre mallarna.
- Öppna fliken Theme i designern.
- Tryck + Save current as my style under Your styles.
- Skriv ett namn och spara. Namnet får inte redan finnas under Your styles.
Stilen sparar alla delars val, inte bara dem du har ändrat. Den sparar också sektionerna i Collection pages, Product page och Text pages, se Sidmallar. Home och dina egna sidor sparas inte med den. En ny variant från stilen börjar med de sektionerna. Stilen syns i alla butiker i workspacet: under Your styles i designern och under + New variant.
Spara om en egen stil med variantens utseende:
- Öppna varianten i designern och fliken Theme.
- Tryck Update vid stilen under Your styles.
- Tryck Update i rutan.
Stilen tar variantens utseende och behåller sitt namn. Varianten du har öppen ändras inte, och varianter som redan är gjorda från stilen behåller sitt utseende. Stilens gamla version sparas inte.
Ta bort en egen stil:
- Tryck på krysset vid stilen.
- Tryck Continue.
- Skriv stilens namn.
- Tryck Delete.
Stilen försvinner i alla butiker i workspacet. Butiker som använder den behåller sitt utseende, eftersom de har en egen kopia.
Your styles och Your header styles
| Lista | Innehåller | Sparas | Läggs på |
|---|---|---|---|
| Your styles | Hela variantens stil: färger, typsnitt, logotyp, alla delars val, tema-CSS, komponenternas aktiva stilar och sektionerna i de tre mallarna | Med + Save current as my style i fliken Theme, och på nytt med Update | När du gör en ny variant med + New variant |
| Your header styles och motsvarande listor | En stil för en komponent: utseende, alternativ, fliken Design och koden. Aldrig variantens färger, form eller logotyp | Med Save as new style i kodredigeraren | Under Look i komponentpanelen. Se Komponentpanelen |
Båda listorna hör till workspacet och syns i alla butiker. Tar du bort en stil ur en lista ändras ingen butik som redan använder den.