Komponentene én for én

Designeren har 8 komponenter. Du endrer dem i komponentpanelet, se Komponentpanelet.

Hvor: Fanen Components i designeren. Klikk på komponentens rad.

#Oversikt

Product page er galleriet og kjøpspanelet. Show bars slår stolpene av og på. Hvilke egenskaper som blir stolper, stilles inn under Products › Attributes. Hvor stolpene står, i kjøpspanelet eller i en egen seksjon, stilles inn på seksjonen Properties. Rekkefølgen på seksjonene under kjøpspanelet stilles inn under Pages › Product page, se Sidemaler. Panelet har en lenke dit.

• Uten noen egenskap som vises som Bar, og uten produkter med frie attributter som Speed eller Control, er valget dempet med No property is shown as Bar yet.
• Er valget av, vises Bar-egenskapene som rader i Details.

Menu label finnes bare med layouten Icons + panel. Orders link har ingen effekt i butikken ennå, fordi kundekontoer ikke er tilgjengelige.

Cart under Content på Header velger om handlekurvikonet åpner handlekurvsiden eller et panel. Se Kassen sett fra kunden.

#Logo og favicon

Feltene ligger under Content på Header.

1. Trykk Choose image under Logo. Mediebiblioteket åpnes.
2. Velg bildet.
3. Velg høyde: 24, 32, 40, 48 eller 56 px. Bredden følger bildet.

På en smal mobil krymper logoen når raden ikke rekker til, så ikonene og menyknappen alltid vises.

Med Transparent over hero på vises feltet Light logo, med linjen Shown over the hero. Den logoen brukes mens toppteksten ligger over hero-bildet. Den brukes også i bunnteksten.

Favicon er bildet i nettleserfanen. Bruk en kvadratisk PNG eller SVG på minst 64 px. Den vises når temaet publiseres.

App icon under Favicon er ikonet på mobilens hjemskjerm når en kunde legger butikken der. Bildet må være kvadratisk og minst 512 × 512 px. Andre bilder blir ikke tatt imot. Når du klikker i feltet, viser arbeidsflaten tilstanden Home screen. Se Butikken som app.

#Tagline og copyright

Feltene Tagline og Copyright line ligger under Content på Footer.

• Taglinen vises under logoen i merkevarekolonnen. Slå på Brand column for å vise den.
• Copyrightlinjen vises nederst i bunnteksten på hver side. Et tomt felt viser ingenting.

Begge lagres på temaet, angres med ⌘Z og går live når du publiserer.

#Annonselinjen

1. Slå på Announcement bar under Options på Header.
2. Skriv teksten i feltet under Content. Legg til en lenke hvis du vil.
3. Trykk Put these words on the live shop.

Linjen viser nøyaktig det du skriver. Et tomt felt viser ingen linje.

Merk: Teksten lagres på butikken, ikke i temautkastet. Den vises på live-butikken når du trykker knappen. Å slå linjen på eller av er en temainnstilling og vises først når du publiserer.

#Bredde på topptekst og bunntekst

Width står først under Options på Header og på Footer.

• Page legger logo, lenker og ikoner på linje med sidens innhold, på sidebredden fra Theme › Layout.
• Full lar raden gå ut til sidemargen, på linje med seksjoner på Full.

Raden med angrerettlenken under en egen bunntekst følger bunntekstens bredde. Annonselinjen går alltid kant i kant.

#Gjennomsiktig topptekst

Transparent over hero gjør toppteksten gjennomsiktig på forsiden, over et bildebanner i full bredde.

• Valget er dempet med Add a full-width image banner first on Home til forsiden starter med et slikt banner.
• Et valg som er på, kan alltid slås av.
• Etter 24 px scroll blir toppteksten solid med temaets farger. Den blir også solid mens menypanelet er åpent.
• Andre sider har alltid solid topptekst.

Mens toppteksten er gjennomsiktig, har tekst og ikoner fargen Header text over hero under Theme › Colours. Standard er hvit. Den lyse logoen vises. Tilstandene har egne kroker i CSS, se Kroker og CSS-referanse.

#Menypanelet

Menypanelet åpnes fra topptekstlayouten Icons + panel.

• Står toppteksten på en annen layout, viser designeren panelet likevel. Panelet viser at besøkende ikke når det før du bytter layout.
• En egen stil på Menu panel gjelder panelet under Icons + panel og under en egen topptekst. Den gjelder også mobilmenyen som de andre layoutene åpner.
• Under en egen topptekst har standardpanelet alltid en knapp for å lukke det. Escape lukker det også.

#Links, products, contact

Panelet legger seg over siden under toppteksten. De store lenkene står til venstre med en pil, de små lenkene under dem. Til høyre vises produktkort og nederst kontaktlinjen.

• Hviler kunden pekeren på en kategorilenke, eller når den med tastaturet, byttes kortene mot kategoriens produkter. Utvalgte produkter kommer først, så kategoriens egen rekkefølge. Underkategorienes produkter regnes med.
• Andre lenker viser standardkortene: de utvalgte produktene i den rekkefølgen de har i butikken. En liten lenke gjør det bare under pekeren, slik at Tab kan gå videre fra en kategori til kortene dens.
• Med tastaturet er de store lenkene ett stopp, og piltastene flytter mellom dem. Panelet lukkes når fokus forlater toppteksten.
• Kortene er butikkens produktkort og viser prisen i kundens valuta.
• Datamaskinen viser 3 kort og nettbrettet 2. Mobilen viser bare lenkene, uten kort og kontaktlinje.
• På en berøringsskjerm åpner et trykk lenken med en gang.
• Søkeikonet åpner søkefeltet over siden. Panelet har ikke eget søkefelt.

Products beside the links og Contact bar under Options slår på kortene og kontaktlinjen. Kortene hentes først når kunden går mot menyknappen, så sidene laster ikke tregere. På mobil hentes de ikke i det hele tatt.

#Lenkene

Menyens lenker velges bare i listen Links under Content på Menu panel. Listen gjelder alle utseender og topptekster.

1. Åpne en lenke i listen.
2. Velg hvor den går under Links to: Category, Page eller Address.
3. Skriv en egen tekst under Label om du vil. Et tomt felt betyr kategoriens eller sidens eget navn.
4. Velg Big eller Small under Size.

• Dra radene for å endre rekkefølgen, eller bruk ↑ og ↓.
• Med Shop + information blir de store lenkene Shop-kolonnen og de små Information-kolonnen.
• Når du har endret listen, fyller den også lenkeraden i toppteksten og mobilmenyen.
• Not in the menu viser kategorier med produkter og live-sider som ikke finnes i listen. Nye kategorier og sider legges ikke til av seg selv.
• Reset to automatic links gir tilbake de automatiske lenkene: Alle produkter, de fire første kategoriene og sidene.
• En lenke til en side som ikke er live, vises ikke i butikken. På arbeidsflaten er den merket, for eksempel Draft. Publish sier fra om en slik lenke.
• En butikk med flere enn ett språk får valget Languages på hver lenke.

Peker du på en rad, eller har den åpen, viser arbeidsflaten lenken som aktiv med produktene sine. En sides innstillinger viser om siden finnes i menyen, se Seksjoner og sider. Admin › Pages viser plassen på sidens rad også, se Sider og juridiske tekster.

Merk: Listen lagres i temaet og venter på Publish, som resten av designet. Den blir liggende når du bytter stil eller trykker Reset to.

#Overskriften over produktene

Feltet Heading over the products ligger under listen. Et tomt felt viser ingen overskrift. Har feltet en tekst, står kategoriens navn i stedet mens kunden peker på en kategori. Feltet vises med Links, products, contact og Products beside the links på. Overskriften venter på Publish.

#Kontaktopplysninger og sosiale lenker

Skjemaet Contact and social ligger under Content på Menu panel og Footer.

På Menu panel ligger skjemaet sammenfoldet, merket Straight to the live shop. Trykk Put these on the live shop. Opplysningene lagres på butikken, ikke i temautkastet, og vises på live-butikken med en gang. Arbeidsflaten viser det du skriver mens du skriver. Kontaktlinjen og de sosiale ikonene er dempet til opplysningene finnes.

#Bannerkomponenten

Komponenten Banners setter standardverdien for tekstplasseringen i sidens bildebannere. Bredden står på hvert banner under Layout › Width. Et banner uten egen bredde følger stilen: Full i Bold og Page i Classic. En seksjon med egen bredde eller tekstplassering beholder den. Arbeidsflaten viser hvor mange slike seksjoner siden har.

#Samlingssidene

Komponenten Collection page gjelder hver kategoriside, All products (/products) og søkeresultatene. Ett valg gjelder alle sidene.

• Look: Sidebar, Row above the grid eller Hidden. Sidekolonnen har overskrifter med store bokstaver som folder sammen gruppen, og lange lister ruller inne i gruppen. På en kategoriside er gruppene åpne fra start. På All products og i søkeresultatene er bare Category åpen.
• Filters stay in view er på fra start. På datamaskin blir sidekolonnen stående 16 px under toppteksten og raden rett under toppteksten mens kunden ruller. Raden blir bare stående så lenge filtrene får plass på én linje. Knappen Nullstill filtre teller ikke. Mens et filter er åpent, flytter en hake ikke raden. Raden måles igjen når filteret lukkes. En rad som brytes til to linjer, ruller med siden. Valget finnes ikke med Hidden.
• Columns per screen size velger antall kolonner i produktrutenettet på Desktop, Tablet og Mobile, i samme tabell som en seksjons Per screen size. Desktop har stilens antall fra start, 4 i de fleste stiler og 3 i Boutique. Tablet og Mobile står på auto og regnes ut fra Desktop: 4 gir 3 og 2, 3 gir 3 og 2. Rutenettet i malen Collection pages følger valget.

På telefon og nettbrett, opptil 1024 px, blir filtrene en smal rad: "Filters (2) · Sort" på engelsk, "Filter (2) · Sortera" på svensk. Med Filters stay in view følger raden med under toppteksten. Raden åpner et panel fra venstre. Hvert kryss filtrerer med en gang. Show 7 products lukker panelet, og Clear tømmer valgene. Med Hidden viser raden bare Sort. Med Sort control også av viser den bare antallet produkter, som på datamaskin. Panelet lukkes når vinduet blir bredere enn 1024 px.

Hvilke filtre en side viser, og i hvilken rekkefølge, velges per kategori. Lenken Products › Categories nederst i panelet går dit. Se Kategorier.

Preview with over arbeidsflaten velger hva arbeidsflaten viser: én kategori med produktene, filtrene og beskrivelsen sin, All products eller søkeresultater for et ord. Fra start vises kategorien med flest filtre. Listen viser antall filtre per kategori. Filtrene og sorteringen virker her. Andre klikk er slått av. Malen Collection pages bruker samme liste, se Sidemaler.