Bem-vindo, identifique-se para fazer pedidos Meus Pedidos Minha Conta Fale Conosco Telefone: (62) 3259-7015 Whatsapp: (62) 98157-2829

01Estrutura (HTML)

Características

A nova estrutura de temas da loja integrada foi criada com o intuito de ser 100% flexivel e modular, para isto o tema utiliza o Fluid Grid System do bootstrap que permite que a estrutura seja fluida e responsiva, se adaptando a cada tamanho de tela.

Mapa de modulos

Divisão dos blocos

O conteúdo é dividido em 4 blocos #cabecalho .secao-banners #corpo e #rodape cada um com o seu respectivo .conteiner isto possibilita a customização dos blocos individualmente.

HTML:
  1. <div id="cabecalho">
  2. <div class="conteiner">...</div>
  3. </div>
  4. <div class="secao-banners">
  5. <div class="conteiner">...</div>
  6. </div>
  7. <div id="corpo">
  8. <div class="conteiner">...</div>
  9. </div>
  10. <div id="rodape">
  11. <div class="conteiner">...</div>
  12. </div>

Conteiner

O .conteiner é a área de conteúdo de cada um dos blocos, por padrão o fundo do conteiner é branco #FFF no tema com estilo claro, preto #323232 no tema com estilo escuro e transparente no tema com estilo transparente

CSS:
  1. .conteiner { background-color: #FFF; }
  2. .tema-escuro .conteiner { background-color: #323232; }
  3. .tema-transparente .conteiner { background-color: transparent; }

O tamanho do .conteiner é definido por uma largura minima e uma largura maxima, a largura minima padrão é de 970px e a maxima de 1140px. Este tamanho é fixo em 980px quando o tamanho do tema é definido como pequeno no editor.

  1. .conteiner { min-width: 970px; max-width: 1140px; }

02Configurações do tema

O novo editor de tema permite que alterações de aparência e estrutura sejam feitas de maneira rápida e com poucos cliques atraves do controle.

Disposição do layout

Na aba disposição do layout, é possivel alterar a estrutura do tema definindo o tamanho do layout, a posição do logo, a posição da coluna e a disposição do conteúdo.

Disposição do layout

Tamanho do layout

O tamanho do layout pode ser definido como Médio ou Pequeno, no médio o layout é elástico, a largura minima do .conteiner é de 970px e a maxima de 1140px, no pequeno a largura é fixa em 980px

Disposição do logo

O logo pode ser disposto na esquerda ou no centro do cabeçalho, caso o logo seja disposto no centro a busca e o login são disposto a esquerda.

Disposição dos ítens da loja

Existem 12 maneiras diferentes de dispor o conteúdo da loja, elas estão listadas em thumbanails e podem ser prevista no editor.

Disposição da coluna lateral

A coluna pode ser posicionada a esquerda, a direita ou retirada deixando a loja sem coluna lateral.

Opcionais

Nos opcionais é possivel escolher se haverá ou não coluna na página de produto, se haverá ou não menu superior e se o menu lateral exibirá o segundo nível de categorias abertas ou se todas as sub-categorias aparecerão apenas ao passar o mouse na categoria pai. :hover

Cor Principal

Na aba cor principal é possivel definir a cor predominante na loja, a cor é aplicada nas áreas de destaque como títulos, links, preços, tags, ícones e botões principais.

Cor principal

Classes e elementos afetados pela Cor Principal

Uma série de elementos e classes recebem o valor atribuido à Cor Principal no editor do tema. Classes de cor, fundo e borda .fundo-principal, .cor-principal e .borda-principal, veja mais sobre as classes de cor
Links e hovers: a, a:hover e a:focus Menus: .menu a:hover
Atributos: .atributo-comum a:hover entre outros.

Estilo do tema

Na aba estilo do tema existem 3 possibilidades de cor para área de conteúdo .conteiner, cores claras, cores escuras e transparente

Estilo do tema

Cores claras

A opção de tema com cores claras mantêm a cor do conteiner branco #FFF

Cores escuras

A opção de tema com cores escuras muda a cor do conteiner para preto #323232 e as cores dos textos para branco #FFF

Transparente

A opção de tema transparente retira a cor e a sombra do .conteiner

Backgrounds

Na aba backgrounds é possivel colocar um padrão, cor ou imagem para o background de toda loja, do cabeçalho ou do rodapé.

Backgrounds

Padrões

A aba Padrão possui uma lista de padrões pré-definidos, os valores de background-repeat e background-position dos padrões são sempre os mesmos, repeatcenter. Não é possivel usar um padrão junto a uma cor.

Cor

Na aba Cor é possivel escolher uma cor para o fundo (a cor pode ser combinada a uma imagem subida na aba Imagem)

Imagem

Na aba Imagem é possivel subir uma imagem para o fundo, escolher se ela repitirá ou não background-repeat, escolher a sua posição background-position e o seu tipo background-attachment

Fontes

Na aba fontes é possivel alterar a fonte global, e a fonte dos títulos da loja.

Fontes

Fonte primária

O valor do campo fonte primária altera a fonte global do tema, o valor é atribuido a tag body e afeta todos os textos da loja com exceção dos títulos.

Fonte dos títulos

Os valores do campo fonte dos títulos é atribuido a classe .titulo, a classe esta presente nos textos de destaque da loja como os preços e os nomes dos produtos. Neste campo é possivel escolher uma das fontes da lista, qual será o seu peso font-weight e se serão ou não maiúsculas text-transform. Veja mais detalhes sobre a tipografia

Listagem de Produtos

Na aba Listagem de Produtos é possivel escolher a quantidade de produtos por linha, qual o tipo de listagem e quantos produtos serão listados na home.

Listagem de Produtos

Qtd de produtos por linha

Neste campo é possivel colocar 2, 3 ou 4 produtos por linha.

Tipo de listagem

O tipo de listagem são quais os produtos aparecerão na home, eles podem ser listador por últimos produtos cadastrados, produtos marcados como destaque ou em ordem alfabética.

Quantidade

Quantos produtos serão listados na home. Veja mais sobre a listagem de produtos

03Classes

Classes do body

Todas as páginas da loja são especificadas com uma classe referente ao seu conteúdo, desta maneira é possivel customiza-las individualmente. As classes de página são: .pagina-inicial .pagina-categoria .pagina-produto .pagina-cadastro .pagina-conta .pagina-carrinho .pagina-finalizacao .pagina-marca

Alem das classes de página, existem também as classes específicas de categoria, marca ou produto. Exemplo:

  1. <body class="pagina-categoria categoria-nome-da-categoria">

No caso das páginas de produto a classe adiciona o código do produto .produto-codigo

Tema claro, tema escuro e tema transparente

Ao alternar o estilo do tema no editor entre escuro ou transparente é adicionada uma classe no body .tema-escuro ou .tema-transparente o tema claro não adiciona classes por ser o estilo padrão do tema.

  1. <body class="pagina-inicial tema-escuro">

Classes de cor, fundo e borda.

As cores de relevância da loja estão divididas em 3 classes .fundo-principal(referente aos backgrounds) .cor-principal(referente aos textos) e .borda-principal(referente as bordas). Estas cores são alteradas simultaneamente quando é definida a Cor Principal no editor.

Icones utilizando .fundo-principal

A B C
  1. <i class="icon-star fundo-principal"></i>

Texto utilizando .cor-principal

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  1. <span class="cor-principal"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>

Caixa utilizando .borda-principal

Caixa com a borda-princial.

  1. <div class="borda-principal"> Caixa com a borda-princial.</div>

As cores de menor relevância da loja estão dividas em 2 classes .fundo-secundario e .cor-secundaria

Icones utilizando .fundo-secundario

A B C
  1. <i class="icon-star fundo-secundario"></i>

Texto utilizando .cor-secundaria

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  1. <span class="cor-secundaria"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>

04Botões

Tipos de botões

O tema possui 2 tipos de botões, o botão padrão que é definido pela classe .botao (esta classe representa todos os botões) e o botão principal que é definido pela classe .principal (a cor do botão principal é definida pela Cor Principal no editor.)

Botão padrão representa o botão base de menor relevância na loja

  1. <button class="botao">Botão padrão</button>

Botão principal representa os botões de maior relevâcia como o botão comprar e finalizar compra

  1. <button class="botao principal">Botão principal</button>

Tamanhos dos botões

Os botões possuem 3 níveis de tamanho, o tamanho normal que ja é definido pela classe .botao o botão pequeno.pequeno e o botão grande .grande

Botão pequeno

  1. <button class="botao principal pequeno">Botão pequeno</button>
  2. <button class="botao pequeno">Botão pequeno</button>

Botão grande

  1. <button class="botao principal grande">Botão grande</button>
  2. <button class="botao grande">Botão grande</button>

Botão com ícone

É possivel usar ícones dentro dos botões utilizando a biblioteca Fontawesome

  1. <button class="botao principal"><i class="icon-check"></i>Botão com ícone</button>
  2. <button class="botao"><i class="icon-remove"></i>Botão com ícone</button>

05Ícones

Fontawesome

O tema utiliza a biblioteca Fontawesome para os ícones. Esta biblioteca utiliza ícones em vetor que podem ser facilmente customizados, é possivel alterar a cor, tamanho, colocar drop shadows etc. Tudo atravez de CSS. Confira a lista de ícones

  • A icon-off
  • B icon-off
  • C icon-off
  1. <i class="icon-off icon-large"></i>
  2. <i class="icon-off icon-3x cor-secundaria"></i>
  3. <i class="icon-off icon-5x cor-principal"></i>

06Listagem de produtos

Estrutura da listagem

A estrutura da listagem é feita com Fluid Grid System do Bootstrap, desta forma é possivel ter 2, 3 ou 4 produtos por linha. A classe .listagem representa toda a listagem, .listagem-linha cada linha de produtos e .listagem-item cada produto.

HTML:
  1. <div class="listagem">
  2. <ul>
  3. <li class="listagem-linha">
  4. <ul class="row-fluid">
  5. <li class="span4">
  6. <div class="listagem-item">...</div>
  7. </li>
  8. </ul>
  9. </li>
  10. </ul>
  11. </div>

08Tipografia

Fonte dos títulos

Os textos de destaque da loja (preço, nome dos produtos, menus, títulos, categorias) são definidos pela a classe .titulo esta classe traz os valores de font-family font-weight e text-transform os três valores podem ser alterados no editor do tema na aba Fontes ou manualmente no editor de css.

Texto utilizando a classe título

  1. <h4 class="titulo cor-principal">Texto utilizando a classe título</h4>
CSS:
  1. .titulo { font-family: 'Oswald', Arial, sans-serif; font-weight: 400; }

Fonte global

O tamanho global das fontes do tema é de font-size 12px e a cor color #666 (esta cor muda para #fff caso seja escolhido a opção de tema escuro no editor) a fonte global é aplicada na tag <body> e afeta todos os textos na loja.

O valor de font-family da fonte global também pode ser alterada no editor na aba Fontes

  1. body { font-family: 'Open Sans', sans-serif; font-size: 12px; color: #666; }

09Extensões

Bootstrap

O Framework do Bootstrap é utilizado como base para o css e o javascript do tema.

Flexslider

O tema utiliza o plugin Flexslider em todos os banners e carroceis como no exemplo a baixo:

  1. <div class="banner">
  2. <div class="flexslider">
  3. <ul>
  4. <li>
  5. <img src="img/banner01.jpg"/>
  6. <p class="info-banner titulo">Cabronita pression bass</p>
  7. </li>
  8. </ul>
  9. </div>
  10. </div>

ImageZoom Responsive

O plugin ImageZoom Responsive é utilizado na página de produtos para o zoom das imagens e carrossel das minaturas.

10Funções async

Triggers para monitorar mudanças no cabeçalho da loja (usuario, carrinho)

Usuário

Evento é disparado quando a sessão do usuário é alterada, seja para exibir informações de logado (nome, botão logou, etc) ou quando deslogado exibir botão de login

  1. $('body').on('user_state_changed', function() {
  2.   console.log('SITUAÇÃO DO USUARIO MUDOU');
  3. });

Carrinho

Evento é disparado quando as informações do minicart são alteradas (produtos foram adicionados, removidos, etc)

  1. $('body').on('minicart_state_changed', function() {
  2.   console.log('ESTADO DO MINICART MUDOU');
  3. });
Newsletter

Receba nossas ofertas por e-mail