Komponenterne én for én

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

Hvor: Fanen Components i designeren. Klik på komponentens række.

#Oversigt

Product page er galleriet og købspanelet. Show bars slår bjælkerne til og fra. Hvilke egenskaber der bliver bjælker, indstilles under Products › Attributes. Hvor bjælkerne står, i købspanelet eller i en sektion for sig, indstilles på sektionen Properties. Rækkefølgen på sektionerne under købspanelet indstilles under Pages › Product page, se Sideskabeloner. Panelet har et link dertil.

• Uden nogen egenskab, der vises som Bar, og uden produkter med frie attributter som Speed eller Control, er valget dæmpet med No property is shown as Bar yet.
• Er valget slået fra, vises Bar-egenskaberne som rækker i Details.

Menu label findes kun med layoutet Icons + panel. Orders link har ingen effekt i butikken endnu, fordi kundekonti ikke er tilgængelige.

Cart under Content på Header vælger, om kurvikonet åbner kurvsiden eller et panel. Se Kassen set fra kunden.

#Logo og favicon

Felterne ligger under Content på Header.

1. Tryk Choose image under Logo. Mediebiblioteket åbnes.
2. Vælg billedet.
3. Vælg højde: 24, 32, 40, 48 eller 56 px. Bredden følger billedet.

På en smal mobil skrumper logoet, når rækken ikke er bred nok, så ikonerne og menuknappen altid vises.

Med Transparent over hero slået til vises feltet Light logo, med linjen Shown over the hero. Det logo bruges, mens sidehovedet ligger over hero-billedet. Det bruges også i sidefoden.

Favicon er billedet i browserfanen. Brug en kvadratisk PNG eller SVG på mindst 64 px. Det vises, når temaet publiceres.

App icon under Favicon er ikonet på mobilens hjemmeskærm, når en kunde lægger butikken der. Billedet skal være kvadratisk og mindst 512 × 512 px. Andre billeder bliver ikke taget imod. Når du klikker i feltet, viser arbejdsfladen tilstanden Home screen. Se Butikken som app.

#Tagline og copyright

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

• Taglinen vises under logoet i brandkolonnen. Slå Brand column til for at vise den.
• Copyrightlinjen vises nederst i sidefoden på hver side. Et tomt felt viser intet.

Begge gemmes på temaet, fortrydes med ⌘Z og går live, når du publicerer.

#Annoncelinjen

1. Slå Announcement bar til under Options på Header.
2. Skriv teksten i feltet under Content. Tilføj et link, hvis du vil.
3. Tryk Put these words on the live shop.

Linjen viser præcis det, du skriver. Et tomt felt viser ingen linje.

Bemærk: Teksten gemmes på butikken, ikke i temakladden. Den vises på live-butikken, når du trykker på knappen. At slå linjen til eller fra er en temaindstilling og vises først, når du publicerer.

#Bredde på sidehoved og sidefod

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

• Page lægger logo, links og ikoner på linje med sidens indhold, på sidebredden fra Theme › Layout.
• Full lader rækken gå ud til sidemargenen, på linje med sektioner på Full.

Rækken med fortrydelseslinket under en egen sidefod følger sidefodens bredde. Annoncelinjen går altid kant i kant.

#Gennemsigtigt sidehoved

Transparent over hero gør sidehovedet gennemsigtigt på forsiden, over et billedbanner i fuld bredde.

• Valget er dæmpet med Add a full-width image banner first on Home, indtil forsiden starter med sådan et banner.
• Et valg, der er slået til, kan altid slås fra.
• Efter 24 px scroll bliver sidehovedet solidt med temaets farver. Det bliver også solidt, mens menupanelet er åbent.
• Andre sider har altid solidt sidehoved.

Mens sidehovedet er gennemsigtigt, har tekst og ikoner farven Header text over hero under Theme › Colours. Standard er hvid. Det lyse logo vises. Tilstandene har egne kroge i CSS, se Kroge og CSS-reference.

#Menupanelet

Menupanelet åbnes fra sidehovedlayoutet Icons + panel.

• Står sidehovedet på et andet layout, viser designeren panelet alligevel. Panelet viser, at besøgende ikke når det, før du skifter layout.
• En egen stilart på Menu panel gælder panelet under Icons + panel og under et eget sidehoved. Den gælder også mobilmenuen, som de andre layouts åbner.
• Under et eget sidehoved har standardpanelet altid en knap til at lukke det. Escape lukker det også.

#Links, products, contact

Panelet lægger sig over siden under sidehovedet. De store links står til venstre med en pil, de små links under dem. Til højre vises produktkort og nederst kontaktlinjen.

• Hviler kunden markøren på et kategorilink, eller når det med tastaturet, skiftes kortene ud med kategoriens produkter. Udvalgte produkter kommer først, derefter kategoriens egen rækkefølge. Underkategoriernes produkter tælles med.
• Andre links viser standardkortene: de udvalgte produkter i den rækkefølge, de har i butikken. Et lille link gør det kun under markøren, så Tab kan gå videre fra en kategori til dens kort.
• Med tastaturet er de store links ét stop, og piletasterne flytter mellem dem. Panelet lukkes, når fokus forlader sidehovedet.
• Kortene er butikkens produktkort og viser prisen i kundens valuta.
• Computeren viser 3 kort og tabletten 2. Mobilen viser kun linksene, uden kort og kontaktlinje.
• På en berøringsskærm åbner et tryk linket med det samme.
• Søgeikonet åbner søgefeltet over siden. Panelet har ikke sit eget søgefelt.

Products beside the links og Contact bar under Options slår kortene og kontaktlinjen til. Kortene hentes først, når kunden går mod menuknappen, så siderne indlæses ikke langsommere. På mobil hentes de slet ikke.

#Linksene

Menuens links vælges kun i listen Links under Content på Menu panel. Listen gælder alle udseender og sidehoveder.

1. Åbn et link i listen.
2. Vælg, hvor det går hen, under Links to: Category, Page eller Address.
3. Skriv en egen tekst under Label, hvis du vil. Et tomt felt betyder kategoriens eller sidens eget navn.
4. Vælg Big eller Small under Size.

• Træk rækkerne for at ændre rækkefølgen, eller brug ↑ og ↓.
• Med Shop + information bliver de store links Shop-kolonnen og de små Information-kolonnen.
• Når du har ændret listen, fylder den også linkrækken i sidehovedet og mobilmenuen.
• Not in the menu viser kategorier med produkter og live-sider, som ikke findes i listen. Nye kategorier og sider tilføjes ikke af sig selv.
• Reset to automatic links giver de automatiske links tilbage: Alle produkter, de fire første kategorier og siderne.
• Et link til en side, der ikke er live, vises ikke i butikken. På arbejdsfladen er det markeret, for eksempel Draft. Publish siger til om sådan et link.
• En butik med mere end ét sprog får valget Languages på hvert link.

Peger du på en række, eller har du den åben, viser arbejdsfladen linket som aktivt med sine produkter. En sides indstillinger viser, om siden findes i menuen, se Sektioner og sider. Admin › Pages viser pladsen på sidens række også, se Sider og juridiske tekster.

Bemærk: Listen gemmes i temaet og venter på Publish som resten af designet. Den bliver liggende, når du skifter stilart eller trykker Reset to.

#Overskriften over produkterne

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 peger på en kategori. Feltet vises med Links, products, contact og Products beside the links slået til. Overskriften venter på Publish.

#Kontaktoplysninger og sociale links

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

På Menu panel ligger formularen foldet sammen, markeret Straight to the live shop. Tryk Put these on the live shop. Oplysningerne gemmes på butikken, ikke i temakladden, og vises på live-butikken med det samme. Arbejdsfladen viser det, du skriver, mens du skriver. Kontaktlinjen og de sociale ikoner er dæmpede, indtil oplysningerne findes.

#Bannerkomponenten

Komponenten Banners sætter standardværdien for tekstplaceringen i sidens billedbannere. Bredden står på hvert banner under Layout › Width. Et banner uden egen bredde følger stilarten: Full i Bold og Page i Classic. En sektion med egen bredde eller tekstplacering beholder den. Arbejdsfladen viser, hvor mange sådanne sektioner siden har.

#Samlingssiderne

Komponenten Collection page gælder hver kategoriside, All products (/products) og søgeresultaterne. Ét valg gælder alle siderne.

• Look: Sidebar, Row above the grid eller Hidden. Sidekolonnen har overskrifter med store bogstaver, der folder gruppen sammen, og lange lister ruller inde i gruppen. På en kategoriside er grupperne åbne fra start. På All products og i søgeresultaterne er kun Category åben.
• Filters stay in view er slået til fra start. På computer bliver sidekolonnen stående 16 px under sidehovedet og rækken lige under sidehovedet, mens kunden ruller. Rækken bliver kun stående, så længe filtrene kan være på én linje. Knappen Ryd filtre tæller ikke. Mens et filter er åbent, flytter et flueben ikke rækken. Rækken måles igen, når filteret lukkes. En række, der brydes til to linjer, ruller med siden. Valget findes ikke med Hidden.
• Columns per screen size vælger antallet af kolonner i produktgitteret på Desktop, Tablet og Mobile, i samme tabel som en sektions Per screen size. Desktop har stilens antal fra start, 4 i de fleste stilarter og 3 i Boutique. Tablet og Mobile står på auto og regnes ud fra Desktop: 4 giver 3 og 2, 3 giver 3 og 2. Gitteret i skabelonen Collection pages følger valget.

På telefon og tablet, op til 1024 px, bliver filtrene en smal række: "Filters (2) · Sort" på engelsk, "Filter (2) · Sortera" på svensk. Med Filters stay in view følger rækken med under sidehovedet. Rækken åbner et panel fra venstre. Hvert flueben filtrerer med det samme. Show 7 products lukker panelet, og Clear rydder valgene. Med Hidden viser rækken kun Sort. Med Sort control også slået fra viser den kun antallet af produkter, som på computer. Panelet lukker, når vinduet bliver bredere end 1024 px.

Hvilke filtre en side viser, og i hvilken rækkefølge, vælges per kategori. Linket Products › Categories nederst i panelet går derhen. Se Kategorier.

Preview with over arbejdsfladen vælger, hvad arbejdsfladen viser: én kategori med dens produkter, filtre og beskrivelse, All products eller søgeresultater for et ord. Fra start vises kategorien med flest filtre. Listen viser antallet af filtre per kategori. Filtrene og sorteringen virker her. Andre klik er slået fra. Skabelonen Collection pages bruger samme liste, se Sideskabeloner.