Central de Atendimento Nuvem Configure sua loja Layout

Guia: Personalização da sua loja Nuvemshop

Índice de tutoriais de como personalizar layouts, edição avançada de CSS e HTML, criação de menu para navegação, páginas, categorias e subcategorias.

Última atualização: 21/06/2024

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 continua conhecendo a nossa plataforma ou se já conhece e deseja testar outros modelos de Layouts, acesse a nossa 🎨 Loja de Layouts Nuvem

Para te ajudar na escolha e instalar este novo Layout no seu E-commerce, seguir os passos do tutorial abaixo:
📝 Como testar outro layout?

Delete

Success

No plano Começo (gratuito), só é possível usar o 📝 Layout Morelia, caso queira alterar, recomendamos mudar para uns dos planos pagos da Nuvemshop.


Como personalizar o layout? 

Após escolher e instalar do layout em sua loja online, o próximo passo é customizar e criar sua identidade visual. Clique em "Ver mais detalhes" para saber mais.

Ver mais detalhes

Neste tópico, listamos todos 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 Idea

📝 Personalizar o layout Lifestyle

📝 Personalizar o layout Cubo

📝 Personalizar o Layout Bahia

📝 Personalizar o layout Material

📝 Personalizar o layout Atlântico

📝 Personalizar o layout Silent

📝 Personalizar o layout Trend

📝 Personalizar o layout Rio

📝 Personalizar o layout Toluca

📝 Personalizar o layout Lima

📝 Personalizar o layout Uyuni

📝 Personalizar o layout Cali

📝 Personalizar o layout Morelia

📝 Personalizar o layout Recife

📝 Personalizar o layout Baires

Delete

Personalização avançada do Layout

Você 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 alterarocultar alguns elementos (modificações mais simples).

Listamos abaixo os tutoriais que ensinam como geraraplicar o código:

📝 Saiba o que dá para alterar

📝 Gerar um código CSS

📝 Como aplicar o código CSS

Delete

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 HTMLCSS e JavaScript.

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.

Listamos abaixo os tutoriais que explicam o que é possível alterar e como aplicar o código:

📝 Veja o que dá para alterar

📝 Como acessar código-fonte

📝 Código-fonte: Boas práticas

Delete

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.

Delete
Delete

Success

Caso não tenha esse conhecimento em linguagem HTML e CSS, você pode contratar um programador de confiança ou solicitar um orçamento para uns dos 👉 Parceiros Nuvemshop.


Por meio desta opção, é possível organizar as categorias dos produtos e páginas institucionais para aparecerem no Menu de navegação da sua loja. Separamos em dois tópicos como personalizar este menu.

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 da sua loja online 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 sua loja online:

📝 Criar menu no cabeçalho

📝 Alterar a ordem do menu 

📝 Criar submenu

📝 Adicionar menu "Contato"

📝 Adicionar link, página ou categoria

📝 Remover um link

Delete

Categorias e subcategorias

Organize seus produtos em categorias e subcategorias, adicione no menu da sua loja, tornando a navegação mais atraenteamigável para seus clientes.

Abaixo listamos os tutoriais que ensinam como criar e organizar as categorias e subcategorias da sua loja online:

📝 Criar categorias

📝 Adicionar no menu

📝 Inserir imagem e descrição  

📝 Definir produtos exibidos

📝 Ordenar produtos

📝 Ordenar produtos sem estoque

Delete

Páginas de conteúdo

Essa ferramenta permite criar páginas institucionais, por exemplo: "Política de privacidade", "Troca e devolução" e "quem somos". Além disso, também é possível incorporando códigos externos (Blog, PDF, vídeo, imagens, etc)

Abaixo listamos os tutoriais que ensinam como criar páginas de conteúdo em sua loja online:

📝 Criar páginas de conteúdo

📝 Inserir imagens na página

📝 Colocar vídeo na página

📝 Vincular blog na página

📝 Inserir guia de medidas

📝 Incorporar arquivo PDF

📝 Adicionar um formulário

📝 Adicionar no menu

📝 Adicionar no rodapé

Delete

Outras ferramentas

Além dessas configurações, também indicamos consultar alguns tutoriais relacionados a personalização do Layout.

📝 Colocar um vídeo na descrição do produto

📝 Deixar minha loja no modo Página em Construção

📝 Padronizar o tamanho das imagens dos meus produtos 

📝 Criar uma página destino (Landing Page)

O artigo ajudou você?