Sumário

O Tema 03
O Manual 03
Instalação 04
Layout da Loja 06
Disposição do Layout 07
Cores predominantes 08
Botões 09
Estilo do Tema 10
Backgrounds 11
Fontes 12
Listagem de Produtos 13
Página do Produto 14
Monte sua Vitrine 15
Checkout 16
Banners 17
Configuração 20
Código CSS 25
O Tema
O tema Integra é um tema criado para os lojistas de diversos ramos de atuação. Com um design
objetivo, limpo e com foco totalmente para o produto. O Tema é extremamente leve com 100% de
FontIcons. Integrado com os Correios, os clientes poderão acompanhar seu pedido com o código de
rastreio através da loja.

O Manual
Este manual desenvolvido visa apresentar todas as configurações necessárias, dentro do
ambiente Loja Integrada, para que o tema seja instalado sem qualquer dificuldade.
É imprescindível a leitura atenta e completa de todas as etapas do manual, a fim de acatar
corretamente o tema em sua loja, uma vez que o layout possui uma determinada
composição no qual permite o seu funcionamento íntegro dentro da plataforma.
 Instalação
Acesse: Soluções > Temas

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 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 da Loja – Disposição do Layout
Acesse: Painel > Aparência > Visual da Loja

Iniciando 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.

Sendo assim, é 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

 Layout da Loja – Cores Predominantes
Acesse: Painel > Aparência > Visual da Loja

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

Estes campos não mudarão a cor de seu tema mesmo se

preenchidos. Tais alterações devem ser realizadas via código
CSS.
 Layout da Loja – Botões
Acesse: Painel > Aparência > Visual da Loja

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

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

Este campo não mudará a cor no tema. Tal alteração deve ser
realizada via código CSS.

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!
 Layout da Loja – Estilo do Tema
Acesse: Painel > Aparência > Visual da Loja

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.
 Layout da Loja – Backgrounds
Acesse: Painel > Aparência > Visual da Loja

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.
 Layout da Loja – Fontes
Acesse: Painel > Aparência > Visual da Loja

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

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.
 Layout da Loja – Listagem de Produtos
Acesse: Painel > Aparência > Visual da Loja

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.
 Layout da Loja – Página do Produto
Acesse: Painel > Aparência > Visual da Loja

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

Neste setor 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. Defina como quiser!
 Layout da Loja – Monte sua Vitrine
Acesse: Painel > Aparência > Visual da Loja

Para organizar a disposição dos seus produtos na home em

Monte sua vitrine você pode alterar:

• 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!
 Layout da Loja – Checkout
Acesse: Painel > Aparência > Visual da Loja

O último item, Checkout, você pode modificar:

• 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
Acesse: Soluções > Temas

A 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.
 Banners
Acesse: Painel > Aparência > Banners

Para cadastrar os banners em sua loja, apenas três seções estão

disponíveis visualmente no tema ConvertShop 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 de

imagens tais como:

• Logo para Marcas (tamanho sugerido: 143x104 pixels)

• Foto do Produto (tamanho sugerido: 1000x1000 pixels)

 Instagram
Acesse: Aparência > Incluir código HTML

A Integra vem com a funcionalidade de integrar a galeria de

imagens do Instagram com seu site.

Através deste recurso todas suas novas fotos postadas na rede

social, será apresentada neste carrossel de imagem.
 Instagram
Acesse: Aparência > Incluir código HTML

Para configurar o Instagram 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é:

<script>instagram('nomedoinstagram', 'tokendeacesso');</script>

Substitua o nomedoinstagram para o nome da sua conta

sem o @.

Substitua o tokendeacesso para o token gerado da sua

conta.

Para obter o valor token de acesso, é necessário acessar o

site http://instagram.pixelunion.net/ para geração do
código token. Antes de acessar o site acima, certifique-se
que está conectado em sua conta Instagram.
 Temporizador de Cupom de Desconto
Acesse: Aparência > Incluir código HTML

A 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.
 Temporizador de Cupom de Desconto
Acesse: Aparência > Incluir código HTML

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é:

<script>bannerPromocao("linkImagem", "18/12/2017",
"http://integrap.com.br/promo");</script>

Substitua o linkImagem para o link gerado no gerenciador de

arquivo.

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

 Código CSS
Acesse: 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 alguns

có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

• Cores 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.
 Código CSS
Veja os códigos abaixo:
Menu e Topo Menu

• Categorias Principais • Subcategorias

Mudar a cor de fundo do topo : Alterar a cor de todas as subcategorias do menu:

#cabecalho .conteiner > .row-fluid::before { @media screen and (min-width: 768px) {
background: #fff; .menu.superior .nivel-dois .column li:not(.com-filho) > a,
} .menu.superior .nivel-tres > li >a {
Mudar a cor de fundo do menu: background: #a6abb7;
@media screen and (min-width: 768px){ .menu.superior { }}
background: #00679a;
}} Alterar a cor do hover das subcategorias do menu:
Alterar a cor da fonte do menu: @media screen and (min-width: 768px){
@media screen and (min-width: 768px){ .menu.superior .nivel-dois .column li:not(.com-filho):hover > a,
.menu.superior .nivel-um>li>a { .menu.superior .nivel-tres > li:hover >a {
color: #fff;
background: #ff420e;
}}
Alterar a cor do fundo do link: }}
@media screen and (min-width: 768px){ .menu.superior .nivel- Alterar a cor de fonte dos títulos das categorias filhas:
um>li:hover>a, .menu.superior .nivel-um>li>a[title="outlet"]{ @media screen and (min-width: 768px){
background: #005c8a; .menu.superior .nivel-dois >li.com-filho > a {
}} color: #ff420e;
Mudar a cor de fundo do menu mobile: }} }
@media screen and (max-width: 767px) .header-mob, .box-links {
background: #00679a;
}
 Código CSS
Veja os códigos abaixo:
• Rodapé • Rodapé
Alterar a cor de fundo principal do rodapé:
#rodape .institucional, #rodape .pagamento-selos {
Alterar a cor de fundo da newsletter:
background: #1379b1;
} #rodape .news{
background : #145f8c;
Alterar as cores do texto no rodapé:
}
#rodape .news .msg .first,
Alterar as cores dos ícones de rede social:
#rodape .news .msg .last,
#rodape .lista-redes i{
#rodape .titulo,

#rodape .institucional .sobre-loja-rodape p, color: #ebebeb;

.links-rodape ul li a{ }
color: #fff;
Alterar a cor do fundo dos ícones de rede social:
}
#rodape .lista-redes i {
Alterar as cores do hover no texto do rodapé:

.links-rodape ul li a{
color: #145f8c !important;

color: #fff; }

}

Veja os códigos abaixo:
PREÇO DE VENDA DOS PRODUTOS
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 .preco-
produto s.preco-venda {
color: #a6aab5;
} a::before{
Alteração do preço de venda dos produtos na listagem
(preço atual):
.info-produto .preco-produto .preco-promocional, .preco-
produto .preco-a-partir .preco-venda:not(.titulo) {
color: #ff4410;
} button::after, .listagem-item .acoes-produto .botao-
Alteração do preço de venda do produto na
página do produto:
.produto .acoes-produto .preco-produto .preco-
promocional, .produto .acoes-produto .preco-
produto.destaque-parcela .preco-promocional {
color: #ff4410;
Código CSS
CORES DOS BOTÕES
Cor do botão:
. box-links a::before, #modalNewsletter .newsletter-
cadastro 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 .submit-
email.botao.principal::before, .banner-promocao .box-info
background: linear-gradient(90deg,#ff4510,#ff7125);
}
Cor do hover no botão:
.box-links a::after, #modalNewsletter .newsletter-cadastro
comprar::after, .identificacao .control-group
.botao.principal::after, .produto .principal .acoes-produto
.comprar a::after, .acao-editar .botao.grande::after,
.identificacao .control-group .submit-
email.botao.principal::after, .banner-promocao .box-info
a::after{
background: linear-gradient(90deg,#E85C1F,#F08725);
}