Vous êtes sur la page 1sur 23

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
Código CSS 20
O Tema
O tema Convert é 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 ConvertShop 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:

• Banner Tarja (1140x48 pixels)

• Full Banner (1920x403 pixels)

• Mini Banner (Máximo de 3 imagens, sendo 360x225 pixels cada)

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

• 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)


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 da barra inicial no topo: Alterar a cor de fundo de todos as subcategorias do menu:
.barra-inicial { .menu.superior .nivel-dois {
background: #000000; background: #e5e5e5;
} }
Mudar a cor de fundo do menu, topo e menu fixo:
#cabecalho { Alterar a cor de fonte dos itens de todas as subcategorias:
background: #ffffff; .menu.superior .nivel-um>li a {
} color: #2c2c2c;
Alterar a cor da fonte do menu: }
.menu.superior .nivel-um>li a strong {
color: #2c2c2c; Alterar a cor da fonte no hover de todas subcategorias::
} .menu.superior .nivel-dois li a:hover {
Alterar a cor da fonte no hover: color: #ea1725;
.menu.superior .nivel-um>li a[title*="utlet"] strong, }
.menu.superior .nivel-um>li a[title*="OUTLET"] strong,
.menu.superior .nivel-um>li:hover a strong {
color: #ea1725;
}
Código CSS
Veja os códigos abaixo:
• Rodapé • Rodapé

Alterar a cor de fundo principal do rodapé:


Alterar as cores do texto no rodapé:
#rodape .institucional, .pagamento-selos {
background: #2c2c2c; #rodape .titulo, #rodape .row-fluid .span9 .span4.sobre-loja-
rodape p {
}
color: #ebebeb;
Alterar as bordas do rodapé: }

#rodape, .news #formNews .emailNews input, .news


#formNews .newsletter-cadastro button, .news ul li a, Alterar as cores dos links no rodapé / ícones de rede social:
.news::after { #rodape .links-rodape li a, #rodape .links-rodape li::before {
border-color: #444443; color: #ebebeb;
} }

Alterar a cor do ícone de newsletter:


.news .msg .icon svg {
fill: #000000;
}
Código CSS
Veja os códigos abaixo:
PREÇO DE VENDA DOS PRODUTOS VERSÃO MOBILE (Visualização no celular)
Alteração do preço de venda dos produtos na
listagem (preço antigo caso esteja em promoção): Cor de fundo do menu mobile:
. menu.superior{
.listagem .listagem-item .preco-produto s.preco-venda {
background: #ffffff;
color: #5e5c5c;
}
}
Alteração do preço de venda dos produtos na listagem Cor da fonte do menu mobile:
(preço atual):
.menu.superior .nivel-um>li a strong {
.listagem .listagem-item .preco-produto .preco- color: #2c2c2c;
promocional { Atenção: Todos os códigos do mobile
}
color: #5e5c5c;
devem estar dentro das chaves de um código
}
Cor da fonte das subcategorias do menu principal para que funcionem, sendo ele:
Alteração do preço de venda do produto na mobile:
página do produto: @media only screen and (max-width: 767px){ }
.menu.superior .nivel-um>li a {
.produto .acoes-produto .preco-produto.destaque-
color: #2c2c2c;
parcela:not(.com-promocao) div.preco-venda, .produto
.acoes-produto .preco-produto.destaque- } Ficando então:
parcela:not(.com-promocao) strong.preco-venda, .produto @media only screen and (max-width: 767px){
.acoes-produto .preco-produto.destaque-parcela .preco-
promocional { SEU CÓDIGO MOBILE AQUI
color: #2c2c2c;; }
}

Vous aimerez peut-être aussi