Customiza o template da tua loja através do Shopkit Theme Editor. Podes personalizar cores, tipografia, botões ou criar pop-ups para conseguires uma aparência única para a tua loja online.

Como customizar o template

No menu Aparência / Personalização é possível verificares qual o template que tens atualmente aplicado na loja, a data da última alteração e uma pré-visualização da tua loja em desktop e mobile.

Estão ainda disponíveis os botões:

• Personalizar - Permite aceder ao editor para customizar o template;
• Visitar loja - Permite visualizar a loja;
• Pré-visualizar - Possibilita pré-visualizar a loja com o template aplicado;
• Editar CSS - Dá acesso ao campo CSS para adicionar código;
• Editar Javascript - Dá acesso ao campo Javascript para adicionar código;
• Editar HTML - Dá acesso ao campo HTML para adicionar código.

Para aceder ao editor e customizar o template deves, no menu Aparência / Personalização, clicar em Personalizar. 

Dentro do editor também tens disponíveis os botões Personalizar, Pré-visualizar, Editar CSS, Editar Javascript, Editar HTML e Restaurar template, que permite reverter as customizações aplicadas para a aparência original do template.

Os botões com as setas permitem retroceder ou avançar nas alterações que efetuaste.

Podes ainda pré-visualizar a loja em ecrã completo, em mobile ou em desktop. O botão Atualizar permite atualizar a pré-visualização do editor para verificar as últimas alterações aplicadas à loja.

No botão Gravar template podes gravar as alterações finais e aplicá-las à tua loja. No botão com a seta tens disponível a opção Gravar versão que permite gravar até 25 versões do template que podes utilizar como backup ou para gravar estilos que tenhas aplicado ao template. As versões guardadas irão surgir na lista de opções disponível no mesmo botão.

O Shopkit Theme Editor está dividido em 3 menus principais:

• Definições gerais;

• Componentes;

• Secções.

Menu Definições gerais

O menu Definições gerais contém configurações base que permitem personalizar o template e está dividido em diversos submenus. 

Logotipo 

O campo Logotipo permite adicionar uma imagem do logotipo da tua marca. 

Na opção Altura do logotipo, podes ajustar a altura da imagem que tiveres adicionado.

Favicon: Possibilita inserir o logótipo da tua loja em tamanho reduzido que irá surgir no separador do teu browser. O tamanho do favicon tem de ser múltiplo de 48 pixels quadrados, por exemplo: 48 x 48 pixels, 96 x 96 pixels, 144 x 144 pixels, etc.

Podes saber mais sobre esta regra e outras informações sobre o favicon neste artigo de suporte do Google.

Cores

Os campos Cor base e Cor secundária permitem alterar o esquema de cores da tua loja. Podes selecionar uma cor ao clicar no botão de cor ou introduzir um código hexadecimal da cor que pretendes.

Cor base: A cor base é a cor dominante no template e vai ser aplicada a elementos-chave do design. A cor base estabelece o tom e a sensação geral da loja e deve ser escolhida para refletir a marca.

Cor secundária: A cor secundária é utilizada para complementar a cor base. É usada para elementos que precisam de ser diferenciados e ainda assim manter a harmonia visual. A cor secundária ajuda a criar hierarquia visual e a guiar o olhar do cliente para diferentes partes da loja.

Tipografia

Permite customizar as fontes (ou tipos de letra) utilizadas no template. Podes customizar os títulos principais, o corpo do texto, links e preços.

Cor do texto: Podes selecionar uma cor ao clicar no botão de cor ou  introduzir um código hexadecimal da cor que pretendes e definir a transparência da cor escolhida.

Tipo de letra: Permite selecionar um tipo de letra da listagem disponível.

Espessura de texto: Possibilita definir a espessura da linha da fonte.

Tamanho base: Podes deslizar na barra para aumentar ou diminuir o tamanho da letra.

Texto sublinhado: Se selecionares esta opção irá surgir um sublinhado por baixo do texto.

Layout

Permite configurar alguns aspectos relativos à disposição dos elementos na loja.

Ativar layout de largura total: Os elementos da loja vão ocupar a largura total da página, aproximando-se das margens externas.

Cantos redondos (gerais): Aplica cantos arredondados a certos elementos do template. 

Background: Possibilita definir uma cor de fundo de loja.

Imagem: Permite adicionar uma imagem de fundo de loja.

Listagem de produtos

Definições: Configura a ordenação e número de produtos apresentados nas páginas, entre outras definições da listagem de produtos. 

Filtros de produtos: Define quais os filtros de produtos que pretendes disponibilizar nas listagens de produtos.

Etiquetas: Customiza a posição das etiquetas, bem como as cores de fundo e de texto. Podes configurar as etiquetas de produtos “Sem stock”, “Brevemente”, “Promoção” e “Novidade”.

Redes sociais

Neste submenu podes adicionar os links das redes sociais do teu negócio. Ao adicionares links, os ícones das respetivas redes sociais surgem na loja online.

Estilos

Os estilos são designs pré-definidos que afetam elementos como cores, tipografia e algumas configurações de aparência como bordas, botões, cantos redondos, sombras, entre outros.

Ao selecionares um estilo este é aplicado à pré-visualização do template. Para aplicares o estilo à loja deves clicar, posteriormente, em Gravar dados.

Menu Componentes

O menu Componentes permite configurar elementos específicos da loja.

Navegação

Podes personalizar os menus de navegação da tua loja online. Adiciona, remove e altera a posição dos menus da loja sempre que precisares.

Na secção Definições podes configurar se pretendes mostrar os menus Todos os produtos, Todas as categorias e Todas as marcas.

Na secção Navegação principal e Navegação secundária podes gerir os menus que pretendes disponibilizar na tua loja.

Se pretenderes saber mais sobre como podes adicionar e gerir menus, consulta o nosso artigo de suporte Como adicionar menus e links de navegação.

Botões

Customiza os botões da tua loja online e define aspectos como a cor de fundo, cor do texto, cantos do botão e sombras.

O Botão primário é usado em ações principais da página, como por exemplo o botão Comprar, Subscrever e Finalizar compra. 

Por outro lado, o Botão padrão serve para ações secundárias e com menor relevância que o botão primário. São exemplos os botões Ver carrinho, Carregar mais e Ver wishlist.

Nos campos de cor, podes selecionar uma cor ao clicar no botão de cor,  introduzir um código hexadecimal da cor que pretendes e definir o valor de transparência.

Na secção Sombra dos botões podes definir cor, posição e efeitos de sombra a aplicar nos botões da loja.

Formulários

Neste submenu podes customizar os formulários existentes na tua loja online, como por exemplo, o formulário de contato ou de inscrição na newsletter.

Podes customizar a cor de fundo para os campos de preenchimento do formulário, a cor do texto, borda, espessura da borda, cantos dos campos de preenchimento do formulário e a margem interna entre o texto e o campo de preenchimento.

Caixas de informação

Customiza as caixas que surgem nas várias secções da loja. Existem 6 diferentes tipos de caixa:

• Caixa de destaque: Exemplo - resumo de encomenda no carrinho de compras;
• Caixa de padrão: Exemplo - aviso de que um produto se encontra sem stock;
• Caixa informativa: Exemplo - mensagem personalizada no carrinho de compras;
• Caixa de erro: Exemplo - aviso de e-mail ou password inválidos no login;
• Caixa de aviso: Exemplo - aviso de que o carrinho de compras foi atualizado;
• Caixa de sucesso: Exemplo - confirmação da inscrição do alerta de stock.

Podes customizar a cor de fundo das caixas, a cor do texto, borda, espessura da borda, cantos da caixa bem como a forma como a sombra é aplicada à mesma.

Cartões

Os cartões são componentes de design que agrupam informações relacionadas num elemento visual retangular, semelhante a um cartão. Os cartões podem conter diferentes tipos de conteúdo, como imagens, textos, botões e links. Um exemplo de cartão são as informações de produtos que surgem agrupadas nas listagens de produtos.

Nas Definições dos cartões podes efetuar várias configurações:

Alinhamento do texto: Podes escolher se pretendes o texto alinhado à esquerda, centro ou direita.

Aplicar sombra: Podes definir se os cartões surgem sem sombra, com sombra sempre visível ou com sombra visível na passagem do rato.

Efeito hover: Podes escolher a animação que surge quando o cursor passa por cima do cartão. 

Nas secções seguintes, podes ainda configurar a cor de fundo dos cartões, do texto, borda, espessura da borda, cantos do cartão, margem interna, bem como a forma como a sombra é aplicada aos mesmos.

Galeria de Imagens

Para saber como configurar a Galeria de imagens consulta o artigo de suporte Como configurar galerias de imagens e slideshows. Podes ainda configurar a cor da máscara das imagens, cor dos textos e cores do botão.

Na secção relativa ao Slideshow podes ajustar a altura do slideshow, velocidade dos slides, alinhamento vertical e horizontal das imagens e a posição das imagens.

Modals

Modals são janelas sobrepostas à página atual que mostram informações sem sair da página, como por exemplo janelas de avisos ou inscrição na newsletter.

Nas Definições das modals  podes efetuar várias configurações como modificar a cor de fundo ou background, cor de texto, espessura e cor de borda, cantos redondos e cor de máscara.

Na secção Sombra podes definir a sua cor, posição e efeitos de sombra a aplicar à modal.

Podes selecionar uma cor ao clicar no botão de cor,  introduzir um código hexadecimal da cor que pretendes e definir o valor de transparência.

Pop-ups

Consulta o artigo de suporte Criar e adicionar pop-ups na loja online para saber mais sobre como configurar pop-ups para a tua loja online.

Menu Secções

Neste menu é possível efetuar algumas configurações relativas a secções específicas da loja.

Cabeçalho

No submenu Cabeçalho podes efetuar algumas configurações relativas a cores, definições de cabeçalho e inserir o Anúncio de loja.

Rodapé

No submenu Rodapé podes mostrar/remover a marca Shopkit, inserir texto, customizar cores e adicionar imagens ao rodapé.

Homepage

Podes efetuar algumas configurações, tais como definir a homepage da tua loja, número de produtos ou categorias na homepage, blocos de destaque, entre outras configurações.

Produtos

Permite efetuar configurações de aparência relativamente aos produtos, como ativar o zoom da imagem de produto ou mostrar e ocultar informações de produtos como o SKU, código de barras, etc.

Categorias

Neste submenu podes definir o número de categorias por página e linha, na versão desktop e mobile da loja, bem como escolher o critério de ordenação das categorias.

Marcas

Configura o número de marcas por página, linha, na versão desktop e mobile da loja, e escolhe o critério de ordenação das marcas.

Blog

Permite definir o número de posts de blog a apresentar por página e por linha.

Páginas

Podes configurar a página Sobre nós para que o conteúdo ocupe a largura total da página e definir se pretendes mostrar o mapa de localização na página Contatos.

Checkout

Define se pretendes que o campo cupão de desconto surja no carrinho de compras. Podes ainda adicionar um aviso ou mensagem nas várias páginas do checkout, tais como o carrinho de compras.

Pesquisa

Define se pretendes que o campo pesquisa surja na tua loja. Podes ainda configurar se pretendes ativar as sugestões e filtros de pesquisa, bem como definir o critério de ordenação dos filtros.

Boas práticas de customização do template

Deixamos algumas dicas importantes que deves ter em conta na customização do template para criares uma boa experiência para o cliente ao visitar e navegar a tua loja online.

Espaçamento

O espaço em branco pode ajudar a separar visualmente as diferentes áreas da página e até mesmo os vários conteúdos da mesma área. Procura deixar algum espaçamento entre elementos para criar organização e evita utilizar textos demasiado grandes, pois poderá diminuir o espaço entre o texto e um outro elemento como um botão, por exemplo. O espaçamento também facilita a leitura e a compreensão da mensagem por parte do visitante.

Padrões e Consistência

Deves manter o padrão e a consistência dos elementos em toda a loja. Ícones, botões, cor e tipografia, por exemplo, devem ser padronizados para criar uma experiência coesa e contínua para os utilizadores.

Contraste

O contraste de cores é importante para uma boa experiência do utilizador para garantir que os visitantes da tua loja possam distinguir os vários elementos visuais e textuais. Uma imagem ou texto de baixo contraste pode dificultar a leitura em condições de muita ou pouca luz, por exemplo. Pessoas com deficiência ou alguma dificuldade visual, que podem ter maior dificuldade para ler textos em fundos com baixo contraste.

Hierarquia visual

Uma ordem de importância clara, ou hierarquia visual, ajuda os utilizadores a navegar mais rapidamente e a focar a atenção nas áreas mais importantes da loja. Também melhora a estética, criando uma sensação de ordem.

Podes criar uma hierarquia visual clara usando variações de tamanho, cor, contraste, espaçamento, posição e profundidade.

Tipografia

A tipografia é fundamental para tornar o conteúdo fácil de ler, por isso deves escolher a fonte certa e com o tamanho adequado para garantir que o conteúdo seja legível.

A tipografia também pode ser usada para criar hierarquia visual e destacar informações importantes. Por exemplo, um título pode ser escrito com uma fonte maior e em negrito para chamar a atenção do utilizador e destacar uma informação importante. Isto ajuda a guiar o utilizador através do conteúdo e a identificar rapidamente as informações relevantes.