Menu Aparência > Meus temas

O modelo de visual é uma configuração do painel para facilitar a criação da aparência da sua loja virtual.
Para configurar o modelo DCNutrition você pode utilizar as dimensões, extensões e configurações recomendadas nesse artigo.

Importante! Ao carregar um novo modelo, o conteúdo das seções que já estão cadastrados na sua loja são substituídos, ou seja, por questões de compatibilidade os dados não são importados para o novo modelo.  Para que sua loja funcione corretamente faça o cadastro de imagens nas dimensões e extensões recomendadas, junto com as demais configurações e informações do modelo.

Configurando as páginas

Você pode editar informações, imagens de fundo, alterar ordenação ou adicionar seções em suas páginas. Não existem dimensões exatas para as imagens inseridas na plataforma.

1º  Acesse o menu de Aparência clique em Meus temas e em Personalizar.

2º Selecione a página que deseja editar.

Você pode inserir uma imagem na página inicial. Para o modelo DCNutrition siga as configurações abaixo:

• Dimensões de imagem de fundo: 1400x800px 
• Extensão recomendada: .jpg.

Selecionando as fontes

Defina as opções de seleção de fontes, títulos, subtítulos, textos de destaque e textos descritivos. 
1º  Acesse o menu de Aparência clique em Meus temas e em Personalizar.

2º  Acesse a aba de Configurações clique na seção de Fontes.

3º Faça as alterações desejadas e clique em salvar.

Para o modelo DCNutrition siga as configurações abaixo: 

• Menus: Bai Jamjuree.
• Títulos: Bai Jamjuree.
• Destaques: Bai Jamjuree.
• Textos: Roboto.

Configurando as cores

As configurações desta seção definem o padrão de cores de sua loja.

1º Acesse o menu de Aparência clique em Meus temas e em Personalizar.

2º Acesse a aba de Configurações clique na seção de Cores.

3º Insira as configurações desejadas e clique em salvar.

Para o modelo DCNutrition siga as configurações abaixo: 

• Cor padrão principal: #2c2c2c
• Cor padrão secundaria: #7eba2c
• Cor de bordas e divisórias: #e1e1e1
• Cor padrão de destaque: #7eba2c
• Cor do botão comprar: #7eba2c
• Cor do texto do botão comprar: #ffffff
• Cor dos textos: #242424

Vitrine de produtos 

Nas configurações da vitrine de produtos você poderá ajustar o formato de imagem da vitrine de produtos, forma de compra, texto do botão de compra, formato de exibição de preço entre outros.

1º Acesse o menu de Aparência clique em Meus temas e em Personalizar.

2º Acesse a aba de Configurações clique na seção de Cores.

3º Insira as configurações desejadas e clique em salvar.

Para o modelo DCNutrition siga as configurações abaixo: 

• Exibição de produtos na listagem: Cores lado a lado. 
• Estilo de botão do produto: Exibir botão com compra direta.
• Ao adicionar o produto no carrinho: Permanecer na mesma tela.
• Texto do botão de compra: Comprar.
• Texto para produtos sem estoque: Detalhes.
• Opções de exibição de preço: Exibir cartão de credito e boleto.
• Destaque no preço (Somente com cartão e boleto): Boleto & Cartão de crédito.

Ajustando os selos

Os selos são representações visuais, como por exemplo, o selo de desconto e lançamento, que são nativos da sua loja.
Você pode configurar o visual dos seus selos conforme as instruções abaixo. 

1º Acesse o menu de Aparência clique em Meus temas e em Personalizar.

2º Acesse a aba de Configurações clique na seção de Selos.

3º Insira as configurações desejadas e clique em salvar.

Para o modelo DCNutrition siga as configurações abaixo: 

• Formato do selo: Redondo.
• Tamanho da fonte: 13px.
• Cor da fonte: #ffffff.
• Cor de fundo: #b410cb. 

• Tempo máximo de exibição do selo: 15 dias.

• Tamanho da fonte: 10px

• Cor da fonte: #ffffff.

• Cor de fundo: #323435.

• Descontos de Grupos: 

• Cor da fonte:#2c2c2c.

• Cor de fundo: #f3f3f3.

• Tamanho da fonte: 12px

Estilo customizado

No modelo de loja DCNutrition foram configurados códigos de CSS para personalização, esses códigos estão disponíveis na aba de estilo customizado do menu aparência.
Caso você tenha conhecimento de CSS pode inserir códigos que irão sobrescrever os já existentes na interface da loja.

1º Acesse o menu de Aparência clique em Meus temas e em Personalizar.

2º Acesse a aba de Configurações clique na seção de Estilo Customizado (CSS). 

3º Insira as configurações desejadas e clique em salvar.

Favicon e share

O Favicon é o ícone exibido ao lado do título da loja, e a Share é exibida quando o usuário compartilha o endereço da loja em redes sociais como Facebook ou no Whatsapp.
1º Acesse o menu de Aparência clique em Meus temas e em Personalizar.

2º Acesse a aba de Configurações e clique na seção de Favicon & Share. 

3º Insira as configurações desejadas e clique em salvar.

Para o modelo DCNutrition siga as configurações abaixo: 

• Dimensões do Favicon: 256x256px.
• Extensão do Favicon: .jpg.
• Dimensões do Share: 1200x628px. 
• Extensão do Share: .jpg. 

Redes sociais

Você pode inserir links para suas redes sociais, eles serão exibidos no cabeçalho e no rodapé da sua loja.

1º Acesse o menu de Aparência clique em Meus temas e em Personalizar.

2º Acesse a aba de Seções e clique na seção de Redes sociais. 

3º Insira as configurações desejadas e clique em salvar.

Checkout 

Configure o Checkout para definir o visual da página de compra, selecionando o logo, as cores e as informações de contato que serão exibidas, cadastre também uma imagem de fundo. 

1º Acesse o menu de Aparência clique em Meus temas e em Personalizar.

2º Acesse a aba de Seções e clique na seção de Checkout. 

3º Insira as configurações desejadas e clique em salvar.

Para o modelo DCNutrition siga as configurações abaixo: 

• Logo aplicado em fundo escuro: Insira aqui o seu logo para as áreas escuras da página de Checkout.
• Logo aplicado em fundo claro: Insira aqui o seu logo para as áreas escuras da página de Checkout.
• Tamanho máximo do logo em px: 60
• Tamanho máximo do logo mobile em px: 40
• Produtos do carrinho: Marque essas opções para exibir a referência do produto e o selo de envio imediato ou venda sob encomenda.
• Banner: Insira uma imagem para o Banner exibido no Checkout
• Link do banner: Insira um link para que seu cliente seja redirecionado caso clique no Banner.
• Abrir em nova aba: Marque essa opção para que seu cliente seja direcionado para uma nova aba ao clicar no Banner.
• Dimensões da imagem de fundo: 1400x800px.
• Extensão recomendada para a imagem de fundo: .jpg.

Editando o Cabeçalho

Você pode editar o cabeçalho cadastrando o seu logo, ícones customizados para a busca, minha conta e carrinho de compras.

1º Acesse o menu de Aparência clique em Meus temas e em Personalizar.

2º Acesse a aba de Seções e clique na seção de Cabeçalho. 

3º Insira as configurações desejadas e clique em salvar.

Para o modelo DCNutrition siga as configurações abaixo: 

• Estilo do conteúdo: Centralizado.
• Estilo do cabeçalho: Logo centralizado/ menu abaixo. 
• Exibir a busca de produtos: Marque essa opção para que o buscador de produtos fique visível na sua loja. 
• Transparência do cabeçalho: 0.
• Intensidade da borda: 3.
• Cor de destaque: #000000.
• Estilo do cabeçalho mobile: Busca em tela cheia. 

• Tamanho máximo do logo do cabeçalho fixo em px: 40

• Estilo do cabeçalho fixo: Simplificada.

• Logo aplicado em fundo claro: Insira o seu logo para os fundos claros.
• Logo aplicado em fundo escuro: Insira o seu logo para os fundos escuros.
• Logo mobile: Insira o logo que ficará visível pelo celular.  
• Tamanho máximo do logo em px: 50.
• Tamanho máximo do logo mobile em px: 50. 
• Texto de alerta: Marque a opção exibir texto de alerta.
• Cor de fundo: #3b3b3b.
• Cor de texto: #8d8f91.
• Fundo de departamento: #7dba2d. 
• Cor de departamento: #ffffff.
• Dimensões da imagem de logo: Até 300px de largura, até 200px de altura.
• Extensão da imagem dos logos: .jpg.
• Dimensões dos ícones customizados: 80px x 80px.
• Extensão dos ícones customizados: 80px x 80px. 
• Dimensões do Banner de menu: 600x400 px. 
• Extensão do Banner de menu: .jpg.

Banners em carrossel

Os Banners são as imagens de destaque em sua loja. Você também pode cadastrar Banners em formato de gif animados ou vídeos do youtube, inserir textos de título, descrição e botão de ação.

1º No menu de Aparência clique em Meus temas e em Personalizar.

2º Acesse a aba de Seções e clique na seção de Cabeçalho.

 3º Insira as configurações desejadas e clique em salvar.

Para o modelo DCNutrition siga as configurações abaixo: 

• Dimensões da imagem de desktop: 1600x500.
• Extensão da Imagem de desktop: .jpg.
• Dimensões da imagem mobile: 600x900px.
• Extensão da imagem mobile: .jpg.
• Dimensões da Imagem de fundo da seção: 1400x800px.
• Extensão da Imagem de fundo da seção: .jpg.

Mini banners com texto

Os mini banners podem ser utilizados para informar as opções de pagamento, promoções de frete, certificados de qualidade dos seus produtos e de segurança.
Você também terá a opção de cadastrar uma imagem de fundo nessa seção.

1º No menu de Aparência clique em Meus temas e em Personalizar.

2º Acesse a aba de Seções e clique na seção de Mini banner com texto.

3º Insira as configurações desejadas e clique em salvar.

Para o modelo DCNutrition siga as configurações abaixo:

• Classe customizada para editar o css: comerciais-inicial.
• Estilo do conteúdo: Centralizado.
• Quantidade de banners por linha no mobile: 1.
• Alinhamento da imagem: Imagem ao lado do texto.
• Dimensões da imagem: 80x80px.
• Extensão da imagem: jpg.
• Dimensões da imagem de fundo da seção: 1400x800px.
• Extensão da imagem de fundo da seção: .jpg.

Inserindo banners em grid no e-commerce

Os banners em grid são utilizados para destacar uma seleção de produtos, categorias ou promoções de sua loja.

1º No menu de Aparência clique em Meus temas e em Personalizar.

2º Acesse a aba de Seções e clique na seção de Banners em grid.

3º Insira as configurações desejadas e clique em salvar.

As dimensões abaixo correspondem ao modelo DCNutrition, utilize o estilo 01 de diagramação com uma imagem principal e dois blocos de imagens.

• Estilo do conteúdo: Centralizado.
• Estilo de exibição dos banners: Estilo 1.
• Alinhamento do banner principal: Selecione.
• Espaçamento entre os banners: 3.
• Dimensões da imagem principal: 583x410px.
• Extensão da imagem principal: .jpg.
• Dimensões do Bloco 01: 02x201px.
• Extensão do Bloco 01: .jpg.
• Dimensões do Bloco 02: 602x201px.
• Extensão do Bloco 02: .jpg.
• Dimensões da Imagem de fundo da seção: 1400x800px.
• Extensão da Imagem de fundo da seção: .jpg.

Inserindo vitrine com contador superior

Utilize essa opção para inserir um contador de tempo regressivo para o encerramento da promoção.  Nesse campo não é necessário o cadastro de imagens, apenas dos produtos. 

1º No menu de Aparência clique em Meus temas e em Personalizar.

2º Acesse a aba de Seções e clique na seção de Banners em grid.

3º Insira as configurações desejadas e clique em salvar.

• Título: Insira um título, como por exemplo o utilizado no modelo DC; Oportunidades da semana. 
• Subtítulo: Insira um subtítulo, como por exemplo o utilizado no modelo DC; Promoções por tempo limitado.
• Busca automática: Selecione aqui os produtos que você deseja inserir na vitrine. 
• Dimensão da imagem de fundo da seção: Insira uma imagem com a dimensão de 1400x800px
• Extensão da imagem de fundo da seção:.jpg.

• Estilo do conteúdo: Centralizado.

• Habilitar slider: Essa opção faz com que os produtos da página sejam alternados automaticamente.

• Quantidade máxima de produtos por linha: 4.

• Cor do subtítulo: #7eba2c

• Cor de fundo do contador: #ffffff

• Imagem fixa de fundo: Selecione essa opção para manter uma imagem de fundo.

• Espessura da borda de seção: 0.

• Espessura da borda do contador: 2.

• Margem de cima da seção: 6.

• Margem de baixo da seção: 6.

Importante! Caso você altere para outro estilo as dimensões recomendadas também serão alteradas.

Inserindo vitrine de produtos com abas

O cadastro de vitrines com abas facilita a navegação do usuário, pois reúne os produtos em grupos. Nesse campo não é necessário o cadastro de imagens, apenas dos produtos.

1º No menu de Aparência clique em Meus temas e em Personalizar.

2º Acesse a aba de Seções e clique na seção de Vitrine de produtos com abas.

3º Insira as configurações desejadas e clique em salvar.

• Estilo do conteúdo: Centralizado.
• Cor da aba selecionada: #7dba2d
• Cor de texto do botão:#ffffff
• Cor de fundo do card de produto: #ffffff
• Espessura da borda de seção: 0
• Margem de cima da seção: 6
• Margem de baixo da seção: 6
• Dimensões da imagem de fundo da seção: 1400x800px. 
• Extensão da imagem de fundo da seção: .jpg. 
• Busca automática: Selecione aqui os produtos que você deseja inserir na vitrine. 

 Inserindo banners 

Destaque produtos, categorias ou promoções de sua loja em banners. Não existe um tamanho padrão para os banners, o ideal é que todos os banners da seção tenham a mesma dimensão em pixels..

1º No menu de Aparência clique em Meus temas e em Personalizar.

2º Acesse a aba de Seções e clique na seção de Banners.

3º Insira as configurações desejadas e clique em salvar.

Para o modelo DC Nutrition utilize as configurações abaixo:

• Estilo do conteúdo: Centralizado.
• Quantidade de banners por linha:3.
• Quantidade de banners por linha no mobile:2. 
• Espaçamento entre os banners: 4.
• Espessura da borda de seção: 0.
• Margem de cima da seção: 5.
• Margem de baixo da seção: 5.

• Dimensão da Imagem: 400x400px.
• Extensão da imagem: .jpg.
• Dimensão da imagem de fundo da seção: 1400x800px.
• Extensão da imagem de fundo da seção: .jpg.

Inserindo uma Vitrine de produto

Insira seus produtos na vitrine para que eles fiquem em destaque na página de sua loja. Nesta seção não é necessário nenhum cadastro de imagens, apenas dos produtos.

1º No menu de Aparência clique em Meus temas e em Personalizar.

2º Acesse a aba de Seções e clique na seção de Vitrine de produto.

3º  Insira as configurações desejadas e clique em salvar.

Para o modelo DCNutrition siga as configurações abaixo:

• Título: Insira um titulo para sua vitrine, como por exemplo o título utilizado na DC; Lançamentos.
• Busca automática: Selecione aqui os produtos que você deseja inserir na vitrine.
• Estilo do conteúdo: Centralizado.
• Quantidade máxima de produtos por linha: 4.
• Quantidade máxima de produtos por linha mobile: 2.
• Habilitar carrossel: Selecione essa opção para que os banners sejam alternados automaticamente.
• Espessura da borda de seção: 0.
• Margem de cima da seção: 10.
• Margem de baixo da seção: 10.
• Dimensão da imagem de fundo das seções: 1400x800px.
• Extensão da imagem de fundo das seções: .jpg.

Inserindo vídeos

Dentro da página você pode inserir vídeos através do youtube. Assim como nas outras seções, você pode selecionar uma cor de fundo ou uma imagem de fundo para a seção.

1º  No menu de Aparência clique em Meus temas e em Personalizar.

2º  Acesse a aba de Seções e clique na seção de Vídeos.

3º  Insira as configurações desejadas e clique em salvar.

Para o modelo DCNutrition siga as configurações abaixo:

• Título: Insira aqui o título do vídeo, como no exemplo da DC Nutrition; Desistir ou resistir?. 
• Subtítulo: Insira o subtítulo do vídeo cadastrado, como no exemplo da DC Nutrition; Insira vídeos do Youtube. 
• Link do vídeo no YouTube: Insira o link do vídeo desejado.
• Proporção do vídeo: Para o modelo DC Nutrition foi utilizada a opção 16:9.
• Dimensão do vídeo: 12.
• Cor do título:#ffffff.
• Cor do subtítulo: #ffffff.
• Cor do botão: #7db92c.
• Cor da máscara: #224755. 
• Dimensões da imagem de fundo da seção: 1400x800px.
• Extensão: Utilize a extensão .jpg.
• Transparência da máscara: 0.
• Espessura da borda de seção: 0.
• Margem de cima da seção: 10.
• Margem de baixo da seção: 10.

Inserindo as últimas postagens do blog

Esta seção exibe as últimas postagens cadastradas no blog da sua loja virtual. Cadastre as ultimas postagens do blog conforme as instruções abaixo
No modelo DCNutrition são exibidas as 3 últimas postagens, mas você pode exibir até as 6 últimas.

1º Acesse o menu de Aparência e clique em Personalizar. 

2º Acesse a aba de Seções e clique na seção de Ultimas do blog.

3º Insira as configurações desejadas e clique em salvar.

Para o modelo DCNutrition siga as configurações abaixo:

• Título: Insira aqui o título da seção, no exemplo da DC Nutrition foi utilizado: Você sempre saudável.
• Subtítulo: Insira aqui o título da seção, no exemplo da DC Nutrition foi utilizado: Confira algumas dicas em nosso blog de demonstração.
• Estilo do conteúdo: Centralizado.
• Quantidade de blocos por linha: 3.
• Número de postagens exibidas: 3.
• Imagem de fundo da seção: Para o modelo DC Nutrition utilize as dimensões: 1400x800px e a Extensão: .jpg.
• Espessura da borda de seção: 0.
• Margem de cima da seção: 8.
• Margem de baixo da seção: 8.

Inserindo a galeria de marcas

Você tem a opção de inserir as marcas com os logos cadastrados na página de sua loja. Essa seção pode ser cadastrada com imagem de fundo, além de outras configurações visuais como a quantidade de logos exibidos por linha ou navegação.

1º  No menu de Aparência clique em Meus temas e em Personalizar.

2º  Acesse a aba de Seções e clique na seção de Galeria de marcas.

3º  Insira as configurações desejadas e clique em salvar.

• Para o modelo DCNutrition siga as configurações abaixo:
• Título: Insira aqui o título de sua galeria, no modelo DC Nutrition o título utilizado foi; Encontre produtos por marca.
• Estilo do conteúdo: Centralizado.
• Habilitar slider: Selecione essa opção para que a exibição das marcas seja feita em carrossel.
• Quantidade máxima de marcas por linha: 6.
• Limite máximo de marcas: 250.
• Exibir apenas marcas com logo: Selecione essa opção para exibir apenas as marcas que você cadastrar o logo.
• Cor de fundo da seção: #fbfbfb.
• Dimensão da imagem de fundo da seção: 1400x800px
• Extensão da imagem de fundo da seção: .jpg.
• Espessura da borda de seção: 0.
• Margem de cima da seção: 7.
• Margem de baixo da seção: 7.

Inserindo o texto com imagem

No modelo DCNutrition utilizamos esta seção para exibir um texto informativo sobre a marca, você pode cadastrar um link na imagem, para que ao clicar seu cliente seja redirecionado a outra página, podendo inserir também mais blocos de imagem. 

1º No menu de Aparência clique em Meus temas e em Personalizar.

2º  Acesse a aba de Configurações e clique na seção de Texto com imagem.

3º Insira as configurações desejadas e clique em salvar.

Para o modelo DCNutrition siga as configurações abaixo:

• Classe customizada para editar o css: sobre-inicial.
• Estilo do conteúdo: Centralizado.
• Alinhamento da imagem: Esquerda.
• Quantidade de blocos por linha: 1.
• Cor da borda de seção:#7dba2d.
• Espessura da borda de seção: 6.
• Margem de cima da seção: 0.
• Margem de baixo da seção: 0.
• Dimensão das imagens: 640x590px.
• Extensão das imagens: .jpg.
• Dimensão da imagem de fundo da seção: 400x800px
• Extensão da imagem de fundo da seção: .jpg. 
• Título: Insira o título exibido no banner, como no exemplo da DC Nutrition: DC Nutrition.
• Descrição: Insira o texto que será exibido na imagem. 
• Texto do botão: Insira o texto exibido no botão da imagem, no exemplo da DC Nutrition foi utilizado; conheça. 
• Link do botão: Insira um link para o qual o cliente será direcionado ao clicar no botão.