Instalação Acesse: Layout > Loja de Temas > Meus Temas > Instalar

(1)

(2)

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

04

06

07

09

10

11

12

17

20

(3)

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.

(4)

(5)

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ãoInstalar.

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.

(6)

(7)

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

(8)

Acesse: Painel > Layout > Editor de Tema > Editar layout

1 > Configurações Gerais

2 > 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

•Mudar Favicon do site

•Fonte Padrão da Loja

(9)

Acesse: Painel > Layout > Editor de Tema > Editar layout > Cores

•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

(10)

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

(11)

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.

(12)

(13)

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

(14)

Para realizar a edição dos arquivos do tema no Photoshop torne visível as camadas desativadas

(15)

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

(16)

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

•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

Layout da Loja – Banners

(17)

(18)

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.

(19)

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 svg

Fill: #00baff; }

Atenção:Todos os códigos do mobile devem estar

dentro das chaves de um código principal para que funcionem, sendo ele:

@media only screen and (max-width: 767px){ } Ficando então:

@media only screen and (max-width: 767px){

(20)

(21)

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.

(22)

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 emVERDEsão personalizáveis de acordo com a sua preferência e as seleções em VERMELHOdevem ser feitas conforme apresentado neste manual para que seu rodapé seja configurado corretamente.

• Depois de preencher as informações corretamente clique emSalvare 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

(23)

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.

• Depois de preencher as informações corretamente clique emSalvare siga para próxima página para ver um exemplo de preenchimento completo.

Criando Páginas Extras

(24)

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.

• Depois de preencher as informações corretamente clique emSalvare siga para próxima página para ver como criar suas páginas extras.

Criando Páginas Extras

Opção Obrigatória

(25)

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

(26)

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.

(27)

(28)