Você está na página 1de 4

Manual do Tema Shop Icon

Ol lojista! Esse manual tem como objetivo auxiliar na personalizao do seu tema. Leia
atentamente e siga os passos a risca, boa sorte!
Antes de iniciar, leia algumas informaes importantes:

No prestamos suporte a qualquer alterao realizada nos cdigos e demais conguraes;


No prestamos suporte a plataforma;
Efetuamos alteraes de temas (cores, entre outras) mediante solicitao de oramento;
A integrando.se no responde pela Loja Integrada, sendo empresa parceira;
Qualquer falha tcnica no tema, por parte da integrando.se, entrar em contato.

INCLUINDO CONES NO MENU DE CATEGORIAS


Nvel de diculdade: Baixo
PASSO 1 - Categorias
Aps cadastrar as categorias no painel Loja Integrada, voc deve anotar o ID de cada uma.
Para isso, acesse seu painel, v em Produtos > Categorias e clique sobre a categoria.
Repare agora na URL de seu navegador, ex: https://app.lojaintegrada.com.br/painel/
catalogo/categoria/452204/editar. Anote o nmero destacado em vermelho, essa a ID de
sua categoria.

PASSO 2 - Escolhendo o cone


Para aplicar os cones nas categorias ns utilizamos o Font Awesome - http://fontawesome.io.
Basicamente ele um tipo de letra em formato de cones, escalveis e com possibilidade de
alterao de cor e outros efeitos em CSS. Mas, voc no precisa se preocupar com esses
dados tcnicos.
Acesse: http://fontawesome.bootstrapcheatsheets.com e visualize os cones que voc
poder usar em suas categorias. Escolha o icone de cada categoria e v para o prximo passo.

Fale com a integrando.se: hello@integrando.se

Manual do Tema Shop Icon

PASSO 3 - Anotando o cdigo do cone


Cada cone tem seu cdigo para utilizao no CSS, o que voc deve fazer pegar o cdigo do
seu icone escolhido. Para isso basta clicar em Copy (abaixo de cada icone) e depois em CCS
Rule. Assim voc ver o cdigo, por ex: \f108 (ver imagem abaixo).

PASSO 4 - Aplicando o cone


Com as IDs das categorias e seu respectivo cdigo do cone, voc deve acessar em seu painel
Minha Loja > Editar CSS.
No editor de texto, voc deve inserir a linha de cdigo abaixo, onde os textos destacados em
vermelho so respectivamente: ID e cdigo do cone.
.menu.superior .categoria-id-452069 .titulo:before { content: '\f108; }
Agora voc deve repetir essa linha de cdigo para todas as outras categorias.
Ateno! No altere nenhum caracter da linha de cdigo. Insira ela sempre no nal do cdigo
que estiver contido no editor, separando por espao, inclusive entre cada categoria.
Sendo assim seu cdigo nal deve car com essa aparncia:
.menu.superior .categoria-id-452069 .titulo:before { content: '\f108'; }

Fale com a integrando.se: hello@integrando.se

Manual do Tema Shop Icon

.menu.superior .categoria-id-452070 .titulo:before { content: '\f112'; }


.menu.superior .categoria-id-452071 .titulo:before { content: '\f050'; }
.menu.superior .categoria-id-452072 .titulo:before { content: '\f122'; }
.menu.superior .categoria-id-452073 .titulo:before { content: '\f010'; }
.menu.superior .categoria-id-452074 .titulo:before { content: '\f111'; }

MODIFICANDO O PADRO DE CORES DO TEMA


Nvel de diculdade: Alto
PASSO 1 - Escolhendo as cores
Primeiramente voc deve escolher as cores que faro composio de seu tema. Basicamente
voc precisa de uma cor base e dois tons da mesma: um claro e um escuro, j que
trabalhamos com degrads no tema em questo.
Aps a escolha das cores, voc precisa anotar o cdigo hexadecimal (ex: #0000) e o cdigo
RGB (ex: 1,128,150,1). Para descobrir esses valores voc pode utilizar algum programa de
edio grca (Photoshop, Illustrator, Corel, etc).
Caso voc no tenha conhecimento tcnico, voc pode realizar uma busca no Google: http://
goo.gl/9ScgiF.

PASSO 2 - Acessando seu CSS


Cada tema tem seu CSS personalizado. Para acessar seu CSS, voc deve visualizar o cdigofonte de sua loja (atravs do navegador), e localizar a tag <body class=
Trs linhas acima da tag Body voc vai localizar a chamada de seu CSS, ex: <link href="//
cdn.awsli.com.br/temas/2/5b286cac-4ba2-4ce6-a43c-b06515700296.css" rel="stylesheet"
type=text/css>.

Fale com a integrando.se: hello@integrando.se

Manual do Tema Shop Icon

Acesse ento em seu navegador o link do arquivo CSS (destacado em vermelho). Copie esse
cdigo para um editor de texto (recomendamos o Sublime - http://www.sublimetext.com).

PASSO 3 - Alterando as cores


Com o cdigo no editor de texto voc deve localizar os cdigos das cores e substitu-las pelas
novas cores escolhidas.
Para auxlio, segue as cores de cada tema base:

Red:

Blue:

Green:

- Cor principal: #b2be43


- Degrad claro: 203,218,63,1

Cor principal: #eb1a21


Degrad claro: 221,0,0,1
Degrad escuro: 163,1,1,1
Divisria menu: #c10101

Cor principal: #0074D9


Degrad claro: 0,116,217,1
Degrad escuro: 0,116,217,1
Divisria menu: #02549c

Degrad escuro: 203,218,63,1

- Divisria menu: #adba36

Ateno! Em toda cor alterada, aps o cdigo, d um espao e insira o cdigo !important, isso
faz com que o cdigo ignore qualquer hierarquia e prevalece sobre todas as demais, a de
mais alta prioridade.
Seu cdigo deve car como no ex: .canais-contato li:hover a { color: #eb1a21 !important; }.

PASSO 4 - Publicando as alteraes


Voc primeiro deve acessar no seu painel Minha Loja > Editor CSS. Depois, existem duas
maneiras de publicar. Uma selecionando todo seu CSS alterado e colando no editor. Outra
selecionando apenas as classes CSS alteradas e seu atributo referente a cor. Essa ltima
opo mais recomendada para que seu cdigo que mais leve, abrindo mo de cdigos
duplicados que no tero algum efeito.

Obrigado!

Fale com a integrando.se: hello@integrando.se

Você também pode gostar