Documentação - Coleção Integra

Documentação Coleção Integra

Manual de instalação e uso da coleção Integra

Apresentação

Parabéns! Você acabou de adquirir um tema da Coleção Integra. Agrademos muito por escolher um dos nossos temas para ser a identidade visual da sua loja. Estamos trabalhando sempre para aprimorar nossos temas, e qualquer feedback é muito importante para nós.

Sinta-se a vontade para enviar comentários e sugestões de melhorias para nós, indicando no campo assunto do e-mail como Comentários e Sugestões da coleção Convert. Você também pode deixar comentários na loja de temas da Loja Integrada onde adquiriu esse tema.

Informamos que para melhor atendê-lo, todo o suporte, referente ao tema, será realizado exclusivamente via e-mail. Precisando de algum auxílio, basta clicar aqui e será redirecionado para a nossa página de suporte. Lá você poderá esclarecer dúvidas rapidamente em um dos nossos vários tópicos, e se ainda precisar, abrir um chamado conosco.

Agora, caso precise de algum suporte relacionado à plataforma Loja Integrada, entre em contato diretamente com eles através do chat, acesse a Central de ajuda ou a Comunidade LI, para que possa ser esclarecido de forma rápida e assertiva.

Aproveite todos os recursos que você pode ter e configure uma loja completa para seus clientes!

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. O tema foi desenvolvimento levando em consideração uma composição de layout pré-determinado. Ao final dessa documentação você conseguirá configurar e deixar o tema na sua loja como foi apresentado no momento da aquisição.

Instalação

Antes de iniciar as customizações no seu novo tema, é necessário instalá-lo na plataforma, para que adote o novo layout em sua loja.

Após a compra, acesse a área de Temas no painel, indo em: Soluções> Temas e em Meus Temas, clique sobre o botão Instalar .

Orientamos que aguarde cerca de 1h para que a aplicação do tema ocorra, pois, o visual pode não aparecer de imediato devido a caches de seu navegador de internet.

Atenção! Caso haja algum código CSS e/ou JavaScript já configurado em sua loja, é necessário que faça um backup dos arquivos e depois os remova. Assim você evita qualquer possível conflito com os códigos do tema.

Layout

A aba Layout da Loja de forma a iniciar as configurações básicas do tema, compreenda que as áreas em vermelho são obrigatórias para que os elementos do layout se comportem de maneira adequada dentro da plataforma, enquanto as destacadas em verde podem ser livremente alteradas sem prejudicar o visual de sua loja.

Atenção! Primeiramente, você deve acessar: Painel> Aparência> Visual da Loja.

É obrigatório que em Disposição do layout as configurações sejam:

  • Tamanho do Layout: Médio
  • Disposição do logotipo: Logo a Esquerda
  • Disposição dos itens da loja: Disposição 03
  • Disposição da coluna lateral: Sem coluna
  • Exibir menu superior
  • Compactar subcategorias do menu lateral

Em Cores Predominantes as configurações obrigatórias são:

  • Escolha a cor principal da sua loja: deixar o campo em branco
  • Escolha a cor secundária da sua loja: deixar o campo em branco

Na seção Botões, as obrigatoriedades são:

  • Cor padrão para os botões: deixar o campo em branco

As áreas livres de mudança são:

  • Texto do botão na Página de Produto
  • Defina a ação deste botão
  • Texto do botão na Listagem de Produtos
  • Defina a ação deste botão
  • Não mostrar o botão de listagem

Os textos a serem apresentados e as ações dos botões são de total escolha sua . Fique livre para personalizar!

A área de Estilo do Tema possui a seguinte obrigação :

  • Cor da área de conteúdo (contêiner): Cores claras

Esta é a melhor configuração de acordo com as cores do tema.

O ajuste livre é:

  • Altura máxima da imagem do produto

Defina a altura da imagem do produto dentro da página de detalhe.

As configurações obrigatórias na área de Backgrounds são:

  • Plano de fundo para toda a loja: Deixar a área em branco nas abas Cor e Imagem e sem qualquer seleção em Padrão
  • Plano de fundo para o cabeçalho: Deixar a área em branco nas abas Cor e Imagem e sem qualquer seleção em Padrão
  • Plano de fundo para o rodapé: Deixar a área em branco nas abas Cor e Imagem e sem qualquer seleção em Padrão

Estas áreas não ocorrerão no tema mesmo se modificadas. Tais ajustes devem ser realizados via código CSS.

Para as Fontes as configurações obrigatórias no painel são:

  • Fonte primária: não alterar
  • Fonte dos títulos: não alterar
  • Fonte Maiúscula: deixar o box desmarcado

Informação Importante As fontes utilizadas, bem como seus tamanhos e espessuras, são próprias do tema e já vem em seu código. As alterações desta área não serão consideradas.

Em Listagem de Produtos as configurações obrigatórias são:

  • Qtd de produtos por linha
  • Aplicar caixa de contorno aos produtos
  • Desejo mostrar imagens extras ao passar o mouse sobre o produto na listagem

Escolha aqui como os produtos irão se comportar visualmente em sua loja. As configurações utilizadas ocorrerão em sua loja sem prejudicar o tema.

Você pode ajustar como quiser os itens de Página do produto sendo eles:

  • Disposição das miniaturas do produto
  • Valor do produto em destaque
  • Exibir a quantidade em estoque disponível para compra
  • Exibir campo para alterar a quantidade que será adicionado ao carrinho

Nesta seção você decide como serão visualizadas as demais imagens do produto e qual tipo de destaque o valor dele terá. Todas essas informações são pertinentes a área interna de cada produto.

Para organizar a disposição dos seus produtos na home em Monte sua vitrine você pode alterar como quiser:

  • Lançamentos, Mais vendidos, Destaques, Por categoria
  • Quantos produtos mostrar?
  • Exibir os produtos em carrossel

Nessa seção você configura como os seus produtos aparecerão na home e quais categorias estarão em destaque. Escolha o melhor para a sua loja!

O último item, Checkout, você pode modificar como quiser os seguintes itens:

  • Solicitar login antes de iniciar o checkout
  • Defina os campos obrigatórios no cadastro
  • Inserir campo "Comentário" no checkout

Aqui você define algumas ações que podem ou não ocorrer quando o cliente finalizar a compra. Estabeleça da melhor forma e depois é só salvar!

Banners

Atenção! Acesse: Soluções> Temas.

A Coleção Integra vem com um kit de banners prontos para você customizar, destacando o que há de mais importante em sua loja.

Além dos arquivos de banners, você receberá também as fontes utilizadas no tema caso queira manter o padrão visual.

Para baixar o kit de banner, basta acessar a área de Meus Temas e clicar na seta que indica Arquivos para Download.

Esses arquivos são nativos do Adobe Photoshop , programa de edição de imagens, no qual recomendamos a utilização para executar as alterações.

Note que, para uma compactação melhor dos ficheiros, as camadas dos arquivos no Photoshop estão desativadas.



Atenção! Logo após o processo acima, você deve acessar: Painel> Aparência> Banners

Para cadastrar os banners em sua loja, apenas três seções estão disponíveis visualmente na coleção Convert sendo elas:

  • Full Banner (1660x540 pixels)
  • Mini Banner (Banner Line, sendo 1140x255 pixels)
  • Mini Banner (Banner Line 2 e Line 3, sendo 555x255 pixels cada)

As áreas de banner que não aparecerão em sua loja são:

  • Banner Tarja
  • Banner Vitrine
  • Banner Lateral Do Full Banner
  • Banner Lateral

Note que os banners cadastrados em áreas indisponíveis do tema não serão exibidos em sua loja.

Além disso, há outras áreas que também permitem a inclusão deimagens tais como:

  • Logo para Marcas (tamanho sugerido: 143x104 pixels)
  • Foto do Produto (tamanho sugerido: 1000x1000 pixels)

Configurações

Atenção! Primeiramente acesse: Aparência > Incluir código HTML.

A Coleção Integra vem com a funcionalidade de ativar um temporizador para seu cupom de desconto

Através deste recurso é possível configurar uma data de término para a contagem regressiva finalizar.

Para configurar o Temporizador de cupom de desconto em sua loja, é necessário inserir o código representado na imagem:

  • Será necessário incluir o código abaixo na área Código no rodapé:



  • Obs: Substitua o linkImagem para o link gerado no gerenciador de arquivo
  • Obs: Substitua a data 18/12/2017 para a data de finalização da promoção.
  • Substitua o http://integrap.com.br/promo pelo link que o cliente será direcionado ao clicar.
  • Para gerar o link no gerenciador de arquivo, acesse: Configurações > Upload de arquivos. Escolha um arquivo e envie.
  • Copie o valor gerado e substitua no código por linkImagem conforme a imagem abaixo:

Edição do código

Atenção! Primeiramente, você deve acessar: Painel> Aparência> Editar CSS.

As customizações de cor do tema de sua loja podem ser realizadas via painel através de código CSS, sendo necessário ao menos um conhecimento básico deste.

Essas inserções devem ser realizadas na seção de Editar CSS. Vale ressaltar que tais ajustes podem levar até 15 minutos para aparecerem ou, caso possua ao menos um produto no carrinho, tornam-se visíveis imediatamente.

Para facilitar a sua personalização, disponibilizamos a seguir algunscódigos a fim de auxiliar a customização básica de algumas áreas do layout. As cores utilizadas nos exemplos são tons de verde.

As customizações disponíveis são:

  • Cores do topo e menu
  • Cores das fontes do menu
  • Cores das subcategorias
  • Cores das fontes das subcategorias
  • Cor do preço de venda
  • Cor do rodapé




Atenção!

Altere somente os códigos de cores das estruturas a seguir. Outros ajustes podem prejudicar a exibição correta do tema.

Vale lembrar que a Netzee não presta suporte quando o site possui códigos externos.

Atenção! Ao copiar o código, não deve ser copiado a linha com a explicação:



  • Mudar a cor de fundo do topo :
    #cabecalho .conteiner > .row-fluid::before {
    background: #ffffff;
    }
  • Mudar a cor de fundo do menu:
    @media screen and (min-width: 768px){ .menu.superior {
    background: #00679a;
    }}
  • Alterar a cor da fonte do menu:
    @media screen and (min-width: 768px){
    .menu.superior .nivel-um>li>a {
    color: #fff;
    }}
  • Alterar a cor do fundo do link:
    @media screen and (min-width: 768px){ .menu.superior .nivel
    um>li:hover>a, .menu.superior .nivel-um>li>a[title="outlet"]{
    .menu.superior .nivel-um>li:hover a strong {
    background: #005c8a;
    }}
  • Mudar a cor de fundo do menu mobile:
    @media screen and (max-width: 767px) .header-mob, .box-links {
    background: #00679a;
    }
  • Alterar a cor de todas as subcategorias do menu:
    @media screen and (min-width: 768px) {
    menu.superior .nivel-dois .column li:not(.com-filho) > a,
    .menu.superior .nivel-tres > li >a {
    background: #a6abb7;
    }}
  • Alterar a cor do hover das subcategorias do menu:
    .@media screen and (min-width: 768px){
    .menu.superior .nivel-dois .column li:not(.com-filho):hover > a,
    .menu.superior .nivel-tres > li:hover >a {
    background: #ff420e;
    }}
  • Alterar a cor de fonte dos títulos das categorias filhas:
    @media screen and (min-width: 768px){
    menu.superior .nivel-dois >li.com-filho > a {
    color: #ff420e;
    }}
  • Alterar a cor de fundo principal do rodapé:
    #rodape .institucional, #rodape .pagamento-selos {
    background: #1379b1;
    }
  • Alterar as cores do texto no rodapé:
    #rodape .news .msg .first,
    #rodape .news .msg .last,
    #rodape .titulo,
    #rodape .institucional .sobre-loja-rodape p,
    .links-rodape ul li a{
    color: #fff;
    }
  • Alterar as cores do hover no texto do rodapé:
    .links-rodape ul li a{
    color: #fff;
    }
  • Alterar a cor de fundo da newsletter:
    #rodape .news {
    background : #145f8c;
    }
  • Alterar as cores dos ícones de rede social:
    #rodape .lista-redes i{
    color: #ebebeb;
    }
  • Alterar a cor do fundo dos ícones de rede social:
    #rodape .lista-redes i {
    color: #145f8c !important;
    }
  • Alteração do preço de venda dos produtos na listagem (preço antigo caso esteja em promoção):
    .preco-produto .preco-a-partir span, .info-produto .precoproduto s.preco-venda {
    color: #a6aab5;
    }
  • Alteração do preço de venda dos produtos na listagem (preço atual):
    .info-produto .preco-produto .preco-promocional, .precoproduto .preco-a-partir .preco-venda:not(.titulo) {
    color: #ff4410;
    }
  • Alteração do preço de venda do produto na página do produto:
    produto .acoes-produto .preco-produto .precopromocional, .produto .acoes-produto .precoproduto.destaque-parcela .preco-promocional {
    color: #ff4410; }
  • Cor do botão:
    .box-links a::before, #modalNewsletter .newslettercadastro button::before, .listagem-item .acoes-produto .botao-comprar::before, .produto .principal .acoes-produto .comprar a::before, .identificacao .control-group .botao.principal::before, .acao-editar .botao.grande::before, .identificacao .control-group .submitemail.botao.principal::before, .banner-promocao .box-info a::before{
    background: linear-gradient(90deg,#ff4510,#ff7125);
    }
  • Cor do hover no botão:
    .box-links a::after, #modalNewsletter .newsletter-cadastro button::after, .listagem-item .acoes-produto .botaocomprar::after, .identificacao .control-group .botao.principal::after, .produto .principal .acoes-produto .comprar a::after, .acao-editar .botao.grande::after, .identificacao .control-group .submitemail.botao.principal::after, .banner-promocao .box-info a::after{
    background: linear-gradient(90deg,#E85C1F,#F08725);
    }

Considerações finais

Nós apreciamos imensamente a opinião do usuário final de nosso tema, ou seja, você! Assim temos como saber exatamente o que podemos melhorar. Por isso, deixe sua sugestão ou ideia do que pode ser feito para que seu tema e manual supra todas as suas necessidades aqui.

Você finalizou todos os passos dessa documentação e seu tema já está configurado e disponível para seus clientes. Desejamos que sua loja decole com nosso tema e que todos os seus clientes apreciem seu novo design.

É um prazer tê-lo como cliente. Caso tenha ficado com alguma dúvida fique a vontade para entrar em contato com o nosso suporte clicando aqui.