Manual de Instalação do Tema ConvertShop · Acesse: Layout > Loja de Temas > Meus Temas >...

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


• 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


• 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


• 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

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é


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


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 em Salvar e siga para próxima página para ver um exemplo de preenchimento completo.

Criando Páginas Extras



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 em Salvar e siga para próxima página para ver como criar suas páginas extras.

Criando Páginas Extras


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

Manual de Instalação do Tema ConvertShop · Acesse: Layout > Loja de Temas > Meus Temas >...

Documents

Transcript of Manual de Instalação do Tema ConvertShop · Acesse: Layout > Loja de Temas > Meus Temas >...