Neste manual vamos apresentar todas as configurações necessárias que precisam ser feitas dentro do painel administrativo da sua loja para que o tema seja completamente instalado.
Leia todo o conteúdo dessa documentação e siga os passo-a-passos para que seu tema seja instalado e configurado corretamente na sua loja.
Ao adquirir um novo tema com a Tray, ele é disponibilizado na sua loja em questões de minutos. A partir desse momento o tema é seu e você poderá fazer qualquer modificação que desejar. Porém, apesar do tema estar instalado, ele ainda não está visível publicamente ao seus clientes.
Para encontrar os temas adquiridos basta ir em Minha Loja > Design da Loja. Nessa seção você irá encontrar todos os temas já instalados na sua loja, visualizar qual tema está publicado e quais estão disponíveis para publicação, visualizar uma prévia de um dos temas que possui, e ainda fazer edições no seus temas. Esses últimos pontos veremos mais adiante.
Para editar o estilo do tema, vá em Minha loja > Design da Loja e clique em Editar Tema.
No menu Cores do Layout, é possível estilizar as cores principais do site, como cabeçalho, menu, inserir o logo do site, spot dos produtos e etc. Segue abaixo um exemplo.
OBS.: Lembre-se de que as cores do painel, devem ser salvas em Hexadecimal, exemplo: #333333. Para facilitar o uso de hexadecimal, utilize o site Google Color Picker para escolher as cores, segue o exemplo abaixo:
No Menu de Categorias do site, é possível cadastrar ícones representando cada departamento.
Para cadastrar os ícones deve-se instalar o aplicativo de Iconografia (gratuito).
Acesse o painel e clique em Meus Aplicativos, clique no botão Instalar novos Aplicativos e na barra de busca procure por Imagens na Categoria e Subcategorias.
Após esse processo, clique no botão Instalar aplicativo.
Segue a imagem do passo a passo abaixo.
Abra o Aplicativo acessando o menu Meus Aplicativos.
Uma lista de TODAS as categorias do site será apresentada. Clique no botão Criar e selecione uma CATEGORIA PRINCIPAL. O tema APENAS adiciona ícones nas Categorias Principais.
Após escolher a Categoria Principal, basta escolher o ícone e clicar em Salvar
OBS: Dimensões recomendadas dos ícones: 30 x 30 píxels
No menu Banner Régua, é possível ativar ou desativar a régua, estilizar as cores principais como cor de fundo, cor do título e cor do texto, inserir os ícones da régua (tamanho recomendado 45x45 pixels), inserir um título e um texto para cada ícone.
No menu Marcas, é possível ativar o componente, adicionar imagens de cada marca, um nome e um link (link e nome da marca não são obrigatórios). Dimensões sugeridas para a imagem da marca: 200 x 80 píxels.
No menu Vitrines, é possível ativar ou desativar as vitrines de Destaque, Novidades e Promoção, configurar seus títulos e a quantidade de produtos na vitrine. Segue um exemplo abaixo.
A Vitrine de Categorias é um pouco diferente, nele você consegue definir qual Categoria (através do ID da Categoria) será exibida em forma de carrossel e definir a quantidade total de produtos.
Como o carrossel de categorias tem um degradê de fundo, também é possível configurar as duas cores do degradê. Segue um exemplo abaixo:
Na Aba Redes Sociais, é possível configurar as seguintes URLs:
As redes apareceram no rodapé do site, conforme são cadastradas no painel.
Para editar os banners, basta acessar o painel e seguir o caminho Marketing > Banners da loja.
Para Cadastrar o Banner principal Desktop do site basta definir se ele será rotativo ou não, selecionar a imagem, ou as imagens caso ele seja rotativo, o link de cada banner (caso tenha) e o Local de exibição: Banner Home, depois clique em Salvar.
Dimensões do banner: 1920 x 600 pixels.
Segue o exemplo abaixo:
Clique para ampliar a imagem.
Para Cadastrar o Banner principal Mobile do site basta definir se ele será rotativo ou não, selecionar a imagem, ou as imagens caso ele seja rotativo, o link de cada banner (caso tenha) e o Local de exibição: Banner Home Mobile, depois clique em Salvar.
Dimensões do banner: 768x768 pixels.
Segue o exemplo abaixo:
Clique para ampliar a imagem.
Para Cadastrar o Banner Triplo do site basta definir ele como banner não rotativo, selecionar a imagem, o link do banner (caso tenha) e o Local de exibição: Extra 2, Extra 3 e Extra 4, depois clique em Salvar.
Dimensões dos banners: 490 x 350 pixels.
Segue o exemplo abaixo:
Clique para ampliar a imagem.
OBS.: Lembrando que cada Extra deve ser cadastrado separadamente, o exemplo acima é somente o cadastro do Extra 2.
Para Cadastrar o Banner Único Meio do site basta definir ele como banner não rotativo, selecionar a imagem, o link do banner (caso tenha) e o Local de exibição: Extra 5, depois clique em Salvar.
Dimensões do banner: 1360 x 400 pixels.
Segue o exemplo abaixo:
Clique para ampliar a imagem.
Para Cadastrar o Banner Único Meio Mobile do site basta definir ele como banner não rotativo, selecionar a imagem, o link do banner (caso tenha) e o Local de exibição: Extra 6, depois clique em Salvar.
Dimensões do banner: 992 x 700 pixels.
Segue o exemplo abaixo:
Clique para ampliar a imagem.
Para Cadastrar o Banner Duplo Baixo do site basta definir ele como banner não rotativo, selecionar a imagem, o link do banner (caso tenha) e o Local de exibição: Extra 7 e Extra 8, depois clique em Salvar.
Dimensões do banner: 650 x 325 pixels.
Segue o exemplo abaixo:
Clique para ampliar a imagem.
Lembrando que o exemplo acima é o cadastro apenas do banner Extra 7. Deve-se cadastrar o banner Extra 8 seguindo o mesmo exemplo acima.
Para Cadastrar o Banner do Carrossel de Categoria Desktop do site basta definir ele como banner não rotativo, selecionar a imagem, o link do banner (caso tenha) e o Local de exibição: Extra 11, depois clique em Salvar.
Dimensões do banner: 680 x 600 pixels.
Segue o exemplo abaixo:
Clique para ampliar a imagem.
Para Cadastrar o Banner do Carrossel de Categoria Mobile do site basta definir ele como banner não rotativo, selecionar a imagem, o link do banner (caso tenha) e o Local de exibição: Extra 10, depois clique em Salvar.
Dimensões do banner: 1920 x 700 pixels.
Segue o exemplo abaixo:
Clique para ampliar a imagem.
Para habilitar o componente de notícias, basta acessar o seguinte caminho pelo painel da tray: Marketing > Notícias da Loja > Configurações e após isso, clicar no botão Configurar notícias.
Após clicar no botão Configurar notícias, abrirá as configurações possibilitando habilitar ou desativar o componente de notícias. Segue o exemplo abaixo:
Em seguida no PAINEL DO TEMA clique em Recursos Extras e ative o componente de Notícias
Segue exemplo abaixo:
No painel do tema, ao acessar a aba Recursos Extras, você poderá ativar ou desativar o componente de LGPD (Lei Geral de Proteção de Dados Pessoais). Nele você poderá colocar uma mensagem avisando que o site utiliza coockies. Segue um exemplo abaixo:
Resultado:
No painel do tema, ao acessar a aba Recursos Extras, você poderá ativar ou desativar o componente de Mapa (Localização da Loja).
um endereço do Google Maps é uma maneira eficaz de fornecer localizações precisas e interativas aos destinatários. Para fazer isso, siga as etapas abaixo:
o Google Maps: Acesse o Google Maps em seu navegador.
Encontre o Local: Pesquise o endereço ou local que deseja incorporar.
Detalhes do Local: Clique com o botão direito do mouse (ou toque e segure, em dispositivos móveis) no local no mapa para abrir um menu de opções. Selecione "Compartilhar" ou "Compartilhar local".
Opção "Incorporar um Mapa": No menu de compartilhamento, procure a opção "Incorporar um Mapa" ou "Incorporar mapa". Clique nessa opção para abrir mais configurações.
Copiar o Código HTML: O Google Maps fornecerá um código HTML específico para incorporar o mapa. Clique na opção para copiar o código.
Colar o Código: Cole o código copiado no painel no campo "Código de incorporação do mapa" para que ele seja exibido. Segue um exemplo abaixo:
Resultado:
No painel do tema, ao acessar a aba Recursos Extras, você poderá ativar ou desativar o componente de Galeria. Nele você poderá colocar até 4 imagens, um link para cada imagem, o @ para o instagram (não é obrigatório), e o link para o instagram (obrigatório somente se você for colocar o @ do perfil). Segue exemplo abaixo:
Resultado:
Orientações sobre as edições no código.
Recomendamos criar uma cópia de segurança antes de editar os códigos HTML e CSS do seu tema. Assim, caso aconteça algum problema você poderá retornar rapidamente a um tema funcional.
Vale lembrar que a Superteia não se responsabiliza por problemas gerados devido a edição do código.
Somente edite o código do seu tema se tiver conhecimentos avançados em HTML, CSS e JS, caso contrário o tema poderá parar de funcionar na sua loja.
Após criar uma cópia de segurança, clique em Editar Html, abrirá uma página com o projeto e todos os arquivos. Para editar o CSS basta seguir os passos abaixo, clicar em Salvar e em seguida Publicar. OBS: Apenas publique após finalizar todas as alterações no CSS, para visualizar o projeto, basta voltar na página anterior e clicara em Visualizar na Loja.
