A seção Layout permite que você crie seu storefront usando HTML e CSS. Ela é organizada em pastas e arquivos com as funções descritas abaixo.

• HTML Templates: criar o código HTML e os arquivos JavaScript e CSS de referência que serão usados nas páginas do site.

• Shelves Templates: gerenciar os templates de prateleiras, ou seja, os componentes responsáveis pela renderização de um grupo de produtos no storefront.

• Custom Elements: criar as condições necessárias para implementar componentes reutilizáveis, como rodapés, em outras partes da loja.

• URL Builder: redirecionar as URLs existentes para outras de interesse. Isso evitará erros de indexação e ajudará a manter os resultados de SEO.

• Files Manager: carregar arquivos de imagem no site da sua loja. Você pode armazenar JavaScript, CSS e arquivos de imagem do site. Caso queira usar algum desses arquivos na sua loja, você deve referenciá-los na seção HTML Templates.

• Product Cluster (Collections): criar grupos de produtos. Você pode usar esse recurso para criar páginas de Campanhas ou de Coleções de Produtos com clusters de produtos específicos.

• Sites and Channels: configurar o binding da sua loja e outras configurações do Gerenciador de Licenças. Para saber mais, consulte o artigo estrutura das pastas do CMS.

A seção Configurações permite que você defina configurações relacionadas ao site da sua loja, como metadados, tags de SEO, tipos de arquivos, etc.

A seção Configurações contém as seguintes abas:

• Gerais: configurações gerais relacionadas aos metadados e às opções de compra da loja, como o título da página inicial e a quantidade máxima de SKUs no carrinho.
• SEO: opções de personalização de palavras-chave e meta tags de SEO.
• Textos da loja: banco de dados de variáveis de texto reutilizáveis que são renderizadas no storefront.
• Tipos de arquivos: configurações relacionadas aos arquivos de ativos, como dimensões e tamanho da imagem.
• Regiões geográficas: banco de dados das regiões geográficas onde os produtos da loja estão disponíveis.

Na VTEX, toda nova conta já dispõe de pastas pré-instaladas no seu CMS. Entretanto, algumas delas são obrigatórias.

Ou seja, se sua loja não tiver essas pastas - com os nomes exatamente iguais aos que indicamos neste artigo - você terá problemas de navegação e de indexação.

A demais pastas são apenas sugestões por serem úteis à maioria das lojas. Mas a sua ausência não afeta uma conta em nada.

Toda loja precisa ter, sem exceção, as seguintes pastas no CMS para garantir o correto funcionamento da navegação e da indexação:

• Busca
• Categoria
• Departamento
• Login
• Produto

Veja abaixo estas pastas básicas no CMS:

Estas pastas vêm por padrão no ambiente de todas as lojas VTEX.

Como as pastas se referem a páginas dinâmicas, seus nomes não aparecem na navegação do cliente.

Isso significa que a edição dos nomes ser vetada não afeta o texto final das suas URLs nem, portanto, a internacionalização do seu site.

Desse modo, os nomes dos layouts podem ser editados sem nenhum problema.

Algumas pastas do CMS não são obrigatórias, mas são úteis. Por isso, indicamos que você não as exclua.

São elas:

• /account: conta do cliente
• /account/orders: pedidos do cliente

Para estas duas pastas, o que importa é o controle ou placeholder que lê o conteúdo delas. Seus nomes delas podem ser livremente editados.

Há pastas que, embora não sejam tão importantes quanto as anteriores, costumam ser úteis para grande parte das lojas.

São elas:

• /sistema/buscavazia: pasta para onde o usuário é direcionado caso a busca não encontre resultados.
• /sistema/{codigoHTTP}: pasta que renderiza páginas de erros de acordo com os códigos de status HTTP, tais como 404 (página não encontrada), 401 (não autorizado) e 500 (erro de servidor).
• /marcas: pasta que contém layouts de páginas de marca, que podem ser customizadas com um layout exclusivo. Se não houver layout específico para marcas, estas páginas serão renderizadas iguais à pasta busca. Para entender como funcionam páginas de marca, veja o artigo Como funciona a busca da VTEX.

Controles são trechos de código que você pode utilizar nos templates do seu site para realizar ações específicas.

Na VTEX, você encontra uma série de controles nativos para renderizar diversas funcionalidades.

Por exemplo, usando o controle <vtex.cmc:productName/> em uma página de produto, o sistema fornecerá o nome do produto para ser exibido na tela.

Para adicionar um controle, basta colá-lo no código. O resultado será renderizado na posição do código onde ele for adicionado.

Você pode conferir todos os controles nativos disponíveis e seus respectivos usos no artigo Lista de controles para templates.

• Layout
• Configurações
• O que são templates?
• O que é um web site?
• O que são controles?
• O que são layouts?
• O que são prateleiras?
• O que é binding?

• Criar e editar um template de página: Aprenda a criar template de página. O template de página é um modelo criado para definir uma estrutura HTML para apresentação do conteúdo das páginas.

• Associar um template a um layout: Associe um template a um layout usando a pasta Sites e canais.

• Gerenciando placeholders: Um placeholder é um trecho de código configurável que atende a condições definidas pela loja. Insira e configure um placeholder, por exemplo, um banner na sua loja.

• Usando controles nativos da VTEX: Controles são trechos de código que você pode utilizar nos templates do seu site para realizar ações específicas, por exemplo, um controle em uma página de produto para exibir o nome do produto na tela.

• Para que serve o Controle Customizado?: Além dos controles nativos da VTEX, você pode criar seus próprios controles.

• Lista de controles para templates
• Controle de Busca - fulltextSearchBox
• Controle de destaque de coleção
• Controle de breadcrumb
• Controles do template de prateleira