Komponenterna en och en

Designern har 8 komponenter. Du ändrar dem i komponentpanelen, se Komponentpanelen.

Var: Fliken Components i designern. Klicka på komponentens rad.

#Översikt

Product page är galleriet och köppanelen. Show bars slår på och av staplarna. Vilka egenskaper som blir staplar ställs in under Products › Attributes. Var staplarna står, i köppanelen eller i en egen sektion, ställs in på sektionen Properties. Ordningen på sektionerna under köppanelen ställs in under Pages › Product page, se Sidmallar. Panelen har en länk dit.

• Utan någon egenskap som visas som Bar, och utan produkter med fria attribut som Speed eller Control, är alternativet dämpat med No property is shown as Bar yet.
• Är alternativet av visas Bar-egenskaperna som rader i Detaljer.

Menu label finns bara med layouten Icons + panel. Orders link har ingen effekt i butiken än, eftersom kundkonton inte är tillgängliga.

Cart under Content på Header väljer om varukorgsikonen öppnar varukorgssidan eller en panel. Se Kassan sedd från kunden.

#Logotyp och favicon

Fälten ligger under Content på Header.

1. Tryck Choose image under Logo. Mediabiblioteket öppnas.
2. Välj bilden.
3. Välj höjd: 24, 32, 40, 48 eller 56 px. Bredden följer bilden.

På en smal mobil krymper logotypen när raden inte räcker till, så att ikonerna och menyknappen alltid syns.

Med Transparent over hero på visas fältet Light logo, med raden Shown over the hero. Butiken visar den logotypen medan sidhuvudet ligger över hero-bilden, och i sidfoten.

Favicon är bilden i webbläsarfliken. Använd en kvadratisk PNG eller SVG på minst 64 px. Den syns när du publicerar temat.

App icon under Favicon är ikonen på mobilens hemskärm när en kund lägger butiken där. Bilden ska vara kvadratisk och minst 512 × 512 px. Andra bilder tas inte emot. När du klickar i fältet visar arbetsytan läget Home screen. Se Butiken som app.

#Tagline och copyright

Fälten Tagline och Copyright line ligger under Content på Footer.

• Taglinen visas under logotypen i varumärkeskolumnen. Slå på Brand column för att visa den.
• Copyrightraden visas nederst i sidfoten på varje sida. Ett tomt fält visar ingenting.

Båda sparas i temat, ångras med ⌘Z och går live när du publicerar.

#Annonsraden

1. Slå på Announcement bar under Options på Header.
2. Skriv texten i fältet under Content. Lägg till en länk om du vill.
3. Tryck Put these words on the live shop.

Raden visar exakt det du skriver. Ett tomt fält visar ingen rad.

Obs: Texten sparas i butiken, inte i temautkastet. Den syns på live-butiken när du trycker knappen. Att slå på eller av raden är en temainställning och syns först när du publicerar.

#Bredd på sidhuvud och sidfot

Width står först under Options på Header och på Footer.

• Page lägger logotyp, länkar och ikoner i linje med sidans innehåll, på sidbredden från Theme › Layout.
• Full låter raden gå ut till sidomarginalen, i linje med sektioner på Full.

Raden med ångerrättslänken under en egen sidfot följer sidfotens bredd. Annonsraden går alltid kant i kant.

#Genomskinligt sidhuvud

Transparent over hero gör sidhuvudet genomskinligt på startsidan, över en bildbanner i full bredd.

• Alternativet är dämpat med Add a full-width image banner first on Home tills startsidan börjar med en sådan banner.
• Ett alternativ som är på går alltid att slå av.
• Efter 24 px scroll blir sidhuvudet ogenomskinligt med temats färger. Det blir också ogenomskinligt medan menypanelen är öppen.
• Övriga sidor har alltid ogenomskinligt sidhuvud.

Medan sidhuvudet är genomskinligt har text och ikoner färgen Header text over hero under Theme › Colours. Standard är vitt. Den ljusa logotypen visas. Lägena har egna krokar i CSS, se Krokar och CSS-referens.

#Menypanelen

Menypanelen öppnas från sidhuvudslayouten Icons + panel.

• Står sidhuvudet på en annan layout visar designern panelen ändå. Panelen visar då This panel opens from the Icons + panel header. Your header is set to another layout, so shoppers never reach it …
• En egen stil på Menu panel gäller panelen under Icons + panel och under ett eget sidhuvud. Den gäller också mobilmenyn som de andra layouterna öppnar.
• Under ett eget sidhuvud har standardpanelen alltid en knapp för att stänga. Escape stänger den också.

#Links, products, contact

Panelen lägger sig över sidan under sidhuvudet. De stora länkarna står till vänster med en pil, de små länkarna under dem. Till höger visas produktkort och längst ner kontaktraden.

• Vilar kunden pekaren på en kategorilänk, eller når den med tangentbordet, byts korten mot kategorins produkter. Utvalda produkter kommer först, sedan kategorins egen ordning. Underkategoriernas produkter räknas med.
• Andra länkar visar standardkorten: de utvalda produkterna i den ordning de har i butiken. En liten länk gör det bara under pekaren, så att Tab kan gå vidare från en kategori till dess kort.
• Med tangentbordet är de stora länkarna ett stopp, och piltangenterna flyttar mellan dem. Panelen stängs när fokus lämnar sidhuvudet.
• Korten är butikens produktkort och visar priset i kundens valuta.
• Datorn visar 3 kort och surfplattan 2. Mobilen visar bara länkarna, utan kort och kontaktrad.
• På en pekskärm öppnar ett tryck länken direkt.
• Sökikonen öppnar sökrutan över sidan. Panelen har ingen egen sökruta.

Products beside the links och Contact bar under Options slår på korten och kontaktraden. Korten hämtas först när kunden går mot menyknappen, så sidorna laddar inte långsammare. På mobil hämtas de inte alls.

#Länkarna

Menyns länkar väljs bara i listan Links under Content på Menu panel. Listan gäller alla utseenden och sidhuvuden.

1. Öppna en länk i listan.
2. Välj vart den går under Links to: Category, Page eller Address.
3. Skriv en egen text under Label om du vill. Ett tomt fält betyder kategorins eller sidans eget namn.
4. Välj Big eller Small under Size.

• Dra raderna för att ändra ordning, eller använd ↑ och ↓.
• Med Shop + information blir de stora länkarna Shop-kolumnen och de små Information-kolumnen.
• När du har ändrat listan fyller den också länkraden i sidhuvudet och mobilmenyn.
• Not in the menu visar kategorier med produkter och live-sidor som inte finns i listan. Nya kategorier och sidor läggs inte till av sig själva.
• Reset to automatic links ger tillbaka de automatiska länkarna: Alla produkter, de fyra första kategorierna och sidorna.
• En länk till en sida som inte är live visas inte i butiken. På arbetsytan är den märkt, till exempel Draft. Publish säger till om en sådan länk.
• En butik med fler än ett språk får valet Languages på varje länk.

Pekar du på en rad, eller har den öppen, visar arbetsytan länken som aktiv med sina produkter. En sidas inställningar visar om sidan finns i menyn, se Sektioner och sidor. Admin › Pages visar platsen på sidans rad också, se Sidor och juridiska texter.

Obs: Listan sparas i temat och väntar på Publish, som resten av designen. Den ligger kvar när du byter stil eller trycker Reset to.

#Rubriken över produkterna

Fältet Heading over the products ligger under listan. Ett tomt fält visar ingen rubrik. Har fältet en text står kategorins namn i stället medan kunden pekar på en kategori. Fältet syns med Links, products, contact och Products beside the links på. Rubriken väntar på Publish.

#Kontaktuppgifter och sociala länkar

Formuläret Contact and social ligger under Content på Menu panel och Footer.

På Menu panel ligger formuläret hopfällt, märkt Straight to the live shop. Tryck Put these on the live shop. Uppgifterna sparas i butiken, inte i temautkastet, och syns på live-butiken med en gång. Arbetsytan visar det du skriver medan du skriver. Kontaktraden och de sociala ikonerna är dämpade tills uppgifterna finns.

#Bannerkomponenten

Komponenten Banners sätter standardvärdet för textplaceringen i sidans bildbanners. Bredden står på varje banner under Layout › Width. En banner utan egen bredd följer stilen: Full i Bold och Page i Classic. En sektion med egen bredd eller textplacering behåller den. Arbetsytan visar hur många sådana sektioner sidan har, till exempel 2 banners on this page keep their own.

#Samlingssidorna

Komponenten Collection page gäller varje kategorisida, All products (/products) och sökresultaten. Ett val gäller alla sidorna.

• Look: Sidebar, Row above the grid eller Hidden. Sidokolumnen har rubriker i versaler som fäller ihop gruppen, och långa listor rullar inom gruppen. På en kategorisida är grupperna öppna från start. På All products och i sökresultaten är bara Category öppen.
• Filters stay in view är på från start. På dator stannar sidokolumnen 16 px under sidhuvudet och raden direkt under sidhuvudet medan kunden scrollar. Raden stannar bara så länge filtren ryms på en rad. Knappen Rensa filter räknas inte. Medan ett filter är öppet flyttar en bock inte raden. Raden mäts igen när filtret stängs. En rad som bryts till två rader scrollar med sidan. Alternativet finns inte med Hidden.
• Columns per screen size väljer antalet kolumner i produktrutnätet på Desktop, Tablet och Mobile, i samma tabell som en sektions Per screen size. Desktop har stilens antal från start, 4 i de flesta stilar och 3 i Boutique. Tablet och Mobile står på auto och räknas fram från Desktop: 4 ger 3 och 2, 3 ger 3 och 2. Rutnätet i mallen Collection pages följer valet.

På telefon och surfplatta, upp till 1024 px, blir filtren en smal rad: "Filter (2) · Sortera" ("Filters (2) · Sort" på engelska). Med Filters stay in view följer raden med under sidhuvudet. Raden öppnar en panel från vänster. Varje kryss filtrerar direkt. Visa 7 produkter stänger panelen och Rensa tömmer valen. Med Hidden visar raden bara Sortera. Med Sort control också av visar den bara antalet produkter, som på dator. Panelen stängs när fönstret blir bredare än 1024 px.

Vilka filter en sida visar, och i vilken ordning, väljs per kategori. Länken Products › Categories längst ner i panelen går dit. Se Kategorier.

Preview with ovanför arbetsytan väljer vad arbetsytan visar: en kategori med sina produkter, filter och sin beskrivning, All products eller sökresultat för ett ord. Från start visas kategorin med flest filter. Listan visar antalet filter per kategori. Filtren och sorteringen fungerar här. Andra klick är avstängda. Mallen Collection pages använder samma lista, se Sidmallar.