BunStackDocs

Butiker

Sidmallar

Produktsidan, kategorisidorna och textsidorna som mallar: sektioner med lås, Preview with, bilden vid Details, Properties med staplarna och läsbredden.

Senast uppdaterad · 8 min läsning

En mall är en design som butiken fyller med många olika saker: varje produkt, varje kategori eller varje sida du skriver i admin. Du ändrar mallen en gång och alla sidorna följer.

Var: Fliken Pages i designern, gruppen Templates.

Tre mallar

MallRitarDet som skiljer sidorna åt
Product pageVarje produktsida, /products/…Produktens bilder, texter, egenskaper och tillval, under Admin › Products
Collection pagesVarje kategorisida, All products på /products och sökresultatenKategorins namn, text och produkter, under Admin › Products › Categories
Text pagesVarje sida under Admin › Pages, till exempel Om oss och köpvillkorenSidans titel och text

Klicka på en mall för att öppna den på arbetsytan, som Home. Märket TEMPLATE visar att raden är en mall. Sektionerna på en mall är desamma på alla sidor den ritar.

Grupperna i fliken Pages beskrivs under Sektioner och sidor.

Sektioner med lås

Några sektioner hör till mallen och kan inte tas bort. De har ett lås och märket ALWAYS ON i stället för ON/OFF.

SektionMallVad låset betyder
ProductProduct pageGalleriet och köppanelen. Står alltid först och inget kan flyttas ovanför. Pris, momsrad, lägsta pris 30 dagar och köpknappen finns alltid med
Product safetyProduct pageTillverkaren och ansvarig person i EU. Kan flyttas men inte stängas av. Visas när leverantören har uppgifterna
Page textText pagesSidans titel och text. Står alltid först

Menyn ⋯ Actions och verktygsraden på arbetsytan visar bara det som går. Saknas en låst sektion i en sparad mall lägger butiken tillbaka den. En låst sektion visas på alla skärmar, så den har ingen Show on.

Produktsidan

Pages › Product page har de här sektionerna från början, i den här ordningen:

SektionInställningar i inspektorn
ProductInga. Ett klick öppnar Components › Product page, där utseendet ställs in
PropertiesPlace (In the buy panel, Own section). Som egen sektion också Heading
DetailsHeading och Image beside the text (None, Last image)
Product safetyInga
ReviewsInga
Linked categoriesColumns per skärmstorlek under Layout. Kategorierna och deras rubriker väljs på varje kategori, se Kopplade kategorier
You may also likeHeading, Products (4 eller 8) och Columns per skärmstorlek under Layout
Recently viewedInga. Är av från början

En tom Heading visar plattformens text på besökarens språk, till exempel "Detaljer". Properties, Details, Reviews, Linked categories och You may also like kan stängas av, flyttas och tas bort. En borttagen sektion finns i biblioteket under This page och kan läggas tillbaka. Utan Reviews är betyget under produktnamnet ingen länk.

De här sektionerna har också Width och Show on under Layout. You may also like och varje rad i Linked categories har 4 kolumner på dator, 3 på surfplatta och 2 i mobil tills du väljer andra. Under namnet på en malls sektion står i inspektorn var den kan finnas: Only on product pages eller Only on text pages.

Egna sektioner från biblioteket, till exempel Bild + text eller FAQ, går att lägga var som helst under Product. Specifications finns också under This page. Med den på sidan står egenskapsraderna i en egen sektion med egen Heading, och Details visar bara texten.

Texten i Details

Details visar produktens beskrivning. Första stycket upprepas inte där när det redan står vid priset: när det är Short description, eller när det inte finns någon kort beskrivning och första stycket får plats helt vid priset. Ett första stycke som kortas vid priset står kvar i Details. Med egen HTML för köppanelen står hela beskrivningen kvar i Details.

Bilden bredvid Details

Image beside the text är None från början. Med Last image visas produktens sista bild bredvid texten. Bilden visas bara på dator, från 1025 px. Den byts inte när kunden väljer en annan variant.

Properties och staplar

Sektionen Properties bestämmer var staplarna står. Vilka egenskaper som blir staplar, och deras skala, ställs in per egenskap under Products › Attributes.

PlaceDet som visas
In the buy panelStaplarna under texten vid priset, till exempel Speed och Control. De andra egenskaperna är rader i Details. Det är förvalt
Own sectionSektionens Heading, eller plattformens text när den är tom, sedan staplarna och egenskapsraderna, där du lägger sektionen

Show bars under Components › Product page slår på och av staplarna. När den är av är Bar-egenskaperna rader som de andra. Stänger du av eller tar bort sektionen Properties blir det inga staplar heller, och alla egenskaper är rader i Details. Raderna står på ett ställe: i Specifications när den finns på sidan, annars i Properties som egen sektion, annars i Details. Med staplarna på står samma egenskaper inte också som rader. Med egen HTML för köppanelen ritar plattformen inga staplar där, och då står raderna kvar i tabellen. Properties som egen sektion ritas av plattformen, även med egen HTML. I köppanelen gäller Show on för Properties staplarna, och Properties har ingen Heading, Width eller Background: där ritar den ingen egen sektion.

Textsidor

Pages › Text pages har sektionen Page text med två inställningar:

InställningVal
Reading widthPage, XS 640, S 768, M 1024, L 1280, XL 1440, 2XL 1536 px eller Full. Texten står i sidans kolumn, så Page, Full och ett steg som är bredare än sidan fyller kolumnen. Custom tar ett eget värde i px eller rem. S är förvalt. Det är sidtextens enda bredd: sektionen har ingen annan Width
Text sizeNormal eller Large

Egna sektioner går att lägga under texten. Texten skriver du under Admin › Pages, se Sidor och juridiska texter.

Collection pages

Pages › Collection pages ritar kategorisidorna, All products och sökresultaten. Arbetsytan visar sidan som butiken gör: namnet och brödsmulan, kategorins beskrivning, filtren, raden med antal produkter och sorteringen, produkterna och mallens sektioner. På telefon och surfplatta, upp till 1024 px, är filtren den smala raden som öppnar en panel. Byt arbetsytan till Tablet eller Mobile för att se den.

Filtren och sorteringen fungerar på arbetsytan, så du kan kryssa, fälla ihop och öppna panelen för att prova dem. Det du kryssar i sparas inte. Ett klick på en sektion väljer den, som på andra sidor.

Filtrens och sorteringens utseende ställs in under Components › Collection page. Vilka filter en kategori visar ställs in på kategorin.

Preview with

Listan Preview with ovanför arbetsytan väljer vad mallen fylls med medan du arbetar.

  • Product page: först de mest kompletta produkterna, med flest bilder, egenskaper och varianter. Sedan en produkt från varje kategori och sist alla produkter. Staplar och rader kommer från produkten. You may also like visar andra produkter i butiken, inte produktens egna. Linked categories visar en exempelrad: butikens första kategori över butikens första produkter. En rad ovanför den på canvasen säger att det är ett exempel. Produkter som säljs bara som tillval står sist, i en egen grupp Sold only as an add-on.
  • Search products… bredvid listan hittar en produkt på namnet.
  • Text pages: butikens sidor, den längsta först.
  • Collection pages: en kategori, All products eller Search results. Från start visas kategorin med flest filter, eller All products när butiken saknar kategorier. Listan visar antalet filter per kategori. En kategori visas med sina egna produkter, i kategorins ordning som i butiken, sina filter och sin beskrivning. För Search results skriver du orden, och arbetsytan matchar dem mot produktnamnen.
  • Valet sparas inte med mallen. Det gäller i fliken tills du stänger den.

Komponenterna Product page och Gallery visas med samma produkt och med sektionerna i den ordning du har sparat. Komponenten Collection page visas med samma val som Collection pages.

Sidhuvud och sidfot

Kugghjulet på en mall i fliken Pages öppnar Header och Footer för alla sidor mallen ritar. Ändringen gäller i butiken direkt, inte vid nästa publicering. Adress, titel och söktext har varje produkt, kategori och sida själv.

Ett val, ett ställe

ValVar
Ordning, av och på, egna sektionerPages, mallen, fliken Sections
Bilden bredvid Details, rubriker, antal produkterSamma sektion, inspektorn
Var staplarna står, som egen sektion med rubrikSektionen Properties, inspektorn
Galleriets och köppanelens utseende, staplar på och av, betalikonerComponents › Product page och Gallery
Hur en egenskap visasProducts › Attributes
Kort beskrivning, beskrivning och bilderProducts, produkten
SEO för en produktProducts, produkten
Egen HTML för köppanelenAdvanced, sedan Components › Product page › Customize with code