Components· Shop
Shop
Product grid, categories, featured products, product page, reading sample and pickup order.
7 components
The examples work in test mode: nothing is saved to a real site, no messages are sent and payments are test payments.
Shop: product grid
Section Try it productGrid
The shop's product grid: product photos, names, prices and adding to cart, with filters and sorting.
Settings (13)
| Setting | Edited as | Default |
|---|---|---|
Heading heading | Text | – |
Category address (e.g. rackets/padel, empty = all) category | Text | – |
Collection address (replaces the category) collection | Text | – |
Order sort | Choice | Recommended |
Limit limit | Number | 8 |
Show a link to all products showLink | On / off | true |
Link text allLabel | Text | – |
Buy straight from the card quickBuy | On / off | – |
Show the order cut-off sameDay | On / off | – |
Paging paging | Choice | – |
Text when the list is empty emptyText | Long text | – |
Link text under an empty list emptyLinkLabel | Text | – |
Link address under an empty list emptyLinkUrl | Link | – |
Accessibility
Free and taken are told apart in text, not by colour alone. Choosing a day and a time works with a keyboard, the chosen item is announced (aria-current or aria-pressed), and prices are readable text.
Used in 14 templates
Shop: categories
Section categoryList
The shop's categories as picture cards that lead to the category's products.
Settings (3)
| Setting | Edited as | Default |
|---|---|---|
Heading heading | Text | – |
Parent category address (empty = top level) parent | Text | – |
Show product counts showCounts | On / off | true |
Accessibility
Navigation is a named landmark, the current page is marked with aria-current, the menu button has a state (aria-expanded) and a skip link leads to the content. Everything works with a keyboard and on a 390 px screen without sideways scrolling.
Shop: featured products
Section Try it featuredProducts
Featured products: a few chosen products on the front page with buy buttons.
Settings (4)
| Setting | Edited as | Default |
|---|---|---|
Heading heading | Text | – |
Limit limit | Number | 8 |
Buy straight from the card quickBuy | On / off | – |
Show the order cut-off sameDay | On / off | – |
Accessibility
Free and taken are told apart in text, not by colour alone. Choosing a day and a time works with a keyboard, the chosen item is announced (aria-current or aria-pressed), and prices are readable text.
Product page: product details
Section Try it productMain
The product page's main section: the product's photos, name, price, options and buying. It is built from the product page blocks.
Accessibility
Free and taken are told apart in text, not by colour alone. Choosing a day and a time works with a keyboard, the chosen item is announced (aria-current or aria-pressed), and prices are readable text.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Reading sample
Section Try it readingSample
A reading sample: the start of a book to read on the page and a button to buy the book.
Settings (4)
| Setting | Edited as | Default |
|---|---|---|
Heading heading | Text | Lue näyte |
Introduction intro | Formatted text | – |
Book (address in the shop) book | Text | – |
Audio file audioSrc | Link | – |
Accessibility
Every image has alternative text or is marked decorative. Zoom and the image browser work with a keyboard (arrows, Esc) and announce the position ("Image 2 of 5"). Only the first visible image loads at once.
Used in 2 templates
Order for pickup
Section Try it pickupOrder
Order for pickup: a menu or products, a pickup time and payment, e.g. for a pizzeria or a café.
Settings (2)
| Setting | Edited as | Default |
|---|---|---|
Heading heading | Text | Tilaa noudettavaksi |
Introduction intro | Formatted text | – |
Accessibility
Free and taken are told apart in text, not by colour alone. Choosing a day and a time works with a keyboard, the chosen item is announced (aria-current or aria-pressed), and prices are readable text.
Used in 4 templates
Verkkokaupan sivu
Section shopPage
The shop pages' holder: the product list, cart and checkout at /kauppa.
No live example: the section draws the platform's own shop, cart and checkout. Try buying in the web shop template's preview.
Accessibility
Free and taken are told apart in text, not by colour alone. Choosing a day and a time works with a keyboard, the chosen item is announced (aria-current or aria-pressed), and prices are readable text.
Used in 0 templates
The platform adds this to its own pages itself; it is not added in the editor.