Personalizar o design da loja

O logo, as cores, as fontes, os banners e a forma como os produtos aparecem na grade. Tudo se configura na seção Design da loja do menu lateral.

Passo a passo

1. No menu lateral, procure a seção Design da loja. Não é uma tela só: são oito telas separadas, cada uma com o próprio item no menu.
2. Entre na tela que corresponde ao que você quer mudar. A listagem está abaixo.
3. Edite. Quase todas as telas têm uma pré-visualização à direita que se atualiza enquanto você trabalha.
4. Toque em Salvar no rodapé da tela.
5. Recarregue a sua loja para ver a mudança.

As oito telas de Design da loja

Banners: qual medida usar

Não há uma medida obrigatória. A loja aceita qualquer resolução e se adapta à tela. O que importa é que todos os banners do carrossel tenham a mesma proporção, ou que você fixe uma altura. O próprio editor avisa quando detecta banners de formatos diferentes: "Os banners têm proporções diferentes. Para evitar problemas de exibição, use imagens com o mesmo formato ou defina uma altura fixa para o slider."

Entre em Design da loja → Banners. Acima da pré-visualização há dois botões, Desktop e Celular. O campo de altura que aparece abaixo muda conforme qual deles está selecionado:

• Altura desktop: a altura do carrossel em tela grande. Vai de 0 a 800 px. O valor sugerido do campo é 600.
• Altura celular: a altura do carrossel em celulares. Vai de 0 a 800 px. O valor sugerido do campo é 400.

Entender o que cada caso faz poupa metade dos problemas:

• Campo vazio: o banner é exibido na largura da tela e a altura vem da imagem. Nada é recortado, mas cada slide tem uma medida diferente e o carrossel salta de altura entre um e outro.
• Campo com um número: o banner tem exatamente essa medida e a imagem é recortada a partir do centro para preenchê-la. Todos os slides ficam iguais, mas se a imagem tiver outra proporção, um pedaço se perde.

Por isso, uma vez que você fixa a altura, convém exportar todas as imagens com essa mesma proporção: assim elas preenchem o espaço sem perder nada.

Se você deixar a altura de celular vazia, no celular é usada a de desktop. Uma altura pensada para uma tela larga, aplicada a um celular estreito, recorta muitíssimo. Se você fixar uma altura, fixe as duas.

Uma imagem diferente para o celular

Cada slide pode ter a própria imagem para celular, além da de desktop. Na linha do slide, no bloco 📱 Mobile, toque no retângulo pontilhado que diz MOBILE para enviá-la. Se depois você quiser removê-la, existe o botão Remover imagem mobile: o banner volta a usar a imagem de desktop.

Isso é o que resolve o caso de "o banner não fica bom no celular": uma imagem horizontal de desktop num celular estreito fica muito pequena. Com uma imagem mobile vertical ela aparece completa.

O editor também avisa quando elas faltam: "Alguns banners não têm imagem mobile. No celular, a imagem desktop será exibida, o que pode ficar diferente."

O que é possível enviar

• Imagens e vídeos, com o botão Adicionar imagem/vídeo.
• Vídeos do YouTube, com o botão Adicionar vídeo YouTube: você cola a URL do vídeo e ele entra como mais um slide.

O que você pode fazer com cada slide

Na lista Gerenciar Slides, cada linha tem:

• Um botão Visivel / Oculto para tirar um banner da loja sem apagá-lo.
• Setas para cima e para baixo para mudar a ordem dos slides.
• Um botão vermelho para excluí-lo.
• Link de destino: a URL para onde o comprador vai quando clica no banner. Se você deixar vazio, o banner não é clicável.
• Texto do botão: o texto do botão que aparece sobre o banner. Precisa de um link de destino para ser exibido.
• Conteúdo sobre o banner: texto com formatação em cima da imagem.

Se você vai usar texto ou botão em cima, convém que a imagem não traga texto embutido, para que não se sobreponham.

Não há controle de velocidade nem de rotação automática do carrossel, e também não é possível programar um banner por datas. Para tirar um de circulação, use o botão Oculto.

O banner de uma categoria

É outro banner, diferente do carrossel, e é enviado na ficha da categoria. No menu lateral, Catálogo → Categorias, abra a categoria e desça até Banner Promocional:

• Banner: a imagem ou vídeo promocional que aparece acima dos produtos daquela categoria. Aceita arquivos .mp4.
• Banner Mobile: uma imagem alternativa para celulares.
• Banner Link: para onde o comprador vai ao clicar.
• Banner Margen: o espaço ao redor do banner, em pixels.
• Banner Redondeado: os cantos arredondados do banner, em pixels.

Aqui também não há uma medida obrigatória. A categoria tem ainda a própria Imagem do Título, que substitui o texto do nome no cabeçalho, e a sua Imagem de Fundo, que aparece atrás dos produtos.

Grade de Produtos: quantos produtos por linha

Em Design da loja → Grade de Produtos:

• Produtos no desktop: de 1 a 6 produtos por linha. Por padrão 4.
• Produtos no celular: 1 ou 2. Por padrão 2.
• Altura da célula: a altura dos cartões, de 100 a 800 px. O valor sugerido é 300. Se você escrever um número fora desse intervalo, o campo o ajusta ao sair.
• Margem: o espaço entre produtos, de 0 a 50 px.

À direita há uma pré-visualização com botões Desktop e Celular para ver como fica antes de salvar.

Além disso, cada categoria pode sobrescrever esse número. Em Catálogo → Categorias, dentro da categoria, o campo Colunas define quantos produtos por linha aquela categoria em particular mostra. É o que você usa quando quer que uma seção mostre 4 por linha e o resto mostre 3.

Quando os produtos aparecem em tamanhos diferentes

É a reclamação mais comum depois de configurar a altura da célula, e a altura da célula sozinha não resolve. A causa é como a foto se acomoda dentro do cartão.

Vá em Design da loja → Cartão de Produto, seção Fotos de produtos, e ative Preencher cartão com a foto. A ajuda do próprio campo explica: "Se ativo, a foto ocupa o cartão inteiro e o excesso é cortado. Se inativo, a foto é exibida completa e pode deixar espaços em branco acima e abaixo."

Quando você ativa isso aparece Área prioritária ao cortar, com três opções: Topo, Centro e Abaixo. É a parte da imagem que é preservada quando há corte. Para fotos de modelos convém Topo, assim os rostos não são cortados.

Há uma segunda causa possível: se um produto está marcado como Destaque na ficha dele, o cartão ocupa o dobro do espaço na grade. Isso é de propósito, não um erro de configuração.

Cartão de Produto: os três badges

Em Design da loja → Cartão de Produto você envia três imagens. São imagens: não há campo de texto nem de cor para elas.

• Badge Mais Vendidos: aparece nos produtos mais vendidos. É automático, não se escolhe produto por produto. É desenhado no canto superior direito do cartão, com no máximo 50 × 50 pixels.
• Badge Novo: aparece nos produtos que você marcou como Novo na ficha do produto. É desenhado no canto superior esquerdo, com no máximo 50 pixels de largura.
• Badge Oferta: aparece nos produtos com oferta ativa. É desenhado no canto inferior direito, sobre uma caixinha branca, com no máximo 24 pixels de altura por 28 de largura.

Abaixo do Badge Oferta, se o produto tiver um texto de oferta preenchido, esse texto é exibido em vermelho. Essa cor é fixa no sistema e não pode ser mudada em nenhuma tela de configuração. Se você não quer ver vermelho no cartão, a única saída é deixar vazio o texto de oferta do produto e usar só a imagem do badge.

Na mesma tela está Estilo do Cartão, com o interruptor Sem borda, que tira a moldura do cartão e lhe dá uma sombra.

Cores e Fundo

São cinco cores mais uma imagem, agrupadas em três blocos:

• Cores do Cabeçalho: Cor do cabeçalho (o fundo da barra superior) e Cor do texto (o texto dessa barra). É aqui que se muda a cor do cabeçalho da página.
• Cor Principal e Categorias: Botões, banners e badges (a cor principal, aplicada em botões, barras de anúncio, selos de promoção e cabeçalhos de categoria) e Cor do texto em categorias.
• Fundo: Cor de Fundo e Imagem de Fundo da loja.

À direita há uma pré-visualização do cabeçalho e do rodapé que se atualiza enquanto você escolhe.

Tipografia

São três seletores de fonte:

• Texto Geral: os nomes de produtos, os preços e os textos da loja.
• Títulos e Botões: cabeçalhos, navegação, botões e títulos de categorias. Tem ainda um interruptor Bold.
• Descrições: as descrições de produtos e os textos secundários.

Marca

• Logotipo: o logo do cabeçalho. Ao enviá-lo, o sistema extrai as cores da imagem e as oferece como paleta nas demais telas.
• Adaptar logo para rodapé escuro: converte o logo para branco para que ele fique visível sobre o fundo escuro do rodapé.
• Favicon: o iconezinho da aba do navegador.

A barra de anúncio do cabeçalho

É a faixa que aparece no topo de tudo, em todas as páginas.

O texto NÃO se edita em Design da loja. Ele está no menu lateral, em Configuração → Comunicação. Ao entrar, a tela abre com Aviso no checkout selecionado; você precisa clicar em Anúncio do cabeçalho, que é o primeiro item da lista Seções da sua loja, à esquerda.

A faixa não tem cor própria. O fundo é a cor Botões, banners e badges de Cores e Fundo, e o texto fica branco sozinho, a menos que essa cor seja branca, caso em que o texto sai cinza escuro. Se você quer mudar como a faixa aparece, a única alavanca é essa cor, e mudá-la também altera os botões e os badges da loja inteira.

Coisas que não estão em Design da loja

• Página em construção: o interruptor está em Configuração → Geral, e se chama Página em construção.
• Moeda: o seletor Moeda está em Configuração → Geral, junto do fuso horário.
• Os modelos Catalogo Clasico, Catalogo Premium, Lookbook, Lista Compacta, Galeria e Catalogo Minimal não mudam o design da sua loja. São os modelos do Construtor de catálogo, o catálogo para download em PDF, CSV ou Excel que você monta em Catálogo → Construtor de catálogo.

O que não é possível fazer

• Não há pop-up nem janela modal ao entrar na loja. Essa função não existe. As alternativas reais são a barra de anúncio do cabeçalho, ou colocar o aviso como primeiro slide do carrossel.
• Não é possível montar um menu próprio no cabeçalho. As abas do cabeçalho são fixas: Pontos de venda, Como comprar, Quem somos, a página personalizada, um único botão personalizado, Contato e os ícones de redes. Cada uma aparece só se você tiver preenchido o conteúdo dela, e a ordem não pode ser mudada. Também não há submenus nem categorias como abas.
• Não é possível etiquetar produtos com texto e cores à escolha. Os únicos distintivos do cartão são os três badges de imagem descritos acima.

Passar para a loja nova

O VentasxMayor tem uma segunda geração de loja, que se monta com blocos e se edita ao vivo sobre a própria loja, com muito mais controles de design do que estas oito telas.

O lançamento é gradual e a ativação é feita pela equipe do VentasxMayor. Escreva para o suporte e nós preparamos para você.

Ela não é ativada pelo painel e não há um rascunho que você possa ir montando enquanto isso: o botão LOJA no canto superior direito só leva à sua loja atual. Quando eles tiverem ativado, esse botão passa a dizer EDITAR LOJA e abre o editor.

Se algo não aparece

• Você não encontra onde mudar uma cor ou o cabeçalho: está em Design da loja → Cores e Fundo, não em Marca nem em Banners.
• Você não vê o campo Altura celular: o campo muda conforme o botão Desktop / Celular que estiver selecionado acima da pré-visualização. Toque em Celular.
• Você apagou um banner e ele continua aparecendo: veja se você o marcou como Oculto em vez de excluí-lo, e se ele tem imagem mobile enviada à parte.
• O banner fica diferente no celular: falta a imagem mobile, ou os slides têm proporções diferentes e você não fixou a altura.
• Você mudou a altura da célula e os cartões continuam desiguais: falta ativar Preencher cartão com a foto em Cartão de Produto.
• Você não encontra a seção Design da loja no menu: verifique se o seu usuário tem a permissão de design. Ela se habilita em Configuração → Gerente, no grupo de permissões Loja.