Butikker
Seksjoner og sider
Bygg en side av seksjoner: legg til, flytt, kopier og slett, inspektøren, bredde og skjermstørrelser, størrelse og form, og sidenes innstillinger.
En side består av seksjoner, for eksempel en hero eller en produktrad.
Hvor: Fanen Sections og fanen Pages i designeren.
Legg til en seksjon
Tre veier åpner samme bibliotek:
- Add section i seksjonslisten, eller fanen Library. Seksjonen havner etter den markerte seksjonen og blir markert. Uten markering havner den sist.
- Mellom to seksjoner på arbeidsflaten. Hold pekeren mellom to seksjoner. En linje med et pluss vises. Klikk på plusset. Biblioteket viser hvor seksjonen havner, for eksempel "Lands between Hero and Product grid".
- ⌘K › Add a section to this page.
Biblioteket har et søkefelt og kategorier. En mal med flere seksjoner legges inn hel, i sin rekkefølge, på stedet du valgte.
En ny seksjon eller mal har eksempeltekst på butikkens språk: svensk når butikkens språk er svensk, ellers engelsk. Eksempelteksten lover ingenting om frakt, retur eller betaling. Skriv inn dine egne vilkår. Video og sosiale lenker er tomme til du legger inn dine egne adresser.
Bilder velger du med Choose image, som åpner mediebiblioteket. Du kan også lime inn en adresse.
Flytt, kopier og slett
- Dra en rad i listen under fanen Sections for å flytte seksjonen. Det går bare å dra der. På arbeidsflaten har den markerte seksjonen knappene ▲ ▼ Dup Del.
- ⋯ Actions på den markerte raden åpner seksjonens meny. Høyreklikk på en rad åpner samme meny. Raden har ellers bare merket ON/OFF.
- Delete i menyen fjerner seksjonen. Varselet viser hva som ble fjernet, for eksempel "Removed Hero", og har knappen Undo. Delete-tasten gjør det samme. Tilbaketasten gjør det ikke.
- Hver rad heter som seksjonens overskrift, etikett eller første tekstlinje.
Menyen, ovenfra og ned:
| Valg | Hva | Tast |
|---|---|---|
| Copy, Cut, Paste | Hele seksjonen, innhold og utseende, til utklippstavlen og tilbake. Paste legger kopien etter den markerte seksjonen, ellers sist. Paste er dempet til noe er kopiert | ⌘C · ⌘X · ⌘V |
| Copy styles, Paste styles | Bare utseendet: fanen Design, tilstander, egen CSS, klasser og animasjon. Teksten i seksjonen endres ikke | ⌘⌥C · ⌘⌥V |
| Duplicate | Kopierer seksjonen. Kopien legges etter originalen og blir markert | ⌘D |
| Move up, Move down | Flytter seksjonen ett steg. Dempet når seksjonen allerede ligger først eller sist | ⌥↑ · ⌥↓ |
| Hide, Show | Skjuler seksjonen i butikken. Den står igjen i listen. Det samme som merket ON/OFF | |
| Edit styles | Markerer seksjonen og åpner inspektøren | |
| Edit code | Bare med Advanced på. Med Open the deep inspector valgt åpnes boksen ADVANCED · CUSTOM CSS under fanen Design | |
| Delete | Fjerner seksjonen. Undo finnes i varselet | Delete |
En side uten seksjoner vises tom i designeren med en tekst om at den er tom. Butikken viser da en standardside.
Inspektøren
Et klikk på en seksjon åpner Content først: overskrift, tekst, bilde og knappens etikett. Et dobbeltklikk på en tekst redigerer den på arbeidsflaten. ⏎ lagrer og Esc angrer. Et dobbeltklikk på formatert tekst åpner tekstredigereren i stedet, se Formatert tekst.
En seksjon med mange innstillinger har fire grupper:
| Gruppe | Innhold |
|---|---|
| Words & pictures | Det kunden leser og klikker på: overskrift, tekst, bilde, knappens etikett og lenke |
| What it shows | Hvilke poster seksjonen henter: alle, utvalgte, bestselgere eller håndplukkede produkter, sortering og antall |
| Layout | Bredde, Per screen size (kolonner, høyde og skjermene seksjonen vises på), bildeform, tilpasning og avstand |
| Look | Knappestil, hjørner, tone og Background |
En seksjon med få innstillinger viser en liste uten grupper. Forklaringer står på en linje under kontrollen.
Open the deep inspector viser fanen Design: farger, marger, typografi, kanter, skygger og egen CSS, per bruddpunkt og per tilstand. Valget gjelder resten av økten. En seksjon med Width og Per screen size viser bredde og kolonner der som en henvisning til Content. Egen CSS under Advanced når seksjonen som før. En bredde eller maksbredde som seksjonens egen stil satte tidligere, står der til du fjerner den. Den går foran Width.
Bredde
Width står først under Layout på hver seksjon unntatt Spacer. En Custom component har den under LAYOUT i sitt eget panel, med Show on. Page text i malen Text pages har Reading width i stedet, se Sidemaler.
| Valg | Innholdets bredde |
|---|---|
| Page | Sidebredden fra Theme › Layout. Chipen viser den, for eksempel = 1024 |
| XS, S, M, L, XL, 2XL | 640, 768, 1024, 1280, 1440 og 1536 px |
| Full | Hele skjermen. Boksen går kant i kant, og innholdet slutter ved sidemargen, uten øvre grense |
| Custom | Egen bredde i px eller rem, for eksempel 1100px. Én rem er temaets Base size, 16 px hvis du ikke har endret den |
- På en skjerm smalere enn bredden blir innholdet skjermen minus sidemargen: 16 px på mobil, 24 px på nettbrett og 32 px på datamaskin.
- Bredden er den samme på alle skjermer. På en skjerm som er 1440 px bred, ser XL, 2XL og Full like ut.
- FAQ, Paragraph, Newsletter og Form starter på XS, Callout på S og Video på M. Et bildebanner følger stilen: Full i Bold og Page i Classic. Andre seksjoner starter på Page.
- Et bildebanner med den gamle bredden viser den i feltet: Narrow som S og Wide som 2XL. Ingenting skrives om.
- Har et bildebanner fått en egen bredde, tar Follow the style (…) under knappene tilbake stilens bredde. En gammel bredde forsvinner også.
- Videospilleren fyller seksjonens bredde i videoens form. Den blir aldri høyere enn 85 % av skjermen, så en bred eller stående video kan bli smalere enn seksjonen.
- I kategorisidens kolonne ved siden av filtrene fyller hver seksjon kolonnen.
Med en seksjon markert viser arbeidsflaten en linjal og sidemargen. Se Design og varianter.
Per skjermstørrelse
Per screen size under Layout har Desktop, Tablet og Mobile ved siden av hverandre. Mobile er opptil 640 px, Tablet 641–1024 px og Desktop fra 1025 px.
| Rad | Seksjoner | Hva |
|---|---|---|
| Columns | Product grid, Categories, Cards, Gallery, Testimonials, Stats, Collection list, Recently viewed | Antall kolonner, med − og +. Product grid, Categories og Recently viewed har 2–6 på datamaskin og Cards 1–6, alle har 1–4 på nettbrett (Testimonials 1–3) og 1–2 på mobil. Recently viewed starter på 6. Cards i Rows har ingen rad for Columns |
| Height | Image banner | XS, S, M, L, XL, Screen eller egen verdi. For eksempel Screen på datamaskin og L på mobil |
| Show on | Alle seksjoner unntatt en mals låste | Om seksjonen vises på skjermen |
- En tom verdi står som auto i grått. Kolonnene regnes ut fra Desktop: høyst 3 på nettbrett og 2 på mobil. Testimonials, Collection list og et produktrutenett med 2 kolonner har 1 på mobil.
- En tom høyde følger skjermen ved siden av: Tablet følger Desktop, og Mobile følger Tablet.
- En egen verdi er svart. × auto tar tilbake auto.
- Den siste skjermen under Show on kan ikke slås av. Øyet i Sections skjuler seksjonen på alle skjermer.
- Er den første seksjonen skjult på en skjerm, tar den neste seksjonen som vises der, plassen dens: ingen avstand over, og et Full-banner ligger rett under toppteksten.
- På hver skjerm lastes bildene i den første seksjonen med bilder der først. Bilder i en seksjon som er skjult på en skjerm, lastes ikke ned der.
- Et klikk på Desktop, Tablet eller Mobile bytter arbeidsflaten dit, som enhetsknappene øverst. Kolonnen for skjermen som vises, har en svart ramme.
- En seksjon som er skjult på skjermen som vises, er en grå stripe på arbeidsflaten. Den kan markeres. Preview og butikken viser den ikke.
Størrelse og form
Hver innstilling har forhåndsvalg som knapper. Custom tar en egen verdi.
En innstilling som ikke er valgt, viser seksjonens standardverdi og er merket default ved navnet. Kommer standardverdien fra stilen, er den merket follows the style. Har du valgt noe annet, tar Follow the style (…) tilbake stilens valg.
| Innstilling | Seksjoner | Valg |
|---|---|---|
| Bildeform | Bilde + tekst, galleri, kategorier, produktrutenett | Natural, 1:1, 3:4, 2:3, 4:3, 16:9, 21:9, Circle eller eget forhold, for eksempel 5/7 |
| Tilpasning | Bilder | Cover fyller formen og beskjærer. Contain viser hele bildet. Fokus velger hvilken del som vises |
| Hjørner | Bilder | None, Soft eller Round |
| Bilde + tekst | Bilde + tekst | Bildets side, kolonnefordeling (⅓, ⅖, ½, ⅗, ⅔), bildets høyde og tekstens plassering |
| Galleri | Galleri | Avstanden mellom bildene. Kolonnene står under Per screen size |
| Mellomrom | Spacer | Egen verdi |
En ugyldig egen verdi ignoreres. Seksjonen bruker da forhåndsvalget.
Et bildebanner med tekst har også Text align, Text position og Button style. Text align er sentrert, eller venstrestilt med mørk toning fra venstre. Text position er Center, Top eller Bottom. Button style er Primary (temaets knappefarge), Light (hvit knapp) eller Outline.
Seksjonen Categories
Seksjonen Categories viser kategorier som ruter med bilde og navn, for eksempel under overskriften "Shop by category".
Hvor: Marker seksjonen. Feltet Categories står under What it shows.
- Én rad per kategori: bilde, navn, ↑ ↓ og ×. Radenes rekkefølge er rekkefølgen i butikken.
- + Add a category… legger kategorien sist. Listen viser hele treet. En underkategori står med sin overordnede kategori, for eksempel "Klær › Jakker". Valgte kategorier er merket in the list og kan ikke velges igjen. Kategorier uten produkter i butikken er merket no products.
- × fjerner kategorien fra seksjonen, og seksjonens eget bilde for den. ⌘Z angrer.
- Holder du pekeren over en rad, får kategoriens rute på arbeidsflaten en stiplet ramme.
En tom liste er automatisk: boksen Automatic viser alle toppkategorier med produkter, i rekkefølgen fra Products › Categories. En kategori der produktene ligger i underkategoriene, er med. Pick them myself gjør dem til rader du kan sortere og gi egne bilder. Velger du i stedet en kategori under Add a category…, viser seksjonen bare den.
En kategori som er slettet, vises som Not found med bare ×. Endrer du en kategoris slug i admin, følger raden med. Finnes ingen av de valgte kategoriene lenger, viser ikke butikken seksjonen.
Bildet i ruten
Raden viser hvilket bilde ruten har:
| Merke | Betyr |
|---|---|
| Category image | Kategoriens eget bilde fra Products › Categories. Det vises i alle seksjoner og når kategorisiden deles |
| Own image · This section only | Et bilde bare denne seksjonen viser for kategorien. Miniatyren har svart ramme |
| No image · shows as a text tile | Kategorien har ikke noe bilde. Ruten viser navnet |
- Change image åpner mediebiblioteket. Bildet du velger, gjelder bare seksjonen. Kategoriens bilde endres ikke. Har kategorien ikke noe bilde, heter knappen Choose image.
- ↺ Use category image fjerner seksjonens eget bilde.
- Seksjonens egne bilder ligger i utkastet og går live når du publiserer. Kategoriens eget bilde endrer du i Products › Categories, se Kategorier. Det går live når du lagrer, og designeren viser det neste gang den lastes.
Formatert tekst
Rich text, Paragraph, teksten i Image + text og Callout, kortenes tekst i Cards og svarene i FAQ er formatert tekst. De har samme redigerer som produktbeskrivelsen.
- Dobbeltklikk på teksten på arbeidsflaten, eller trykk Edit text i inspektøren. Redigereren åpnes over teksten.
- Verktøylinjen har overskrifter, fet, kursiv, lister, lenker, bilder, tabeller og video. Bildene hentes fra mediebiblioteket.
- En lenke går til et Product, en Page eller en Address. En lenke til et produkt følger med når produktets adresse endres.
- Teksten lagres mens du skriver. Done eller Esc lukker redigereren.
- Med Advanced på har redigereren også HTML-visningen.
Tekst som ble skrevet før redigereren, vises som før. Den blir formatert tekst første gang du endrer den i redigereren.
Kort
Cards viser et bilde, en overskrift, tekst og lenker per kort. Bruk den til spillere, ansatte, fordeler eller spalter.
- Legg til Cards fra biblioteket. Seksjonen kommer med tre kort.
- Trykk Add card i inspektøren for flere. Dra i et korts rad for å flytte kortet.
- Åpne et korts rad og trykk Choose picture. Fyll inn Alt text når bildet sier noe overskriften ikke sier.
- Dobbeltklikk på overskriften eller teksten på arbeidsflaten og skriv. Teksten åpnes også med Edit text på kortets rad.
- Legg til lenker under Links: en adresse og en etikett per lenke, maks 6.
| Innstilling | Valg |
|---|---|
| Layout | Grid: kortene ved siden av hverandre. Rows: bildet til venstre og teksten til høyre. På mobil havner bildet øverst |
| Picture shape | Natural, 1:1, 3:4, 4:3 eller Circle |
| Text align | Left eller Center |
| Card look | Plain, Panel (en myk bakgrunn) eller Panel + line (i tillegg en linje i aksentfargen øverst) |
Kolonnene per skjerm står under Layout › Per screen size, som for de andre rutenettene.
En lenke til Instagram, Facebook, TikTok, YouTube, LinkedIn eller X vises som nettverkets merke, for eksempel IG. Andre lenker blir knapper med etiketten. Et kort uten innhold vises ikke i butikken.
Seksjonen Collection list finnes ikke lenger i biblioteket. En som allerede ligger på en side, vises som før. Inspektøren dens har Convert to Cards, som lager en Heading og Cards av de samme postene.
FAQ
FAQ viser spørsmål. I butikken åpner et klikk på et spørsmål svaret.
- Legg til FAQ fra biblioteket. Seksjonen kommer med to spørsmål.
- Trykk Add question i inspektøren for flere. Dra i et spørsmåls rad for å flytte spørsmålet.
- Åpne et spørsmåls rad og skriv spørsmålet under Question. Du kan også dobbeltklikke på spørsmålet på arbeidsflaten. Svaret forblir åpent eller lukket mens du skriver.
- Trykk Edit answer. Svaret er formatert tekst, se Formatert tekst.
- Et spørsmål uten tekst vises ikke i butikken.
- En FAQ som ble skrevet med én linje per spørsmål, spørsmål | svar, vises som før. Inspektøren viser spørsmålene, og den første endringen lagrer dem som en liste.
Produktvisning
Product showcase viser ett produkt, eller en liste du velger, med stort bilde, pris, en kort tekst og en knapp.
| Layout | Viser |
|---|---|
| One product | Bildet ved siden av navn, pris, kort tekst, stolper og knapp |
| List | Produktene under Products, i den rekkefølgen, én rad hver. Skjulte og arkiverte produkter utelates |
| Product card | Ett produkt som et vanlig produktkort. En Product showcase fra før layoutene har denne |
Den korte teksten er produktets Short description, ellers beskrivelsens første avsnitt. Stolpene er produktets Bar-egenskaper, hver på sin skala, som på produktsiden. Et produkt uten Bar-egenskap viser de frie attributtene Speed, Spin, Control, Power, Feel og Hardness med en verdi fra 0 til 100. Se Attributter. Tom Button label gir Shop now, eller Handla nu i en svensk butikk.
Bakgrunn
Hver seksjon har Background i fanen Content. Den legger et farget bånd bak seksjonen.
| Valg | Farge |
|---|---|
| Page | Ikke noe bånd. Seksjonen ligger på sidens bakgrunn |
| Light | En myk grå fra temaet, Muted hvis ikke stilen har en egen |
| Dark | Footer bg med Footer text |
| Brand | Primary med On primary |
| Custom | En egen farge. Teksten blir svart eller hvit, det som synes best. Bare med Advanced på |
Fargene kommer fra Theme › Colours. Båndet går alltid fra kant til kant på skjermen. Seksjonens innhold beholder bredden sin. To seksjoner etter hverandre med samme bakgrunn blir ett bånd. En knapp i butikkens hovedfarge på Brand får båndets farger omvendt. En seksjon som ikke viser noe i butikken, får ikke noe bånd.
Fanen Design viser Background: set in Content. for en seksjon. En fyll som ble satt der tidligere, blir liggende til du trykker Clear the old fill.
Sider
Fanen Pages viser butikkens sider. Malene under Templates åpnes som Home og har seksjoner med lås, se Sidemaler. Tannhjulet på en rad åpner sidens innstillinger. Menyen ⋯ har Duplicate og Delete. Hvordan du oppretter en side, står under Design og varianter.
Hva som lagres når
- En sides seksjoner ligger i temautkastet og går live når du publiserer.
- En sides innstillinger gjelder i butikken så snart du endrer dem. Panelet viser at de ikke er en del av utkastet.
- Raden Menu i innstillingene endrer menyens lenker. Den venter på Publish, som resten av designet.
Produktseksjoner på en egen side, som produktrutenett, nyheter og bestselgere, viser de samme produktene som på forsiden.
Innstillingene
| Felt | Hva |
|---|---|
| Title | Sidens navn |
| Address | Sidens adresse, for eksempel /about-us |
| Status | DRAFT, LIVE, PRIVATE eller SCHEDULED |
| Header, Footer | Om siden viser butikkens topptekst og bunntekst |
| Menu | Om siden finnes i menyen, og hvor. Add to menu legger den til sist blant de store lenkene, Remove from menu tar den bort. Rekkefølgen endrer du under Menu panel › Links |
| Title, Description, OG image, Canonical, Index | Det søkemotorer og sosiale medier leser. Under Search & social |
| Go live at | Når en planlagt side blir synlig, i svensk tid. Kontrolleres hvert 5. minutt |
En side med seksjoner, men uten innstillinger, har knappen Set up i listen. Den gir siden en adresse og en status.
Advarsel: Tidsplanen styrer når siden vises, ikke hva den inneholder. Publiser temaet før tidspunktet. Ellers går en tom side live.
Slett en side
Trykk Delete i menyen ⋯ og deretter den røde knappen i vinduet. Enter bekrefter ikke. Slettingen fjerner siden, utkastet og alle versjonene.
Egen kode per side
Panelet Code har sidens egen CSS, JS og <head>-kode. Panelet vises med Advanced på. Se Egen CSS og kode i head.