Components· Product page blocks
Product page blocks
The parts of the product page template: gallery, price, stock, buy button, description, specifications and reviews.
21 components
The examples work in test mode: nothing is saved to a real site, no messages are sent and payments are test payments.
Breadcrumbs
Block shopBreadcrumbs
Breadcrumbs on the product page: Shop › Category › Product.
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.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Notices
Block shopNotices
Shop notices on the product page, such as delivery exceptions.
Shown only when the shop has an active notice; the sample shop has none, so the block is empty.
Accessibility
Headings follow the page's heading levels, an image's alternative text is given in the editor, and colours come from the theme's values, whose contrast is checked to WCAG AA. No motion and no timed content.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Pictures and buying
Block Try it productHero
Pictures and buying: product photos and the buy column side by side at the top of the product page.
Settings (1)
| Setting | Edited as | Default |
|---|---|---|
Pictures on the galleryPosition | Choice | Left |
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.
Product pictures
Block Try it productGallery
Product photos: the main picture and thumbnails, with zoom.
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 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Buy column
Block Try it buyColumn
The buy column: gathers name, price, options and buy button in one column.
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.
Brand
Block productBrand
The product's brand or maker.
Accessibility
Headings follow the page's heading levels, an image's alternative text is given in the editor, and colours come from the theme's values, whose contrast is checked to WCAG AA. No motion and no timed content.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Product name
Block productTitle
The product's name as the page's main heading.
Accessibility
Headings follow the page's heading levels, an image's alternative text is given in the editor, and colours come from the theme's values, whose contrast is checked to WCAG AA. No motion and no timed content.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Price
Block productPrice
The price, a discount and the line about VAT.
Accessibility
Headings follow the page's heading levels, an image's alternative text is given in the editor, and colours come from the theme's values, whose contrast is checked to WCAG AA. No motion and no timed content.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Availability
Block productStock
Availability: in stock, running low or on order.
Accessibility
Headings follow the page's heading levels, an image's alternative text is given in the editor, and colours come from the theme's values, whose contrast is checked to WCAG AA. No motion and no timed content.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Product family
Block productFamily
Product family: the same product's other colours or sizes as links.
Shown only for a product that belongs to a product family; the sample product does not, so the block is empty.
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.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Options and buy button
Block Try it productBuy
Options and buy button: size, colour, quantity and Add to cart.
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.
Notify when available
Block Try it productNotify
Notify when available: the visitor leaves an address for a sold-out product.
Shown only for a sold-out product; the sample product is in stock, so the block is empty.
Accessibility
Every field has a visible label, a required field says so in text, errors are announced and lead to the field, and autocomplete fills in familiar details. Touch targets are at least 44 px.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Delivery and services
Block productPerks
Delivery and services: delivery time, returns and pickup as short lines.
Accessibility
Headings follow the page's heading levels, an image's alternative text is given in the editor, and colours come from the theme's values, whose contrast is checked to WCAG AA. No motion and no timed content.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Description
Block productDescription
The product's description as formatted text.
Accessibility
Headings follow the page's heading levels, an image's alternative text is given in the editor, and colours come from the theme's values, whose contrast is checked to WCAG AA. No motion and no timed content.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Food information
Block productFoodInfo
Food information: ingredients, allergens and nutrition.
Shown only when food information has been entered for the product; the sample product has none.
Accessibility
Tables have header cells and a caption, lists are real lists and dates are in a readable form. A chart's numbers are available as text too.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Product details
Block productSpecs
Product details as a table: dimensions, material and other properties.
Accessibility
Tables have header cells and a caption, lists are real lists and dates are in a readable form. A chart's numbers are available as text too.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Bundle contents
Block Try it productBundle
Bundle contents: which products the bundle includes.
Shown only for a bundle product; the sample product is a single product, so the block is empty.
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.
Related products
Block productRelated
Related products as cards at the end of the product page.
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.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Reviews
Block productReviews
Reviews: buyers' stars and comments.
Shown when the product has published reviews; the sample product has none.
Accessibility
Headings follow the page's heading levels, an image's alternative text is given in the editor, and colours come from the theme's values, whose contrast is checked to WCAG AA. No motion and no timed content.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Size guide
Block Try it productSizeGuide
A size guide that opens from a button.
Settings (4)
| Setting | Edited as | Default |
|---|---|---|
Title label | Text | Kokotaulukko |
Show on products with the option when | Text | Koko |
Rows rows | Long text | Koko | Rinnanympärys (cm) | Vyötärö (cm) | Pitu… |
How to measure note | Long text | Mittaa vartalo kevyesti mittanauhalla. Jos olet… |
Accessibility
Content that opens is a button with a name and a state (aria-expanded or the selected tab). Works with a keyboard: Tab moves, Enter and Space open, Esc closes what opened. The content can be read without JavaScript too.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Product attribute
Block productAttribute
One product property highlighted, e.g. material or country of origin.
Settings (1)
| Setting | Edited as | Default |
|---|---|---|
Attribute name (e.g. Material) attribute | Text | – |
Accessibility
Headings follow the page's heading levels, an image's alternative text is given in the editor, and colours come from the theme's values, whose contrast is checked to WCAG AA. No motion and no timed content.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.