A seguir, você encontrará os tutoriais que ensinam como personalizar o Layout para que o visual de sua loja fique conforme a identidade de sua marca.
Como escolher um Layout para minha loja?
Se está conhecendo a Nuvemshop ou quer testar novos modelos, acesse a nossa Loja de Layouts Nuvem e explore diversas opções para sua loja.
Para te ajudar a escolher e instalar um novo Layout, consultar este tutorial com o passo a passo.
Success
No plano Começo (gratuito), só é possível usar o Layout Morelia, caso queira alterar, recomendamos alterar o plano.
Como personalizar o layout?
Após escolher e instalar o layout na loja , o próximo passo é customizar e criar sua identidade visual. Clique em "Ver mais detalhes" para saber como personalizar o layout.
Ver mais detalhes
Neste tópico, você encontra os tutoriais que ensinam como personalizar o seu Layout, por exemplo: ajustar o cabeçalho, inserir banners, customizar a página inicial, destacar os produtos, habilitar o cálculo de frete, rodapé, entre outras opções.
📝 Personalizar o layout Amazonas
📝 Personalizar o layout Simple
📝 Personalizar o layout Atlântico
📝 Personalizar o layout Toluca
📝 Personalizar o layout Morelia
📝 Personalizar o layout Recife
Personalização avançada do Layout
Você também pode customizar o layout através dos códigos CSS e HTML. Para fazer esse tipo alteração, recomendamos que tenha conhecimentos avançados em linguagens de programação.
Se você possui esses conhecimentos e deseja alterar algum elemento do layout, na Nuvemshop você pode fazer por dois campos:
Usando o campo "Edição de CSS avançada"
Através do campo Edição de CSS avançada no painel de personalizado do Layout, é possível adicionar códigos CSS, sendo possível alterar e ocultar alguns elementos (modificações mais simples).
Veja os tutoriais abaixo ensinando como gerar e aplicar o código:
📝 Saiba o que dá para alterar
Editar o código-fonte (FTP)
Em todo Layout da Nuvemshop, você encontra uma opção de Editar o código. Esse campo permite acessar o código-fonte (FTP) do Layout e realizar alterações avançadas através do HTML, CSS e JavaScript.
Para esse método de customização, é preciso ter conhecimento avançado de código HTML e CSS. Lembrando que qualquer mudança incorreta, sua loja pode ficar fora do ar.
Abaixo veja o que é possível alterar e como aplicar o código:
📝 Veja o que dá para alterar
Warning
O acesso ao FTP não está disponível em todos os planos. Para saber quais funcionalidades o seu plano oferece, consultar a página Planos e Preços.
Success
Caso não tenha conhecimento em linguagem HTML e CSS, você pode contratar um programador de confiança ou solicitar um orçamento sem compromisso para um Parceiro Nuvemshop.
Menu de navegação, Páginas, categorias e subcategorias
Com essa opção, é possível organizar as categorias dos produtos e páginas institucionais para aparecerem no Menu de navegação da sua loja.
Para configurar o seu menu de navegação, criar páginas, categorias e subcategorias, consultar os seguintes tutoriais:
Menu de navegação
Com a ferramenta Barra de navegação, você pode adicionar ao menu de navegação as categorias e subcategorias de produtos, páginas de conteúdos (Quem somos, políticas de privacidade) e até mesmo uma página exclusiva de contato.
Abaixo listamos os tutoriais que ensinam como personalizar o menu de navegação da loja:
📝 Criar menu no cabeçalho
Categorias e subcategorias
Organize seus produtos em categorias e subcategorias e adicione no menu da sua loja, tornando a navegação mais atraente e amigável para seus clientes.
Abaixo veja como criar e organizar as categorias e subcategorias:
📝 Criar categorias e subcategorias
Páginas de conteúdo
Essa ferramenta permite criar páginas institucionais, como Política de privacidade, Troca e devolução e quem somos. Além disso, também é possível incorporar códigos externos (Blog, PDF, vídeo, imagens etc).
Abaixo veja como criar páginas de conteúdo em sua loja online:
📝 Criar páginas de conteúdo
Outras ferramentas
Além dessas configurações, você tabém pode configurar outras funcionalidades para personalizar seu layout.
Vídeo na descrição do produto
Incluir vídeos na descrição dos produtos pode aumentar o engajamento e facilitar a decisão de compra dos seus clientes.
Para conferir como incluir o vídeo, consultar o tutorial:
Página em construção
Se precisar que os clientes não acessem sua loja enquanto trabalha no layout ou deseja deixá-la em pausa, por exemplo, durante férias, ative a opção Página em construção.
Veja como ativar seguindo este passo a passo:
Padronizar tamanho das imagens
Imagens padronizadas deixam a vitrine da sua loja mais organizada e profissional.
Neste tutorial, você vai aprender como padronizar o tamanho das imagens dos produtos para manter o layout alinhado.
Criar uma Landing Page
Com uma langing page você pode criar páginas de alta conversão na sua loja Nuvemshop.
Veja no tutorial abaixo o passo a passo: