# 9 Layouts de loja URL: https://canvaswp.com/pt-br/templates/shop/ Updated: 2026-11-03 Modelos Layouts de catálogo do WooCommerce: quantidade de colunas e posições da barra lateral, páginas de categoria, páginas de filtro, depois o carrinho e o checkout. [Abrir a vitrine ao vivo](https://demos.canvaswp.com/classic/) [Explorar os sites demo](https://canvaswp.com/pt-br/demos/) Atualizado em 3 de novembro de 2026 - [4 Colunas (abre em uma nova aba)](https://demos.canvaswp.com/classic/shop/) - [3 Colunas (abre em uma nova aba)](https://demos.canvaswp.com/classic/shop-3/) - [2 Colunas (abre em uma nova aba)](https://demos.canvaswp.com/classic/shop-2-right-sidebar/) - [1 Coluna (abre em uma nova aba)](https://demos.canvaswp.com/classic/shop-1/) - [Layouts de produto (abre em uma nova aba)](https://demos.canvaswp.com/classic/product/pink-printed-dress/) - [Categorias - Parallax (abre em uma nova aba)](https://demos.canvaswp.com/classic/shop-category-parallax/) - [Filtro de combinação (abre em uma nova aba)](https://demos.canvaswp.com/classic/shop-combination-filter/) - [Carrinho (abre em uma nova aba)](https://demos.canvaswp.com/classic/cart/) - [Finalização de compra (abre em uma nova aba)](https://demos.canvaswp.com/xmas/xmas-checkout/) Cada link abre uma página real na vitrine ao vivo, criada pelo mesmo tema e pelos mesmos blocos que você instala. O que compõe cada página ## Páginas de loja criadas com blocos e modelos O WooCommerce cuida da loja: produtos, estoque, carrinho e pagamentos. O Canvas cria as páginas por onde o cliente navega, e cada um desses layouts é montado com peças incluídas no tema e no plugin. ### Colunas do catálogo A página de quatro colunas é a própria página de loja do WooCommerce, desenhada pelo modelo de arquivo de produtos do tema. As páginas de três, duas e uma coluna usam o bloco Canvas Products, cuja opção Colunas define o número de itens por linha, dentro de uma página que usa um dos quatro modelos de loja: largura total ou uma barra lateral à esquerda, à direita ou nos dois lados. ### Página de produto Um produto recebe o layout de um modelo que você escolhe ao editá-lo. Além da página padrão, há versões com barra lateral de um ou de ambos os lados, um resumo fixo, amostras de cor e uma lista de especificações, além de um modelo Linked Gallery que também existe como carrossel. ### Banners de categoria Uma sequência de blocos Parallax Image em altura total, com uma imagem por categoria, cada uma se movendo conforme a página rola. O bloco aceita uma sobreposição e conteúdo próprios, então um título e um botão podem levar os clientes para aquela parte da loja. ### Filtro de combinação O bloco Canvas Products com duas barras Grid Filter acima dele, uma com o rótulo Selecionar categoria e outra com o rótulo Ordenar por, para que o cliente filtre o catálogo por um tipo e ordene por nome ou preço na hora, sem recarregar a página. ### Carrinho O carrinho da vitrine usa o bloco Carrinho que o WooCommerce oferece. O Canvas adiciona seus próprios blocos Canvas Cart Table e Canvas Cart Totals para uma loja que queira montar a página do carrinho bloco a bloco. ### Finalização de compra Um carrinho vazio não tem checkout para mostrar, então este link abre o checkout do demo Christmas Store, criado com os blocos Canvas Checkout Billing e Checkout Order Review. Esse demo é importado com os produtos e este checkout já configurados. Como escolher ## Qual layout de loja se adapta ao seu catálogo Deixe o tamanho do catálogo guiar a escolha. Uma pequena seleção de produtos com fotos marcantes fica melhor em cards largos, com dois ou três por linha, ou em uma única coluna quando cada produto precisa de um parágrafo próprio. Um catálogo grande precisa de mais itens na tela ao mesmo tempo, e é para isso que serve a página de loja com quatro colunas. Use o filtro combinado quando os compradores pensarem de duas formas ao mesmo tempo, por tipo e depois por preço. Coloque banners de categoria em uma página inicial ou em um lookbook, onde a imagem vende antes que a grade faça isso. Na página do produto, escolha o modelo de acordo com o que leva as pessoas a comprar. Roupas vendem pela cor, por isso a versão com seletor de cores se justifica. Produtos técnicos vendem pelos detalhes, para isso serve a lista de especificações, e um resumo fixo mantém o preço e o botão visíveis em uma página longa. 21 dos 88 sites de demonstração são importados como lojas WooCommerce, com produtos, categorias e as páginas de carrinho e de finalização de compra já prontas. ### Recursos da loja 24 blocos do WooCommerce e 18 modelos de loja, da galeria de produtos à revisão do pedido. - [WooCommerce no Canvas](https://canvaswp.com/pt-br/woocommerce/) ### O passo a passo Produtos, uma página de loja, uma página de produto, um carrinho e um checkout, na ordem em que você os criaria. - [Crie uma loja com WooCommerce](https://canvaswp.com/pt-br/guides/start-a-woocommerce-store-with-wordpress/) ### Os Demos de loja Moda, cerâmica, móveis e muito mais, todos com pré-visualização página por página antes de você importar. - [Demos de e-commerce, comparados](https://canvaswp.com/pt-br/wordpress-themes/ecommerce/) Mais modelos ## O restante da biblioteca - [Modelos de página 13](https://canvaswp.com/pt-br/templates/page-templates/) - [Shortcodes e elementos 57](https://canvaswp.com/pt-br/templates/shortcodes/) - [Layouts de portfólio 27](https://canvaswp.com/pt-br/templates/portfolio/) - [Layouts de blog 35](https://canvaswp.com/pt-br/templates/blog/)