Instruções para usar o modelo DC Nutrition no seu e-commerce
14 min
Criado por: Rafael Pinheiro em: 01/07/2020 11:43

Estas informações vão auxiliar você a criar as imagens utilizadas no modelo DCNutrition com dimensões e extensões recomendadas, evitando qualquer problema no momento de cadastro e gerenciamento da sua loja virtual. 

O que é um modelo de loja virtual

Um modelo de visual é uma pré-configuração no editor visual dentro do painel da Dooca Commerce para facilitar a criação do visual da sua loja virtual. É uma seleção de cores, fontes e seções escolhidas especificamente para o segmento, neste caso de suplementação e lifestyle fitness. Você pode editar qualquer informação, cor ou fonte deste modelo, assim como alterar ordenação ou adicionar seções, de acordo com a necessidade da sua loja virtual.

Lembramos que 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. 

Gerenciando o modelo do seu site de vendas

O cadastro de imagens nas dimensões e extensões recomendadas (.jpg, .png, .gif...), junto com as demais configurações e informações pré-cadastradas no modelo, garantem um visual semelhante e um bom funcionamento do site de vendas. 

Configurando às páginas do modelo DC Nutrition

Na aba de configurações do menu aparência, você seleciona a cor ou imagem de fundo da sua loja virtual. Inserindo uma imagem você tem algumas configurações de exibição desta imagem de fundo. Não existe um tamanho exato para esta imagem pois ela se adapta de acordo as configurações.

 

Imagem

 

Dimensões

Extensão

 

Imagem de fundo

 

1400x800px

.jpg ou .png

Selecionando as fontes da sua loja online

Na aba de configurações você poderá selecionar também as fontes que serão exibidas na sua loja. São 5 opções de seleção de fontes, entre menu, títulos, subtítulos, textos de destaque e de textos descritivos. 

Configurando as cores do seu e-commerce

As cores configuradas nesta seção serão as cores padrões da sua loja. Esta configuração serve para facilitar a personalização inicial de cores, existindo a necessidade de alteração de cor de fundo ou de elementos de alguma seção específica, existe a opção de cores dentro de cada seção, na aba aparência.

Vitrine de produtos da loja virtual

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. 

Ajustando os selos da sua loja online

Os selos de desconto e lançamento são selos nativos da sua loja. Nesta aba você configura o visual e como serão exibidos. Caso você queira criar um selo customizado você precisa utilizar o aplicativo “Selos Customizados”, consulte se o seu plano dá suporte a este aplicativo. 

Estilo customizado do e-commerce

Os códigos de CSS que foram utilizados para personalizar o modelo DCNutrition se encontram na aba de estilo customizado do menu aparência. Caso não tenha conhecimento em CSS recomendamos não alterar ou remover este conteúdo. Caso tenha conhecimento você pode inserir linhas de CSS que irão sobrescrever os códigos já existentes na interface da loja. 

Favicon e share da loja virtual

A imagem de favicon é exibida nas abas dos navegadores, ao lado do título da sua loja. Já a imagem de share é exibida quando o usuário compartilha o endereço da loja em redes sociais como Facebook ou no Whatsapp, o link compartilhado é acompanhado desta imagem.

 

Imagem

 

Dimensões Extensão

Favicon

256x256px

 

.png

 

 

Share

 

1200x628px

.jpg ou .png

Redes sociais no seu e-commerce

Os links inseridos nesta seção serão exibidos no cabeçalho e no rodapé da sua loja, de acordo com o estilo selecionado. 

Checkout da sua loja online

O ambiente do carrinho de compras, das telas de pagamento e da minha conta são ambientes diferentes das outras páginas da sua loja virtual. Em virtude disto você precisa selecionar o logo, as cores e as informações de contato que serão exibidas nas páginas da seção de checkout. A única imagem possível de cadastrar nesta seção é a de fundo da página.

Imagem

 

Dimensões

Extensão

Imagem de fundo

 

1400x800px

 

.jpg ou .png

Editando o cabeçalho do site de vendas

Cadastre o logo da sua loja em 4 versões, para aplicação em fundo claro, fundo escuro, o logo que será exibido no menu fixo e outro nos dispositivos móveis. Além disso você também pode cadastrar ícones customizados para a busca, minha conta e carrinho de compras. No modelo DC Nutrition foi cadastrado um banner no menu principal, para cadastrá-lo acesse em aparência menus, selecione a edição do menu principal, clique em editar um dos itens de menu e insira a imagem no campo banner.

 

Imagem

 

Dimensões Extensão
Logos

 

Até 300px de largura

Até 200px de altura

 

.svg .jpg .png ou .gif

Ícones customizados

 

80px x 80px

 

.svg .jpg .png ou .gif
Banner de manu

 

600x400 px

 

.jpg .png ou .gif

Inserindo banners em carrossel na sua loja online

Nesta seção você cadastra os banners de destaque da sua loja virtual. Você pode inserir até 6 blocos de imagens estáticas, gif animados ou vídeos do youtube. Podendo inserir textos de título, descrição e botão de ação. Com opção de cadastro de imagens específicas para dispositivos com telas maiores (desktop) e para dispositivos móveis (mobile). Você também terá a opção de cadastrar uma imagem de fundo na seção, na aba Aparência.

 

Imagem

 

Dimensões Extensão

 

Imagem desktop

 

1600x500 .jpg .png ou .gif

 

Imagem mobile

 

600x900px .jpg .png ou .gif

 

Imagem de fundo da seção

 

1400x800px  jpg ou .png

Inserindo mini banners com texto no site de vendas

Insira os diferenciais competitivos da sua loja, como por exemplo opções facilitadas 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 na seção, na aba Aparência.

Imagem

 

Dimensões

 

Extensão

Imagem

 

80x80px

 

.svg, .png, .jpg ou .gif

Imagem de fundo da seção

 

1400x800px

 

.jpg ou .png

Inserindo banners em grid no e-commerce

Destaque produtos, categorias ou promoções de sua loja em banners diagramados em grid. No modelo DCNutrition foi utilizado o estilo 01 de diagramação com uma imagem principal e dois blocos de imagens. As dimensões abaixo correspondem a este estilo, caso você altere para outro estilo as dimensões recomendadas também serão alteradas. Você também terá a opção de cadastrar uma imagem de fundo na seção, na aba Aparência.

Imagem

 

Dimensões

 

Extensão

Imagem principal

 

583x410px

 

.jpg .png ou .gif

Bloco 01

 

602x201px

 

.jpg .png ou .gif

Bloco 02

 

602x201px

 

.jpg .png ou .gif

Imagem de fundo da seção

 

1400x800px

 

.jpg ou .png

Inserindo vitrine com contador superior na loja online

Exiba produtos em promoção com contador de tempo regressivo para o encerramento da promoção. Nesta seção não é necessário nenhum cadastro de imagens, apenas dos produtos. Mas caso queira, você também terá a opção de cadastrar uma imagem de fundo na seção, na aba Aparência.

Imagem

 

Dimensões

 

Extensão

Imagem de fundo da seção

 

1400x800px

 

.jpg ou .png

Inserindo vitrine de produtos com abas no e-commerce

Facilite a navegação do usuário selecionando produtos em grupos (abas). Nesta seção não é necessário nenhum cadastro de imagens, apenas dos produtos.

Imagem

 

Dimensões

 

Extensão

Imagem de fundo da seção

 

1400x800px

 

.jpg ou .png

Inserindo os banners na plataforma para loja virtual

Destaque produtos, categorias ou promoções de sua loja em banners lado a lado. Não existe um tamanho exato para os banners, o ideal é que todos os banners cadastrados nesta seção tenham a mesma dimensão em pixels. Você pode inserir quantos banners quiser configurando o espaçamento entre eles e a quantidade de banners exibidos por linha. No modelo DCNutrition foi utilizado uma imagem de fundo em .png transparente com o logo do modelo, criando um efeito interessante de camadas na loja.

Imagem

 

Dimensões

 

Extensão

Imagem

 

400x400px

 

.jpg, .png ou .gif

Imagem de fundo da seção

 

1400x800px

 

.jpg ou .png

Inserindo uma vitrine de produtos do site de vendas

Destaque seus produtos na página inicial da sua loja. Nesta seção não é necessário nenhum cadastro de imagens, apenas dos produtos. Porém você terá a opção de cadastrar uma imagem de fundo na seção, na aba Aparência.

Imagem

 

Dimensões

 

Extensão

Imagem de fundo da seção

 

1400x800px

 

.jpg ou .png

Inserindo vídeo na plataforma para e-commerce

Insira um vídeo destaque previamente cadastrado no Youtube. Assim como nas outras seções, você pode selecionar uma cor de fundo ou uma imagem de fundo para a seção. No caso do modelo DCNutrition recomendamos utilização de uma imagem de fundo nas dimensões abaixo.

Imagem

 

Dimensões

 

Extensão

Imagem de fundo da seção

 

1400x800px

 

.jpg ou .png

Inserindo as últimas postagens do blog

Esta seção exibe automaticamente as últimas postagens cadastradas no blog da sua loja virtual. Vale lembrar que serão exibidas apenas as postagens que forem cadastradas no blog interno da sua loja, cadastradas no menu Conteúdo > Blog. No modelo DCNutrition são exibidas as 3 últimas postagens, mas você pode exibir até as 6 últimas.

Imagem

 

Dimensões

 

Extensão

Imagem de fundo da seção

 

1400x800px

 

.jpg ou .png

Inserindo a galeria de marcas na loja online

Exiba as marcas cadastradas no seu catálogo de produtos. Você tem a opção de exibir apenas as marcas com logos cadastrados, além de outras configurações visuais como a quantidade de logos exibidos por linha ou navegação horizontal de marcas. A única imagem que pode ser cadastrada nessa seção é a imagem de fundo.

Imagem

 

Dimensões

 

Extensão

Imagem de fundo da seção

 

1400x800px

 

.jpg ou .png

Inserindo o texto com imagem na plataforma e-commerce

No modelo DCNutrition utilizamos esta seção para exibir um texto informativo sobre a marca, com botão lincando para uma página interna. Esta seção está configurada apenas com um bloco de texto com imagem, mas você pode inserir mais blocos se desejar, tendo algumas opções de exibição destes blocos na aba aparência.

Imagem

 

Dimensões

 

Extensão
Imagem

 

640x590px

 

.jpg, .png ou .gif

Imagem de fundo da seção

 

1400x800px

 

.jpg ou .png
Últimos artigos visitados