Komponenter· Produktsidans block
Produktsidans block
Delarna i produktsidans mall: bildgalleri, pris, lager, köpknapp, beskrivning, specifikationer och omdömen.
21 komponenter
Exemplen fungerar i testläge: inget sparas på en riktig webbplats, inga meddelanden skickas och betalningarna är testbetalningar.
Brödsmulor
Block shopBreadcrumbs
Brödsmulor på produktsidan: Butik › Kategori › Produkt.
Tillgänglighet
Navigeringen är ett namngivet landmärke, den aktuella sidan markeras med aria-current, menyknappen har ett tillstånd (aria-expanded) och en hopplänk leder till innehållet. Allt fungerar med tangentbordet och på en 390 px skärm utan sidledsrullning.
Används i 0 mallar
Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.
Meddelanden
Block shopNotices
Butikens meddelanden på produktsidan, som avvikande leveranstider.
Visas bara när butiken har ett aktivt meddelande; exempelbutiken har inget, så blocket är tomt.
Tillgänglighet
Rubrikerna följer sidans rubriknivåer, bildens alternativa text anges i redigeraren och färgerna kommer från temats värden, vars kontrast kontrolleras till WCAG AA. Ingen rörelse och inget tidsstyrt innehåll.
Används i 0 mallar
Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.
Bilder och köp
Block Prova productHero
Bilder och köp: produktbilder och köpspalten sida vid sida överst på produktsidan.
Inställningar (1)
| Inställning | Redigeras som | Standard |
|---|---|---|
Bildernas plats galleryPosition | Val | Till vänster |
Tillgänglighet
Ledigt och bokat skiljs åt med text, inte bara med färg. Val av dag och tid fungerar med tangentbordet, det valda anges (aria-current eller aria-pressed) och priserna är läsbar text.
Används i 0 mallar
Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.
Produktbilder
Block Prova productGallery
Produktbilder: huvudbild och miniatyrer, med förstoring.
Tillgänglighet
Varje bild har alternativ text eller är markerad som dekorativ. Förstoring och bildbläddraren fungerar med tangentbordet (pilar, Esc) och anger positionen (”Bild 2 av 5”). Bara den första synliga bilden laddas direkt.
Används i 0 mallar
Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.
Köpkolumn
Block Prova buyColumn
Köpspalten: samlar namn, pris, val och köpknapp i en spalt.
Tillgänglighet
Ledigt och bokat skiljs åt med text, inte bara med färg. Val av dag och tid fungerar med tangentbordet, det valda anges (aria-current eller aria-pressed) och priserna är läsbar text.
Används i 0 mallar
Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.
Märke
Block productBrand
Produktens märke eller tillverkare.
Tillgänglighet
Rubrikerna följer sidans rubriknivåer, bildens alternativa text anges i redigeraren och färgerna kommer från temats värden, vars kontrast kontrolleras till WCAG AA. Ingen rörelse och inget tidsstyrt innehåll.
Används i 0 mallar
Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.
Produktnamn
Block productTitle
Produktens namn som sidans huvudrubrik.
Tillgänglighet
Rubrikerna följer sidans rubriknivåer, bildens alternativa text anges i redigeraren och färgerna kommer från temats värden, vars kontrast kontrolleras till WCAG AA. Ingen rörelse och inget tidsstyrt innehåll.
Används i 0 mallar
Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.
Pris
Block productPrice
Pris, rabatt och raden om moms.
Tillgänglighet
Rubrikerna följer sidans rubriknivåer, bildens alternativa text anges i redigeraren och färgerna kommer från temats värden, vars kontrast kontrolleras till WCAG AA. Ingen rörelse och inget tidsstyrt innehåll.
Används i 0 mallar
Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.
Tillgänglighet
Block productStock
Tillgänglighet: i lager, få kvar eller beställningsvara.
Tillgänglighet
Rubrikerna följer sidans rubriknivåer, bildens alternativa text anges i redigeraren och färgerna kommer från temats värden, vars kontrast kontrolleras till WCAG AA. Ingen rörelse och inget tidsstyrt innehåll.
Används i 0 mallar
Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.
Produktfamilj
Block productFamily
Produktfamilj: samma produkts andra färger eller storlekar som länkar.
Visas bara för en produkt som hör till en produktfamilj; exempelprodukten gör det inte, så blocket är tomt.
Tillgänglighet
Navigeringen är ett namngivet landmärke, den aktuella sidan markeras med aria-current, menyknappen har ett tillstånd (aria-expanded) och en hopplänk leder till innehållet. Allt fungerar med tangentbordet och på en 390 px skärm utan sidledsrullning.
Används i 0 mallar
Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.
Val och köpknapp
Block Prova productBuy
Val och köpknapp: storlek, färg, antal och Lägg i varukorgen.
Tillgänglighet
Ledigt och bokat skiljs åt med text, inte bara med färg. Val av dag och tid fungerar med tangentbordet, det valda anges (aria-current eller aria-pressed) och priserna är läsbar text.
Används i 0 mallar
Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.
Meddela när tillgänglig
Block Prova productNotify
Meddela när tillgänglig: besökaren lämnar sin adress för en slutsåld produkt.
Visas bara för en slutsåld produkt; exempelprodukten finns i lager, så blocket är tomt.
Tillgänglighet
Varje fält har en synlig etikett, obligatoriska fält anges i text, fel läses upp och leder till fältet och autocomplete fyller i bekanta uppgifter. Pekytorna är minst 44 px.
Används i 0 mallar
Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.
Leverans och tjänster
Block productPerks
Leverans och tjänster: leveranstid, retur och avhämtning som korta rader.
Tillgänglighet
Rubrikerna följer sidans rubriknivåer, bildens alternativa text anges i redigeraren och färgerna kommer från temats värden, vars kontrast kontrolleras till WCAG AA. Ingen rörelse och inget tidsstyrt innehåll.
Används i 0 mallar
Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.
Beskrivning
Block productDescription
Produktens beskrivning som formaterad text.
Tillgänglighet
Rubrikerna följer sidans rubriknivåer, bildens alternativa text anges i redigeraren och färgerna kommer från temats värden, vars kontrast kontrolleras till WCAG AA. Ingen rörelse och inget tidsstyrt innehåll.
Används i 0 mallar
Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.
Livsmedelsinformation
Block productFoodInfo
Livsmedelsuppgifter: ingredienser, allergener och näringsvärden.
Visas bara när livsmedelsuppgifter har angetts för produkten; exempelprodukten har inga.
Tillgänglighet
Tabeller har rubrikceller och bildtext, listor är riktiga listor och datum är i läsbar form. Diagrammets siffror finns även som text.
Används i 0 mallar
Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.
Produktuppgifter
Block productSpecs
Produktuppgifter som tabell: mått, material och andra egenskaper.
Tillgänglighet
Tabeller har rubrikceller och bildtext, listor är riktiga listor och datum är i läsbar form. Diagrammets siffror finns även som text.
Används i 0 mallar
Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.
Paketets innehåll
Block Prova productBundle
Paketets innehåll: vilka produkter paketet innehåller.
Visas bara för en paketprodukt; exempelprodukten är en enskild produkt, så blocket är tomt.
Tillgänglighet
Ledigt och bokat skiljs åt med text, inte bara med färg. Val av dag och tid fungerar med tangentbordet, det valda anges (aria-current eller aria-pressed) och priserna är läsbar text.
Används i 0 mallar
Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.
Relaterade produkter
Block productRelated
Relaterade produkter som kort i slutet av produktsidan.
Tillgänglighet
Navigeringen är ett namngivet landmärke, den aktuella sidan markeras med aria-current, menyknappen har ett tillstånd (aria-expanded) och en hopplänk leder till innehållet. Allt fungerar med tangentbordet och på en 390 px skärm utan sidledsrullning.
Används i 0 mallar
Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.
Recensioner
Block productReviews
Recensioner: köparnas stjärnor och kommentarer.
Visas när produkten har publicerade recensioner; exempelprodukten har inga.
Tillgänglighet
Rubrikerna följer sidans rubriknivåer, bildens alternativa text anges i redigeraren och färgerna kommer från temats värden, vars kontrast kontrolleras till WCAG AA. Ingen rörelse och inget tidsstyrt innehåll.
Används i 0 mallar
Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.
Storleksguide
Block Prova productSizeGuide
En storleksguide som öppnas från en knapp.
Inställningar (4)
| Inställning | Redigeras som | Standard |
|---|---|---|
Rubrik label | Text | Kokotaulukko |
Visa för produkter med alternativet when | Text | Koko |
Rader rows | Lång text | Koko | Rinnanympärys (cm) | Vyötärö (cm) | Pitu… |
Mätanvisning note | Lång text | Mittaa vartalo kevyesti mittanauhalla. Jos olet… |
Tillgänglighet
Innehåll som öppnas är en knapp med namn och tillstånd (aria-expanded eller vald flik). Fungerar med tangentbordet: Tab flyttar, Enter och mellanslag öppnar, Esc stänger. Innehållet går att läsa även utan JavaScript.
Används i 0 mallar
Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.
Produktegenskap
Block productAttribute
En produktegenskap framlyft, t.ex. material eller tillverkningsland.
Inställningar (1)
| Inställning | Redigeras som | Standard |
|---|---|---|
Egenskapens namn (t.ex. Material) attribute | Text | – |
Tillgänglighet
Rubrikerna följer sidans rubriknivåer, bildens alternativa text anges i redigeraren och färgerna kommer från temats värden, vars kontrast kontrolleras till WCAG AA. Ingen rörelse och inget tidsstyrt innehåll.
Används i 0 mallar
Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.