Sektioner och sidor

En sida består av sektioner, till exempel en hero eller en produktrad.

Var: Fliken Sections och fliken Pages i designern.

#Lägg till en sektion

Tre vägar öppnar samma bibliotek:

• Add section i sektionslistan, eller fliken Library. Sektionen hamnar efter den markerade sektionen och blir markerad. Utan markering hamnar den sist.
• Mellan två sektioner på arbetsytan. Håll pekaren mellan två sektioner. En linje med ett plus visas. Klicka på plustecknet. Biblioteket visar var sektionen hamnar, till exempel "Lands between Hero and Product grid".
• ⌘K › Add a section to this page.

Biblioteket har en sökruta och kategorier. En mall med flera sektioner läggs in hel, i sin ordning, på platsen du valde.

En ny sektion eller mall har exempeltext på butikens språk: svenska om butikens språk är svenska, annars engelska. Exempeltexten lovar inget om frakt, returer eller betalning. Skriv in dina egna villkor. Video och sociala länkar är tomma tills du lägger in dina egna adresser.

Bilder väljer du med Choose image, som öppnar mediabiblioteket. Du kan också klistra in en adress.

#Flytta, kopiera och ta bort

• Dra en rad i listan under fliken Sections för att flytta sektionen. Det går bara att dra där. På arbetsytan har den markerade sektionen knapparna ▲ ▼ Dup Del.
• ⋯ Actions på den markerade raden öppnar sektionens meny. Högerklick på en rad öppnar samma meny. Raden har annars bara märket ON/OFF.
• Delete i menyn tar bort sektionen. Notisen visar vad som togs bort, till exempel "Removed Hero", och har knappen Undo. Tangenten Delete gör samma sak. Backsteg gör det inte.
• Varje rad heter som sektionens rubrik, etikett eller första textrad.

Menyn, uppifrån och ner:

En sida utan sektioner visar This page has no sections yet i designern. Butiken visar då en standardsida.

#Inspektorn

Ett klick på en sektion öppnar Content först: rubrik, text, bild och knappens etikett. Ett dubbelklick på en text redigerar den på arbetsytan. ⏎ sparar och Esc ångrar. Ett dubbelklick på formaterad text öppnar textredigeraren i stället, se Formaterad text.

En sektion med många inställningar har fyra grupper:

En sektion med få inställningar visar en lista utan grupper. Förklaringar står på en rad under kontrollen.

Open the deep inspector visar fliken Design: färger, marginaler, typografi, kanter, skuggor och egen CSS, per brytpunkt och per tillstånd. Valet gäller resten av sessionen. En sektion med Width och Per screen size visar bredd och kolumner där som en hänvisning till Content. Egen CSS under Advanced når sektionen som förut. En bredd eller maxbredd som sektionens egen stil satte tidigare står kvar där tills du tar bort den. Den går före Width.

#Bredd

Width står först under Layout på varje sektion utom Spacer. En Custom component har den under LAYOUT i sin egen panel, med Show on. Page text i mallen Text pages har Reading width i stället, se Sidmallar.

• På en skärm smalare än bredden blir innehållet skärmen minus sidomarginalen: 16 px på mobil, 24 px på surfplatta och 32 px på dator.
• Bredden är samma på alla skärmar. På en skärm som är 1440 px bred ser XL, 2XL och Full likadana ut.
• FAQ, Paragraph, Newsletter och Form börjar på XS, Callout på S och Video på M. En bildbanner följer stilen: Full i Bold och Page i Classic. Övriga sektioner börjar på Page.
• En bildbanner med den gamla bredden visar den i fältet: Narrow som S och Wide som 2XL. Inget skrivs om.
• Har en bildbanner fått en egen bredd tar Follow the style (…) under knapparna tillbaka stilens bredd. En gammal bredd försvinner också.
• Videospelaren fyller sektionens bredd i videons form. Den blir aldrig högre än 85 % av skärmen, så en bred eller stående video kan bli smalare än sektionen.
• I kategorisidans kolumn bredvid filtren fyller varje sektion kolumnen.

Med en sektion markerad visar arbetsytan en linjal och sidomarginalen. Se Design och varianter.

#Per skärmstorlek

Per screen size under Layout har Desktop, Tablet och Mobile bredvid varandra. Mobile är upp till 640 px, Tablet 641–1024 px och Desktop från 1025 px.

• Ett tomt värde står som auto i grått. Kolumnerna räknas fram från Desktop: högst 3 på surfplatta och 2 på mobil. Testimonials, Collection list och ett produktrutnät med 2 kolumner har 1 på mobil.
• En tom höjd följer skärmen bredvid: Tablet följer Desktop och Mobile följer Tablet.
• Ett eget värde är svart. × auto tar tillbaka auto.
• Den sista skärmen under Show on går inte att slå av. Ögat i Sections döljer sektionen på alla skärmar.
• Är den första sektionen dold på en skärm tar nästa sektion som visas där dess plats: inget mellanrum ovanför, och en Full-banner ligger direkt under sidhuvudet.
• På varje skärm laddas bilderna i den första sektionen med bilder där först. Bilder i en sektion som är dold på en skärm laddas inte ner där.
• Ett klick på Desktop, Tablet eller Mobile byter arbetsytan dit, som enhetsknapparna överst. Kolumnen för skärmen som visas har en svart ram.
• En sektion som är dold på skärmen som visas är en grå remsa på arbetsytan. Den går att markera. Preview och butiken visar den inte.

#Storlek och form

Varje inställning har förval som knappar. Custom tar ett eget värde.

En inställning som inte är vald visar sektionens standardvärde och är märkt default vid namnet. Kommer standardvärdet från stilen är den märkt follows the style. Har du valt något annat tar Follow the style (…) tillbaka stilens val.

Är ett eget värde ogiltigt använder sektionen förvalet.

En bildbanner med text har också Text align, Text position och Button style. Text align är centrerad, eller vänsterställd med mörk toning från vänster. Text position är Center, Top eller Bottom. Button style är Primary (temats knappfärg), Light (vit knapp) eller Outline.

#Sektionen Categories

Sektionen Categories visar kategorier som rutor med bild och namn, till exempel under rubriken "Shop by category".

Var: Markera sektionen. Fältet Categories står under What it shows.

• En rad per kategori: bild, namn, ↑ ↓ och ×. Radernas ordning är ordningen i butiken.
• + Add a category… lägger kategorin sist. Listan visar hela trädet. En underkategori står med sin överkategori, till exempel "Kläder › Jackor". Valda kategorier är märkta in the list och går inte att välja igen. Kategorier utan produkter i butiken är märkta no products.
• × tar bort kategorin ur sektionen, och sektionens egen bild för den. ⌘Z ångrar.
• Håller du pekaren över en rad får kategorins ruta på arbetsytan en streckad ram.

En tom lista är automatisk: rutan Automatic visar alla toppkategorier med produkter, i ordningen från Products › Categories. En kategori vars produkter ligger i underkategorierna kommer med. Pick them myself gör dem till rader som du kan ordna och ge egna bilder. Väljer du i stället en kategori under Add a category… visar sektionen bara den.

En kategori som har tagits bort visas som Not found med bara ×. Byter du en kategoris slug i admin följer raden med. Finns ingen av de valda kategorierna kvar visar butiken inte sektionen.

#Bilden i rutan

Raden visar vilken bild rutan har:

• Change image öppnar mediabiblioteket. Bilden du väljer gäller bara sektionen. Kategorins bild ändras inte. Har kategorin ingen bild heter knappen Choose image.
• ↺ Use category image tar bort sektionens egen bild.
• Sektionens egna bilder ligger i utkastet och går live när du publicerar. Kategorins egen bild byter du i Products › Categories, se Kategorier. Den går live när du sparar, och designern visar den nästa gång den laddas.

#Formaterad text

Rich text, Paragraph, texten i Image + text och Callout, kortens text i Cards och svaren i FAQ är formaterad text. De har samma redigerare som produktbeskrivningen.

• Dubbelklicka på texten på arbetsytan, eller tryck Edit text i inspektorn. Redigeraren öppnas över texten.
• Verktygsfältet har rubriker, fetstil, kursiv, listor, länkar, bilder, tabeller och video. Bilderna hämtas från mediabiblioteket.
• En länk går till en Product, en Page eller en Address. En länk till en produkt följer med när produktens adress ändras.
• Texten sparas medan du skriver. Done eller Esc stänger redigeraren.
• Med Advanced på har redigeraren också HTML-vyn.

Text som skrevs före redigeraren visas som förut. Den blir formaterad text första gången du ändrar den i redigeraren.

#Kort

Cards visar en bild, en rubrik, text och länkar per kort. Använd den till spelare, personal, fördelar eller spalter.

1. Lägg till Cards från biblioteket. Sektionen kommer med tre kort.
2. Tryck Add card i inspektorn för fler. Dra i ett korts rad för att flytta kortet.
3. Öppna ett korts rad och tryck Choose picture. Fyll i Alt text när bilden säger något som rubriken inte säger.
4. Dubbelklicka på rubriken eller texten på arbetsytan och skriv. Texten öppnas också med Edit text på kortets rad.
5. Lägg till länkar under Links: en adress och en etikett per länk, högst 6.

Kolumnerna per skärm står under Layout › Per screen size, som för de andra rutnäten.

En länk till Instagram, Facebook, TikTok, YouTube, LinkedIn eller X visas som nätverkets märke, till exempel IG. Andra länkar blir knappar med etiketten. Ett kort utan innehåll visas inte i butiken.

Sektionen Collection list finns inte längre i biblioteket. En som redan ligger på en sida visas som förut. Dess inspektor har Convert to Cards, som gör en Heading och Cards av samma poster.

#FAQ

FAQ visar frågor. I butiken öppnar ett klick på en fråga dess svar.

1. Lägg till FAQ från biblioteket. Sektionen kommer med två frågor.
2. Tryck Add question i inspektorn för fler. Dra i en frågas rad för att flytta frågan.
3. Öppna en frågas rad och skriv frågan under Question. Det går också att dubbelklicka på frågan på arbetsytan. Svaret förblir öppet eller stängt medan du skriver.
4. Tryck Edit answer. Svaret är formaterad text, se Formaterad text.

• En fråga utan text visas inte i butiken.
• En FAQ som skrevs med en rad per fråga, fråga | svar, visas som förut. Inspektorn listar dess frågor, och den första ändringen sparar dem som en lista.

#Produktvisning

Product showcase visar en produkt, eller en lista du väljer, med stor bild, pris, en kort text och en knapp.

Den korta texten är produktens Short description, annars beskrivningens första stycke. Staplarna är produktens Bar-egenskaper, var och en på sin skala, som på produktsidan. En produkt utan Bar-egenskap visar sina fria attribut Speed, Spin, Control, Power, Feel och Hardness med ett värde från 0 till 100. Se Attribut. Tom Button label ger Handla nu i en svensk butik, annars Shop now.

#Bakgrund

Varje sektion har Background i fliken Content. Den lägger ett färgat band bakom sektionen.

Färgerna kommer från Theme › Colours. Bandet går alltid från kant till kant på skärmen. Sektionens innehåll behåller sin bredd. Två sektioner i rad med samma bakgrund blir ett band. En knapp i butikens huvudfärg på Brand får bandets färger åt andra hållet. En sektion som inte visar något i butiken får inget band.

Fliken Design visar Background: set in Content. för en sektion. En fyllnad som sattes där tidigare ligger kvar tills du trycker Clear the old fill.

#Sidor

Fliken Pages listar butikens sidor. Mallarna under Templates öppnas som Home och har sektioner med lås, se Sidmallar. Kugghjulet på en rad öppnar sidans inställningar. Menyn ⋯ har Duplicate och Delete. Skapa en sida: se Design och varianter.

#Vad som sparas när

• En sidas sektioner ligger i temautkastet och går live när du publicerar.
• En sidas inställningar gäller i butiken så fort du ändrar dem. Panelen visar They are not part of the draft you publish.
• Raden Menu i inställningarna ändrar menyns länkar. Den väntar på Publish, som resten av designen.

Produktsektioner på en egen sida, som produktrutnät, nyheter och bästsäljare, visar samma produkter som på startsidan.

#Inställningarna

En sida med sektioner men utan inställningar har knappen Set up i listan. Den ger sidan en adress och en status.

Varning: Schemat styr när sidan syns, inte vad den innehåller. Publicera temat före tiden. Annars går en tom sida live.

#Ta bort en sida

Tryck Delete i menyn ⋯ och sedan den röda knappen i rutan. Enter bekräftar inte. BunStack tar bort sidan, dess utkast och alla dess versioner.

#Egen kod per sida

Panelen Code har sidans egen CSS, JS och <head>-kod. Panelen visas med Advanced på. Se Egen CSS och kod i head.