9 Shop Layouts
WooCommerce catalogue layouts: column counts and sidebar positions, category pages, filter pages, then the cart and the checkout.
- 4 Columns (opens in a new tab)
- 3 Columns (opens in a new tab)
- 2 Columns (opens in a new tab)
- 1 Columns (opens in a new tab)
- Product Layouts (opens in a new tab)
- Categories - Parallax (opens in a new tab)
- Combination Filter (opens in a new tab)
- Cart (opens in a new tab)
- Checkout (opens in a new tab)
Every link opens a real page on the live showcase, drawn by the same theme and blocks you install.
Store pages built from blocks and templates
WooCommerce runs the store: products, stock, the cart and payments. Canvas designs the pages a shopper walks through, and every one of these layouts comes from pieces that ship in the theme and its plugin.
Catalogue columns
The four column page is the WooCommerce shop page itself, drawn by the theme's product archive template. The three, two and one column pages hold the Canvas Products block, whose Columns setting decides the row, inside a page using one of the four shop templates: full width, or a sidebar on the left, the right or both.
Product page
A product takes its layout from a template you pick while editing it. Besides the standard page there are versions with a sidebar on either side or both, a sticky summary, colour swatches and a specification list, plus a Linked Gallery template that also comes as a carousel.
Category banners
A stack of full-height Parallax Image blocks, one picture per category, each moving as the page scrolls. The block takes an overlay and content of its own, so a heading and a button can send shoppers into that part of the store.
Combination filter
The Canvas Products block with two Grid Filter bars above it, one labelled Select Category and one labelled Sort By, so a shopper narrows the catalogue to one type and orders it by name or price on the spot, with no page reload.
Cart
The showcase cart uses the Cart block WooCommerce ships. Canvas adds its own Cart Table and Cart Totals blocks for a store that wants to lay the cart page out block by block.
Checkout
An empty cart has no checkout to show, so this link opens the checkout of the Christmas Store demo, built from the Canvas Checkout Billing and Checkout Order Review blocks. That demo imports with its products and this checkout in place.
Which shop layout fits your catalogue
Let the size of the catalogue lead. A small range of products with strong photographs looks best in wide cards, so two or three to a row, or a single column when each product needs a paragraph of its own. A large catalogue needs more on screen at once, which is what the four column shop page is for.
Use the combination filter when shoppers think in two ways at once, by type and then by price. Put category banners on a home page or a lookbook, where the picture does the selling before the grid does.
On the product page, pick the template by what makes people buy. Clothing sells on colour, so the colour swatch version earns its place. Technical products sell on detail, which is what the specification list is for, and a sticky summary keeps the price and the button in view on a long page.
19 of the 80 demo websites import as WooCommerce stores, with products, categories and the cart and checkout pages in place.
The store features
22 WooCommerce blocks and 18 store templates, from the product gallery to the order review.
The walkthrough
Products, a shop page, a product page, a cart and a checkout, in the order you would build them.
The shop demos
Fashion, pottery, furniture and more, each previewed page by page before you import it.
The rest of the library
Start from a finished page
All 141 layouts ship on every plan, alongside every block and every demo website.