-
Sumário
O Tema
O Manual
Instalação
Layout da Loja
Disposições do Layout
Alteração das Cores
Produtos
Rodapé
Banners
Código CSS
Configurando as páginas do rodapé
03
03
04
06
07
09
10
11
12
17
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 da XtechEcommerce, 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.
-
Acesse: Layout > Loja de Temas > Meus Temas > Instalar
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.
Após realizar a instalação siga as próximas etapas do manual para
que seu tema seja configurado corretamente. A próxima etapa será
configurar o Layout da Loja.
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.
Instalação
-
Acesse: Painel > Layout > Editor de Tema
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:
• Modo offine ativado? : Não
• Loja mobile ativado : Não
Nas parte das cores são áreas livres de escolha:
• Loja no Facebook
• Logo para loja
• Logo para fundo branco (logo do rodapé)
Layout da Loja – Disposição do Layout
-
Acesse: Painel > Layout > Editor de Tema > Editar layout1 > Configurações Gerais2 > Topo
Sendo assim, é obrigatório que em Disposição do layout as
configurações sejam:
• Essa loja é catalogo: Não
• Modelo do topo: Logo + Busca
• Topo Fluido : Não
• Topo: Ajustar distância do menu/pesquisa em relação a barra
do topo : 50
Nas parte das cores são áreas livres de escolha:
• Mudar Favicon do site
• Fonte Padrão da Loja
Layout da Loja – Disposição do Layout
-
Acesse: Painel > Layout > Editor de Tema > Editar layout > Cores
Nas parte das cores são áreas livres de escolha:
• Cor da barra do topo
• Cor do texto da barra do topo
• O Fundo do cabeçalho (area da logo)
• Cor da barra do Menu
• Cor do texto do Menu
• Fundo do rodapé
• Cor do texto do rodapé
• Cor do link quando passar o mouse(hover)
• Home: Cor do botão de ‘ver produto’
• Home:Cor do texto para botão de ‘ver produto’
• Produto: Cor para o botão de comprar
• Produto: Cor de texto para o botão de comprar
• Produto: Cor de selo de desconto
• Produto: Cor do texto do selo de desconto
Layout da Loja – Alteração das Cores
-
Acesse: Painel > Layout > Editor de Tema > Editar layout > Produtos
As configurações obrigatórias na parte do Produto são:
• Lista de Produtos Home: Quantos produtos por linha? :
Deixar por padrão o número 4
• Lista de Produtos Home: Qual a altura da foto dos produtos
(apenas número): Por padrão da plataforma, deixar o valor de
320
• Lista de Produtos Categoria: Quantos produtos por linha?:
Deixar por padrão o número 4
• Lista de Produtos Categoria: Qual a altura da foto dos
produtos (apenas número): 320
Estas áreas não ocorrerão no tema mesmo se modificadas.
Tais ajustes devem ser realizados via código CSS.
O ajuste livre são:
• Todas as outras áreas restantes, como Ativar troca de
imagem, ativar percentual de desconto, e ativar exibição de
valor à vista
Layout da Loja – Produtos
-
Acesse: Painel > Layout > Editor de Tema > Editar layout > Rodapé
As configurações obrigatórias na parte do Rodapé são:
• Rodapé Fluido (de ponta a ponta): Deixar por padrão
selecionado a opção ‘Não’
• Ativar troca de Idioma?: Deixar por padrão selecionado a
opção ‘Não’
• Powered by para fundo escuro?: Deixar por padrão
selecionado a opção ‘Não’
• Logo para Designed by/Link para Designed by: Deixar por
padrão em branco
O ajuste livre é:
• Todas as outras áreas restantes, dos icones de Pagamento e
Selos da Camara-e.net e eBit.
Layout da Loja – Rodapé
-
Acesse: Layout > Loja de Temas > Meus Temas > Download
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
-
Para realizar a edição dos arquivos do tema no Photoshop torne visível as camadas desativadas
Dica
-
Acesse: Painel > Layout > 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 (1920x403 pixels)
• Banner Tarja (1140x48 pixels)
• Mini Banner (Máximo de 3 imagens, sendo 360x225 pixels cada)
O Full Banner é cadastrado separado no caminho ‘Painel > Layout >
Banners, basta clicar no botão ‘Novo banner’ destacado na imagem
ao lado.
Os demais banners são cadastrados na parte do Editor do Layout,
mostrados no slide seguinte
Full Banner
-
Acesse: Painel > Layout > Editor de Tema > Editar layout > Banners
Itens obrigatórios para a estrutura correta dos banners:
• Banners: Fluido (de ponta a ponta ): Não
• Banners: Utilizar banners extras? : 3
Nas parte das cores são áreas livres de escolha:
• Banner Tarja Superior: Imagem – Acima do Slider
• Banner Tarja Superior: Link – Acima do Slider
• Banner Tarja Superior: Imagem – Abaixo do Slider
• Banner Tarja Superior: Link – Abaixo do Slider
• Banner Extra #1: Imagem
• Banner Extra #1: Link
• Banner Extra #2: Imagem
• Banner Extra #2: Link
• Banner Extra #3: Imagem
• Banner Extra #3: Link
Layout da Loja – Banners
LEGENDA: Banner Tarja = Banner Régua / Banner Extra = Mini Banners
-
Acesse: Painel > Layout > Editor de Temas > Ações > Editar HTML
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 HTML,
no arquivo ‘application.css’ destacado ao lado.
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 azul.
As customizações disponíveis são:
• Cores do botão da newsletter do rodapé
• Cores dos botões das redes sociais
• Cores dos demais botões da loja
• Cor do botão de pesquisa do cabeçalho
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:
Código CSS
Newsletter e redes sociais
Mudar a cor de texto do botão da newsletter:
.footer .news .box-form .news-form button {
color: #00baff;
}
Mudar a cor de fundo do botão da newsletter mobile:
@media screen and (max-width: 1024px){
footer .news .box-form .news-form button {
background: #00baff;
color: #fff
}Alterar a cor de fundo dos icones das redes sociais do rodapé e os hovers
.social-icons{background: #00baff;
}.social-icons:hover{
box-shadow: 0 0 0 21px #039ed8 inset;}
Configurações restantes que não são alteradas pelo painel
Alterar a cor dos demais botões da loja e os hovers
#store-content .btn-default, #store-content .btn-primary{
background: #000;
}
#store-content .btn-default:hover, #store-content .btn-primary:hover{
background: #242424;
}Alterar a cor do botão de pesquisa no cabeçalho
header #top-search .botao-busca svgFill: #00baff;
}
Atenção: Todos os códigos do mobile devem estar
dentro das chaves de um código principal para que funcionem, sendoele:
@media only screen and (max-width: 767px){ }
Ficando então:
@media only screen and (max-width: 767px){
SEU CÓDIGO MOBILE AQUI
-
Configurando as Páginas do Rodapé
-
Acesse: Painel > Layout > Páginas > + Nova página
Primeiramente iremos criar a página “PAI” que será responsável por todas as demais Páginas Extras de sua loja.
Para isto clique no botão “+ Nova página” para criar a estrutura que irá servir de cabeçalho para as demais páginas.
Siga para próxima página para ver as configurações corretas para criação da página de Nível Padrão.
Dica: As páginas extras podem ser páginas como por exemplo:
• Quem Somos
• Dúvidas Frequentes
• Políticas da sua loja (Entrega, Envio, Troca)
• Entre outras opções que ficam a seu critério e necessidade.
Menu para as páginas extras do Rodapé
-
Acesse: Painel > Layout > Páginas > + Nova página
Nesta etapa você irá inserir o “Título” que deseja exibir no rodapé de sua loja para receber as demais páginas extras e realizar as configurações para que
funcione corretamente.
• As seleções em VERDE são personalizáveis de acordo com a sua preferência e as seleções em VERMELHO devem ser feitas conforme apresentado nestemanual para que seu rodapé seja configurado corretamente.
• Depois de preencher as informações corretamente clique em Salvar e siga para próxima página para ver como criar suas páginas extras.
Menu para as páginas extras do Rodapé
Texto Obrigatório
Opção Obrigatória
-
Acesse: Painel > Layout > Páginas > + Nova página
Nesta etapa você irá preencher todas as informações de sua página extra e adicioná-la a categoria “PAI” que criamos anteriormente.
• As seleções em VERDE são personalizáveis de acordo com a sua preferência e as seleções em VERMELHO devem ser feitas conforme apresentado nestemanual para que seu rodapé seja configurado corretamente.
• Depois de preencher as informações corretamente clique em Salvar e siga para próxima página para ver um exemplo de preenchimento completo.
Criando Páginas Extras
Opção Obrigatória
-
Acesse: Painel > Layout > Páginas > + Nova página
Nesta etapa você irá preencher todas as informações de sua página extra e adicioná-la a categoria “PAI” que criamos anteriormente.
• As seleções em VERDE são personalizáveis de acordo com a sua preferência e as seleções em VERMELHO devem ser feitas conforme apresentado nestemanual para que seu rodapé seja configurado corretamente.
• Depois de preencher as informações corretamente clique em Salvar e siga para próxima página para ver como criar suas páginas extras.
Criando Páginas Extras
Opção Obrigatória
*não aceita acentos ou caracteres especiais
-
Acesse: Painel > Layout > Páginas > Ordenar páginas
Depois de criar sua página PAI e todas as suas páginas extras é hora de organiza-las na ordem que deseja que sejam exibidas no rodapé da sua loja.
Clique no Botão Branco “Ordenar páginas” para organizar suas páginas extras
Ordenando as páginas
-
Acesse: Painel > Layout > Páginas > Ordenar páginas
Ordenando as páginas
Clique sobre a página que deseja ordenar e a arraste e solte-a na posição desejada, a seta do seu mouse ficará com o formato de cruzeta como no
exemplo abaixo, após ordenar todas as suas páginas conforme sua preferência clique no Botão “Salvar” para manter as alterações e pronto, suas páginas
extras foram configuradas com sucesso e aparecerão no rodapé de sua loja.
-
Resultado final das Páginas do Rodapé