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.
Conteúdos neste artigo
Como customizar o template
Aviso
Algumas configurações apenas estão disponíveis para alguns templates e o seu comportamento pode variar conforme o template aplicado.
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 clica em Personalizar, no menu Aparência / Personalização.
Dentro do editor também tens disponíveis os botões Pré-visualizar, Editar CSS, Editar Javascript, Editar HTML e Restaurar template, que permitem 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 refrescar a pré-visualização do editor para verificares as últimas alterações aplicadas.
No botão Publicar 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.
Aviso
Para aplicares à loja as alterações que efetuaste, deves sempre clicar em Publicar.
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 aspetos do template, tais como o logotipo, esquema de cores e tipo de letra.
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.
Paginação: Possibilta a customização da paginação no rodapé da loja.
Listagem de produtos
Permite configurar alguns aspetos relativos às listagens de produtos disponíveis em diversas páginas da tua loja, como por exemplo, a homepage ou a página Todos os 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 Publicar.
Menu Componentes
O menu Componentes permite configurar elementos específicos da loja, tais como cartões de produtos e categorias, formulários e pop-ups.
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 (ex. resumo de encomenda no carrinho de compras);
- Caixa de padrão: (ex. aviso de que um produto se encontra sem stock);
- Caixa informativa: (ex. mensagem personalizada no carrinho de compras);
- Caixa de erro: (ex. aviso de e-mail ou password inválidos no login);
- Caixa de aviso: (ex. aviso de que o carrinho de compras foi atualizado);
- Caixa de sucesso: (ex. 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 e cantos da caixa.
Na secção Sombra das caixas podes definir cor, posição e efeitos de sombra a aplicar nas caixas de informação da loja.
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 e páginas específicas da loja, como são exemplo a homepage e o carrinho de compras.
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.
Produto
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 e 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.
