Sektioner og sider

En side består af sektioner, for eksempel en hero eller en produktrække.

Hvor: Fanen Sections og fanen Pages i designeren.

#Tilføj en sektion

Tre veje åbner samme bibliotek:

• Add section i sektionslisten, eller fanen Library. Sektionen havner efter den markerede sektion og bliver markeret. Uden markering havner den sidst.
• Mellem to sektioner på arbejdsfladen. Hold markøren mellem to sektioner. En linje med et plus vises. Klik på plusset. Biblioteket viser, hvor sektionen havner, for eksempel "Lands between Hero and Product grid".
• ⌘K › Add a section to this page.

Biblioteket har et søgefelt og kategorier. En skabelon med flere sektioner lægges ind hel, i sin rækkefølge, på det sted, du valgte.

En ny sektion eller skabelon har eksempeltekst på butikkens sprog: svensk, når butikkens sprog er svensk, ellers engelsk. Eksempelteksten lover intet om fragt, returnering eller betaling. Skriv dine egne vilkår ind. Video og sociale links er tomme, indtil du indsætter dine egne adresser.

Billeder vælger du med Choose image, som åbner mediebiblioteket. Du kan også indsætte en adresse.

#Flyt, kopiér og slet

• Træk en række i listen under fanen Sections for at flytte sektionen. Det kan kun trækkes der. På arbejdsfladen har den markerede sektion knapperne ▲ ▼ Dup Del.
• ⋯ Actions på den markerede række åbner sektionens menu. Højreklik på en række åbner samme menu. Rækken har ellers kun mærket ON/OFF.
• Delete i menuen fjerner sektionen. Meddelelsen viser, hvad der blev fjernet, for eksempel "Removed Hero", og har knappen Undo. Delete-tasten gør det samme. Tilbagetasten gør det ikke.
• Hver række hedder som sektionens overskrift, mærkat eller første tekstlinje.

Menuen, oppefra og ned:

En side uden sektioner vises tom i designeren med en tekst om, at den er tom. Butikken viser så en standardside.

#Inspektøren

Et klik på en sektion åbner Content først: overskrift, tekst, billede og knappens mærkat. Et dobbeltklik på en tekst redigerer den på arbejdsfladen. ⏎ gemmer, og Esc fortryder. Et dobbeltklik på formateret tekst åbner teksteditoren i stedet, se Formateret tekst.

En sektion med mange indstillinger har fire grupper:

En sektion med få indstillinger viser en liste uden grupper. Forklaringer står på en linje under kontrollen.

Open the deep inspector viser fanen Design: farver, margener, typografi, kanter, skygger og egen CSS, pr. breakpoint og pr. tilstand. Valget gælder resten af sessionen. En sektion med Width og Per screen size viser bredde og kolonner der som en henvisning til Content. Egen CSS under Advanced når sektionen som før. En bredde eller maksimal bredde, som sektionens egen stil satte tidligere, står der, indtil du fjerner den. Den går forud for Width.

#Bredde

Width står først under Layout på hver sektion undtagen Spacer. En Custom component har den under LAYOUT i sit eget panel, med Show on. Page text i skabelonen Text pages har Reading width i stedet, se Sideskabeloner.

• På en skærm, der er smallere end bredden, bliver indholdet skærmen minus sidemargenen: 16 px på mobil, 24 px på tablet og 32 px på computer.
• Bredden er den samme på alle skærme. På en skærm, der er 1440 px bred, ser XL, 2XL og Full ens ud.
• FAQ, Paragraph, Newsletter og Form starter på XS, Callout på S og Video på M. Et billedbanner følger stilarten: Full i Bold og Page i Classic. Andre sektioner starter på Page.
• Et billedbanner med den gamle bredde viser den i feltet: Narrow som S og Wide som 2XL. Intet skrives om.
• Har et billedbanner fået sin egen bredde, henter Follow the style (…) under knapperne stilartens bredde tilbage. En gammel bredde forsvinder også.
• Videoafspilleren fylder sektionens bredde i videoens form. Den bliver aldrig højere end 85 % af skærmen, så en bred eller stående video kan blive smallere end sektionen.
• I kategorisidens kolonne ved siden af filtrene fylder hver sektion kolonnen.

Med en sektion markeret viser arbejdsfladen en lineal og sidemargenen. Se Design og varianter.

#Pr. skærmstørrelse

Per screen size under Layout har Desktop, Tablet og Mobile ved siden af hinanden. Mobile er op til 640 px, Tablet 641–1024 px og Desktop fra 1025 px.

• En tom værdi står som auto i gråt. Kolonnerne regnes ud fra Desktop: højst 3 på tablet og 2 på mobil. Testimonials, Collection list og et produktgitter med 2 kolonner har 1 på mobil.
• En tom højde følger skærmen ved siden af: Tablet følger Desktop, og Mobile følger Tablet.
• En egen værdi er sort. × auto henter auto tilbage.
• Den sidste skærm under Show on kan ikke slås fra. Øjet i Sections skjuler sektionen på alle skærme.
• Er den første sektion skjult på en skærm, tager den næste sektion, der vises der, dens plads: ingen afstand over den, og et Full-banner ligger lige under sidehovedet.
• På hver skærm indlæses billederne i den første sektion med billeder dér først. Billeder i en sektion, der er skjult på en skærm, hentes ikke ned der.
• Et klik på Desktop, Tablet eller Mobile skifter arbejdsfladen derhen, som enhedsknapperne øverst. Kolonnen for den skærm, der vises, har en sort ramme.
• En sektion, der er skjult på den skærm, der vises, er en grå stribe på arbejdsfladen. Den kan markeres. Preview og butikken viser den ikke.

#Størrelse og form

Hver indstilling har forvalg som knapper. Custom tager en egen værdi.

En indstilling, der ikke er valgt, viser sektionens standardværdi og er mærket default ved navnet. Kommer standardværdien fra stilarten, er den mærket follows the style. Har du valgt noget andet, henter Follow the style (…) stilartens valg tilbage.

En ugyldig egen værdi ignoreres. Sektionen bruger så forvalget.

Et billedbanner med tekst har også Text align, Text position og Button style. Text align er centreret, eller venstrestillet med mørk toning fra venstre. Text position er Center, Top eller Bottom. Button style er Primary (temaets knapfarve), Light (hvid knap) eller Outline.

#Sektionen Categories

Sektionen Categories viser kategorier som felter med billede og navn, for eksempel under overskriften "Shop by category".

Hvor: Markér sektionen. Feltet Categories står under What it shows.

• Én række pr. kategori: billede, navn, ↑ ↓ og ×. Rækkernes rækkefølge er rækkefølgen i butikken.
• + Add a category… lægger kategorien sidst. Listen viser hele træet. En underkategori står med sin overordnede kategori, for eksempel "Tøj › Jakker". Valgte kategorier er mærket in the list og kan ikke vælges igen. Kategorier uden produkter i butikken er mærket no products.
• × fjerner kategorien fra sektionen og sektionens eget billede til den. ⌘Z fortryder.
• Holder du markøren over en række, får kategoriens felt på arbejdsfladen en stiplet ramme.

En tom liste er automatisk: boksen Automatic viser alle topkategorier med produkter i rækkefølgen fra Products › Categories. En kategori, hvis produkter ligger i underkategorierne, kommer med. Pick them myself gør dem til rækker, som du kan ordne og give egne billeder. Vælger du i stedet en kategori under Add a category…, viser sektionen kun den.

En kategori, der er slettet, vises som Not found med kun ×. Ændrer du en kategoris slug i admin, følger rækken med. Er ingen af de valgte kategorier tilbage, viser butikken ikke sektionen.

#Billedet i feltet

Rækken viser, hvilket billede feltet har:

• Change image åbner mediebiblioteket. Det billede, du vælger, gælder kun sektionen. Kategoriens billede ændres ikke. Har kategorien intet billede, hedder knappen Choose image.
• ↺ Use category image fjerner sektionens eget billede.
• Sektionens egne billeder ligger i udkastet og går live, når du udgiver. Kategoriens eget billede ændrer du i Products › Categories, se Kategorier. Det går live, når du gemmer, og designeren viser det, næste gang den indlæses.

#Formateret tekst

Rich text, Paragraph, teksten i Image + text og Callout, kortenes tekst i Cards og svarene i FAQ er formateret tekst. De har samme editor som produktbeskrivelsen.

• Dobbeltklik på teksten på arbejdsfladen, eller tryk Edit text i inspektøren. Editoren åbner over teksten.
• Værktøjslinjen har overskrifter, fed, kursiv, lister, links, billeder, tabeller og video. Billederne hentes fra mediebiblioteket.
• Et link går til et Product, en Page eller en Address. Et link til et produkt følger med, når produktets adresse ændres.
• Teksten gemmes, mens du skriver. Done eller Esc lukker editoren.
• Med Advanced slået til har editoren også HTML-visningen.

Tekst, der blev skrevet før editoren, vises som før. Den bliver formateret tekst, første gang du ændrer den i editoren.

#Kort

Cards viser et billede, en overskrift, tekst og links pr. kort. Brug den til spillere, medarbejdere, fordele eller spalter.

1. Tilføj Cards fra biblioteket. Sektionen kommer med tre kort.
2. Tryk Add card i inspektøren for flere. Træk i et korts række for at flytte kortet.
3. Åbn et korts række, og tryk Choose picture. Udfyld Alt text, når billedet siger noget, overskriften ikke siger.
4. Dobbeltklik på overskriften eller teksten på arbejdsfladen, og skriv. Teksten åbnes også med Edit text på kortets række.
5. Tilføj links under Links: en adresse og et mærkat pr. link, højst 6.

Kolonnerne pr. skærm står under Layout › Per screen size, som for de andre gitre.

Et link til Instagram, Facebook, TikTok, YouTube, LinkedIn eller X vises som netværkets mærke, for eksempel IG. Andre links bliver knapper med mærkatet. Et kort uden indhold vises ikke i butikken.

Sektionen Collection list findes ikke længere i biblioteket. En, der allerede ligger på en side, vises som før. Dens inspektør har Convert to Cards, der laver en Heading og Cards af de samme poster.

#FAQ

FAQ viser spørgsmål. I butikken åbner et klik på et spørgsmål svaret.

1. Tilføj FAQ fra biblioteket. Sektionen kommer med to spørgsmål.
2. Tryk Add question i inspektøren for flere. Træk i et spørgsmåls række for at flytte spørgsmålet.
3. Åbn et spørgsmåls række, og skriv spørgsmålet under Question. Du kan også dobbeltklikke på spørgsmålet på arbejdsfladen. Svaret forbliver åbent eller lukket, mens du skriver.
4. Tryk Edit answer. Svaret er formateret tekst, se Formateret tekst.

• Et spørgsmål uden tekst vises ikke i butikken.
• En FAQ, der blev skrevet med én linje pr. spørgsmål, spørgsmål | svar, vises som før. Inspektøren viser spørgsmålene, og den første ændring gemmer dem som en liste.

#Produktvisning

Product showcase viser ét produkt, eller en liste du vælger, med stort billede, pris, en kort tekst og en knap.

Den korte tekst er produktets Short description, ellers beskrivelsens første afsnit. Bjælkerne er produktets Bar-egenskaber, hver på sin skala, som på produktsiden. Et produkt uden Bar-egenskab viser sine frie attributter Speed, Spin, Control, Power, Feel og Hardness med en værdi fra 0 til 100. Se Attributter. Tom Button label giver Shop now, eller Handla nu i en svensk butik.

#Baggrund

Hver sektion har Background i fanen Content. Den lægger et farvet bånd bag sektionen.

Farverne kommer fra Theme › Colours. Båndet går altid fra kant til kant på skærmen. Sektionens indhold beholder sin bredde. To sektioner i træk med samme baggrund bliver ét bånd. En knap i butikkens primærfarve på Brand får båndets farver omvendt. En sektion, der ikke viser noget i butikken, får intet bånd.

Fanen Design viser Background: set in Content. for en sektion. En fyldfarve, der blev sat der tidligere, bliver liggende, indtil du trykker Clear the old fill.

#Sider

Fanen Pages viser butikkens sider. Skabelonerne under Templates åbnes som Home og har sektioner med lås, se Sideskabeloner. Tandhjulet på en række åbner sidens indstillinger. Menuen ⋯ har Duplicate og Delete. Hvordan du opretter en side, står under Design og varianter.

#Hvad der gemmes hvornår

• En sides sektioner ligger i temakladden og går live, når du publicerer.
• En sides indstillinger gælder i butikken, så snart du ændrer dem. Panelet viser, at de ikke er en del af kladden.
• Rækken Menu i indstillingerne ændrer menuens links. Den venter på Publish som resten af designet.

Produktsektioner på en egen side, som produktgitter, nyheder og bestsellere, viser de samme produkter som på forsiden.

#Indstillingerne

En side med sektioner, men uden indstillinger, har knappen Set up i listen. Den giver siden en adresse og en status.

Advarsel: Tidsplanen styrer, hvornår siden vises, ikke hvad den indeholder. Publicér temaet før tidspunktet. Ellers går en tom side live.

#Slet en side

Tryk Delete i menuen ⋯ og derefter den røde knap i vinduet. Enter bekræfter ikke. Sletningen fjerner siden, dens kladde og alle dens versioner.

#Egen kode pr. side

Panelet Code har sidens egen CSS, JS og <head>-kode. Panelet vises med Advanced slået til. Se Egen CSS og kode i head.