Configurações de Layout

Configurações de Layout

Esta seção é destinada a todas as configurações relacionadas a Layout, ou que o afetam, como aparência, quantidade de produtos na página inicial, regras para atacado, etc...

O visual é de estrema importância para seu e-Commerce, pois se trata de sua vitrine. Quanto mais bela e organizada sua loja for, maior a probabilidade de seus clientes permanecerem nela por mais tempo e desejarem voltar.

Logos da Loja

Nesta área você pode alterar o Logo da sua loja bem como da plataforma de e-Commerce TMWxD. Para isso, basta clicar em Enviar ao lado do logo desejado, escolher o arquivo de imagem e enviar. A imagem é substituída automaticamente.

Note que a imagem de logo da plataforma deve ter no máximo 300px X 70px (largura X altura), e este só estará ativo após a reinicialização do sistema (basta clicar em Sair e depois se logar novamente). Quando ao logo da loja, o limite de tamanho vai depender de seu Layout.

Template da Loja

Você pode escolher um template gratuito pronto em Alterar Template, do lado esquerdo, ou pode criar o seu (parte ou inteiro) ativando as páginas desejadas do lado direito.

É necessário ter conhecimento de códigos de CSS, HTML e Javascript para personalizar sua loja.

Edição do Template da Loja

Se desejar alterar uma das páginas de sua loja, disponíveis na lista à direita desta área, basta ativá-la (marcando a caixa ao lado da página) e, depois, clicando sobre ela para editar.

Note que é possível usar Tags de Substituição para poder personalizar suas páginas. Algumas tags não funcionam em todos os códigos. As principais tags são informadas do lado direito do editor. Abaixo segue uma lista de todas as tags de substituição.

  • $home_ Endereço para a Home. Útil para quando você quer colocar um link e garantir que este seguirá para o lugar certo.

    Aceito nos códigos de:
    CSS HTML JS

    Exemplos:
    <a href="$home_">Página Inicial</a>
    <a href="$home_produtos/busca/celular">Buscar por Celular</a>
  • $cadastro Endereço para a página de Cadastro do Cliente.

    Aceito nos códigos de:
    HTML JS

    Exemplo:
    <a href="$cadastro">Cadastre-se</a>
  • $pedidos Endereço para a página de Pedidos do Cliente.

    Aceito nos códigos de:
    HTML JS

    Exemplo:
    <a href="$pedidos">Veja seus Pedidos</a>
  • $carrinho Endereço para a página de Carrinho.

    Aceito nos códigos de:
    HTML JS

    Exemplo:
    <a href="$carrinho">Acesse seu Carrinho</a>
  • $email_loja Email da Loja cadastrado em Configurações Gerais - Dados da Loja.

    Aceito nos códigos de:
    HTML JS

    Exemplo:
    <p>Entre em contato conosco pelo email: <a href="mailto:$email_loja">$email_loja</a></p>
  • $gerenciador Retorna o caminho para o Gerenciador de Arquivos (vide abaixo).

    Aceito nos códigos de:
    CSS HTML JS

    Exemplo:
    .cliente {
        background-image: url("$gerenciador/img/cliente.png");
    }
  • $logo_loja Retorna o caminho para o Logo da Loja (vide acima).

    Aceito nos códigos de:
    CSS HTML JS

    Exemplo:
    <div id="cabecalho">$logo_loja</div>
  • $barraEsquerda e $barraDireita Chama o código HTML das Barras Laterais, esquerda e/ou direita.

    Aceito nos códigos de:
    HTML

    Exemplo:
    $barraEsquerda
    $barraDireita
    <div class="container"><!-- Conteúdo Central --></div>
  • $areaAtendimento e $areaCopyright Traz o HTML da Área de Atendimento e/ou da Área de Copyright, conforme especificado em Configurações de Layout - Rodapé - Atendimento e Copyright

    Aceito nos códigos de:
    HTML

    Exemplo:
    <div id="rodape">
        $areaAtendimento
        $areaCopyright
    </div>
  • $listaMarcas Traz o módulo (HTML completo) com uma lista de todas as marcas que possuem algum produto vinculado.

    Aceito nos códigos de:
    HTML

    Exemplo:
    <div id="marcas">
        $listaMarcas
    </div>
  • $institucional(n) Endereço para a página institucional que tem o ID informado no lugar de n (veja mais em Textos Institucionais).

    Aceito nos códigos de:
    HTML JS

    Exemplo:
    Acesse <a href="$institucional(1)">Quem Somos</a> para saber mais.
  • $marcas(n) Endereço para a página da marca/fornecedor que tem o ID informado no lugar de n (veja mais em Marcas do Produto e Cadastro de Produtos).

    Aceito nos códigos de:
    HTML

    Exemplo:
    Veja mais em <a href="$marcas(1)">Apple</a>
  • $areaCliente Retorna todo o HTML para o setor de Clientes. Quando o cliente está deslogado, traz uma mensagem de boas vindas, com um link para se logar. Quando ele estiver logado, traz os links do cliente (Cadastro, Pedidos e Avaliações).

    Aceito nos códigos de:
    HTML

    Exemplo:
    <div id="cabecalho">$areaCliente</div>
  • $secoes(n) Traz uma lista das seções (já com os links) cuja a seção mãe tiver o ID n. Para trazer todas a seções, informe 0 (zero) no lugar de n (veja mais em Seções do Produto).

    Aceito nos códigos de:
    HTML

    Exemplo:
    <div id="menu">$secoes(0)</div>
  • $banners(tipo) Traz o(s) banner(s) do tipo/posição tipo (veja mais em Banners).

    Aceito nos códigos de:
    HTML

    Exemplo:
    <div id="cabecalho">$banners(Fullbanner)</div>
  • $qtdeCarrinho e $valorCarrinho Traz a quantidade e o valor total de produtos no carrinho.

    Aceito nos códigos de:
    HTML JS

    Exemplo:
    <p id="carrinho">
        Quantidade: $qtdeCarrinho
        Valor: $valorCarrinho
    </p>
  • $produtosCarrinho Traz um módulo completo com um resumo dos produtos no carrinho

    Aceito nos códigos de:
    HTML

    Exemplo:
    <div id="carrinho">
        $produtosCarrinho
    </div>
  • $contactForm{ HTML } Formulário de contato. Para funcionar, precisa que se faça uso das seguintes tags obrigatoriamente:

    $contactEmail Campo de Email
    $contactAssunto Campo de Assunto da Mensagem
    $contactMensagem Campo de Mensagem
    $contactCaptcha( altura, R, G, B ) Campo de Captcha, onde em altura colca-se o valor em pixels da altura da imagem de captcha, em R coloca-se o tom de vermelho, em G coloca-se o tom de verde e em B coloca-se o tom de azul para a cor de fundo do captcha.

    Você ainda pode colocar quaisquer campos personalizados que deseje, colocando em name o nome do campo, e este será adicionado ao email que será enviado para sua loja no email cadastrado em Configurações Gerais - Dados da Loja

    Aceito nos códigos de:
    HTML

    Exemplo Completo:
    $contactForm{
        <label>Nome: <input type="text" name="Nome" /></label>
        <label>Email: $contactEmail</label>
        <label>Assunto: $contactAssunto</label>
        <label>Mensagem: $contactMensagem</label>
        $contactCaptcha(30,190,190,190)
        <button type="submit">Enviar</button>
    }
  • $numPedido, $totalPedido e $emailCliente Apenas para o script de conversão, eles trazem, respectivamente, o número do pedido da conversão, o valor total (em formato americano) e o email do cliente que efetual a compra.

    Aceito nos códigos de:
    JS (apenas no script de Conversão)

    Exemplo:
    (function(){
        var numPedido = "$numPedido";
        var totalPedido = $totalPedido;
        var emailCliente = "$emailCliente";
    })();
  • $produtosHome{ HTML } Listagem de produtos da Página Inicial (Home)
    $produtosListagem{ HTML } Listagem de Produtos da Busca/Seções/Marcas
    $detalheProduto{ HTML } Detalhe de Produto

    São todas tags de substituição de grupo, e, internamente (no lugar de HTML) aceitam as tags descritas abaixo em Tags de Grupo

    Aceito nos códigos de:
    HTML

    Exemplo Completo:
    $produtosListagem{
        <p>Nome do Produto: $nomeProd</p>
    }
  • $urlProd Link da página do produto atual.

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $produtosHome $produtosListagem $detalheProduto

    Exemplo:
    <a href="$urlProd">Veja Mais</a>
  • $idProd ID do Produto atual.

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $produtosHome $produtosListagem $detalheProduto

    Exemplo:
    <div id="id_$idProd"> ... </div>
  • $refProd Referência (SKU) do Produto atual.

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $produtosHome $produtosListagem $detalheProduto

    Exemplo:
    <strong>Ref.: $refProd</strong>
  • $nomeProd Nome do Produto atual. Nas listagens traz em forma de link, e no detalhe de produto traz apenas o nome.

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $produtosHome $produtosListagem $detalheProduto

    Exemplo:
    <div class="nome_prod">$nomeProd</div>
  • $imgProd Imagem do Produto atual, em forma de link de produto traz apenas o nome.

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $produtosHome $produtosListagem

    Exemplo:
    <div class="img">$imgProd</div>
  • $areaImagemPrincipal Módulo com a imagem principal (incluindo script de zoom). Trabalha em conjunto com a seguinte tag:
    $areaMiniaturas Listagem de todas as imagens e vídeo do produto (se houver).

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $detalheProduto

    Exemplo:
    <div class="container">
        $areaImagemPrincipal
        $areaMiniaturas
    </div>
  • Tags para valores do produto atual:

    $valorDe Quando houver uma promoção, trará o valor original do produto. Caso contrário, traz vazio.
    $valorPor Traz o valor do produto. Se tiver promoção, trará o promocional.
    $valorEconomize Traz a diferença entre o $valorDe e o $valorPor quando há uma promoção.
    $valorSemFormatacao Traz o valor do produto sem cifrão e no formato americano.
    $valorAVista Traz o valor para pagamento a vista com desconto.
    $descontoAVista Qual o percentual de desconto no pagamento a vista.
    $valorVistaSemFormatacao Traz o valor para pagamento a vista sem cifrão e no formato americano.
    $valorAtacado Traz o valor para compras em atacado.
    $valorAVistaAtacado Traz o valor para compras em atacado à vista com desconto.
    $descontoAVistaAtacado Qual o percentual de desconto no pagamento a vista no atacado.
    $qtdeMinAtacado Quantidade mínima para a compra ser considerada como atacado.
    $qtdeParcelaSJuros Quantidade máxima de parcelas sem juros.
    $valorParcelaSJuros Valor da parcela máxima sem juros.
    $qtdeParcelaCJuros Quantidade máxima de parcelas com juros.
    $valorParcelaCJuros Valor da parcela máxima com juros.


    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $produtosHome $produtosListagem $detalheProduto

    Exemplo:
    <div class="valores">
        <span class="valor de">De: $valorDe</span>
        <span class="valor por">Por: $valorPor</span>
        <span class="valor parc">em até $qtdeParcelaSJuros de $valorParcelaSJuros s/ juros</span>
    </div>
  • $stars Traz as estrelas de avaliação do produto atual. Na página de detalhe do produto, funciona como um link que leva à área de avaliação no final da página, quando aplicável.

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $produtosHome $produtosListagem $detalheProduto

    Exemplo:
    <div class="detalhes_prod">$stars</div>
  • $descCurtaProd Descrição curta do produto atual (apenas texto).

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $produtosHome $produtosListagem $detalheProduto

    Exemplo:
    <div class="desc curta">$descCurtaProd</div>
  • Tags para as descrições do produto atual:

    $descProd Traz a decrição principal (HTML).
    $descExtra Traz todas as descrições extras (HTML).

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $detalheProduto

    Exemplo:
    <div class="descricoes">
        <div class="desc principal">$descProd</div>
        <div class="desc extra">$descExtra</div>
    </div>
  • Tags para os selos do produto atual, quando houver (apenas um span com classes indicativas para tratamento via CSS):

    $seloFreteGratis Selo de frete grátis.
    $seloRecomendado Selo de Recomendado.
    $seloLancamento Selo de Lançamento.
    $seloDestaque Selo de Destaque.


    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $produtosHome $produtosListagem $detalheProduto

    Exemplo:
    <div class="selos">
        $seloFreteGratis
        $seloRecomendado
        $seloLancamento
        $seloDestaque
    </div>
  • $seloGarantia Traz um span indicativo de que o produto tem garantia estendida cadastrada.

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $detalheProduto

    Exemplo:
    <div class="selos">
        $seloFreteGratis
        $seloRecomendado
        $seloLancamento
        $seloDestaque
        $seloGarantia
    </div>
  • $btnMaisDetalhes Link Veja Mais para o produto atual.

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $produtosHome $produtosListagem

    Exemplo:
    <div class="produto">$btnMaisDetalhes</div>
  • $linkSecao Link para a seção (categoria) do produto atual.

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $produtosHome $produtosListagem $detalheProduto

    Exemplo:
    <div class="secao">$linkSecao</div>
  • $nomeSecao Nome da seção (categoria) do produto atual.

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $detalheProduto

    Exemplo:
    <div class="secao">$nomeSecao</div>
  • $nomeMarca Nome da marca (fornecedor) do produto atual.

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $detalheProduto

    Exemplo:
    <div class="marca">$nomeMarca</div>
  • $linkMarca Link para a marca (fornecedor) do produto atual. Se a Marca possuir uma imagem, traz esta dentro do link ao invés do nome da marca.

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $produtosHome $produtosListagem $detalheProduto

    Exemplo:
    <div class="marca">$linkMarca</div>
  • $urlMarca URL da marca (fornecedor) do produto atual.

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $detalheProduto

    Exemplo:
    <a href="$urlMarca">$nomeMarca</a>
  • $urlLogoMarca URL da imagem da marca (fornecedor) do produto atual.

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $detalheProduto

    Exemplo:
    <img src="$urlLogoMarca" alt="$nomeMarca" />
  • $areaSubProduto Traz as variações do produto para escolha.

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $detalheProduto

    Exemplo:
    <div class="compra">
        $areaSubProduto
        $areaQuadroCompra
    </div>
  • $areaQuadroCompra Traz o botão Comprar ou então o formulário de Avise-me quando disponível quando não há estoque para o produto atual.

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $detalheProduto

    Exemplo:
    <div class="compra">
        $areaSubProduto
        $areaQuadroCompra
    </div>
  • $areaAgrupamentoProduto Traz os links dos produtos agrupados.

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $detalheProduto

    Exemplo:
    <div class="compra">
        $areaSubProduto
        $areaAgrupamentoProduto
        $areaQuadroCompra
    </div>
  • $btnComoPagar Traz o módulo com as formas de pagamento disponíveis (incluindo parcelamento).

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $detalheProduto

    Exemplo:
    <div class="btns">
        $btnComoPagar
        $areaPrazoEntrega
    </div>
  • $areaPrazoEntrega Traz o módulo para cálculo de frete.

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $detalheProduto

    Exemplo:
    <div class="btns">
        $btnComoPagar
        $areaPrazoEntrega
    </div>
  • $areaAvaliacoes Traz o módulo para àrea de avaliações.

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $detalheProduto

    Exemplo:
    <div class="container">
        $areaAvaliacoes
    </div>
  • $areaCompreJunto Traz o módulo Compre Junto. (Para o módulo de Veja Também, vide as Tags de Filtro)

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $detalheProduto

    Exemplo:
    <div class="container">
        $areaCompreJunto
    </div>
  • ##vejaTambem:n## Adiciona o módulo de Veja Também filtrando n produtos.

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $detalheProduto

    Exemplos:
    <div class="container">
        ##vejaTambem:4##
    </div>
  • ##filtro## Use esta tag no início da listagem para que, ao invés de um menu de ordenação, seja trazido um menu de filtro de grupos (como cor, faixa de preço, tamanho, etc...).

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $produtosListagem

    Exemplos:
    $produtosListagem{
        ##filtro##
        ...
    }
  • ##agrupar## Se você trabalha com agrupamento de produtos e quer que eles sejam agrupados também na listagem, use esta tag no inicio da listagem.

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $produtosListagem

    Exemplos:
    $produtosListagem{
        ##agrupar##
        ...
    }
  • ##destaques## Traz apenas os produtos marcados como Destaque (além da marcação de Página Inicial) na página inicial.

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $produtosHome

    Exemplos:
    $produtosHome{
        ##destaques##
        ...
    }
  • ##recomendados## Traz apenas os produtos marcados como Recomendado (além da marcação de Página Inicial) na página inicial.

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $produtosHome

    Exemplos:
    $produtosHome{
        ##recomendados##
        ...
    }
  • ##lancamentos## Traz apenas os produtos marcados como Lancamento (além da marcação de Página Inicial) na página inicial.

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $produtosHome

    Exemplos:
    $produtosHome{
        ##lancamentos##
        ...
    }
  • ##freteGratis## Traz apenas os produtos marcados como Frete Grátis (além da marcação de Página Inicial) na página inicial.

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $produtosHome

    Exemplos:
    $produtosHome{
        ##freteGratis##
        ...
    }
  • Modificadores de quantidade:

    ##col:n## Modifica a quantidade de colunas a serem mostradas na página inicial para n
    ##qtde:n## Modifica a quantidade total de produtos a serem trazidos na página inicial para n

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $produtosHome

    Exemplos:
    $produtosHome{
        ##col:4##
        ##qtde:20##
        ...
    }
  • ##secao:id## Traz apenas dos produtos da seção id na página inicial

    Aceito nos códigos de:
    HTML

    Pertencente aos grupos:
    $produtosHome

    Exemplos:
    $produtosHome{
        ##secao:1##
        ...
    }
Arquivos da Loja

É aqui no Gerenciador de Arquivo que você faz o upload de arquivos para layout, documentação, drivers, etc..

São permitidos arquivos de todo o tipo (imagem, pdf, docs, etc...) desde que não ultrapassem 4MB cada.

Para criar um link para seu arquivo, basta dar dois cliques nele e copiar a url da página que abrir. Se for usá-los na Edição de Template, basta usar a tag de substituição $gerenciador (vide Tags de Substituição Individuais).

O comportamento dos produtos em sua loja é afetado pelas configurações a seguir.

Configurações da Listagem dos Produtos

As configurações aqui afetam a Página Inicial e a Listagem.

É possível alterar a ordem dos produtos (para a Página Inicial tem a opção Aleatório, que traz produtos aleatoriamente), a quantidade de produtos na página, e a quantidade de colunas.

Se ao personalizar seu template você usar os filtros ##col:n##, ##qtde::n## e/ou ##secao:id##, as configurações nesta página serão ignoradas (vide Tags de Substituição de Filtro).

Configurações da Página do Produto

Em Página de Detalhamento do Produto é possível colocar uma marca d'água automaticamente para as imagens de destaque do produto. Para tanto, informe a URL da imagem (completa, mesmo que você a tenha colocado no Gerenciador de Arquivos), preferencialmente GIF com fundo transparente; a posição onde a marca d'água aparecerá sobre a imagem do produto; e o percentual de visibilidade (ondem 1 é praticamente invisível e 100 é totalmente visível).

Em Venda por atacado você configura as regras ara venda por atacado. Para tanto, informe a quantidade mínima para que a venda seja considerada por atacado (se informar 1, toda a venda será considerada por atacado); o desconto para pagament a vista; e marque se deseja que apenas pessoas jurídicas comprem por atacado.

Se desejar que toda a venda para pessoa jurídica seja com valor diferencial (por atacado) coloque a quantidade mínima em 1, e marque a opção Venda por atacado permitida apenas para pessoa jurídica.

A ferramenta de alteração em massa irá definir o valor por atacado de todos os produtos conforme o percentual informado. Por exemplo, se informar 50, então todos os produtos terão o valor por atacado definido como metade do preço do valor normal.

Textos do Rodapé - Atendimento e Copyright

Aqui você define os textos para as áreas de Atendimento e Copyright que aparecem no Rodapé da sua loja.

Para personalizar seu template use as tags de substituição $areaAtendimento e $areaCopyright para chamar o HTML configurado aqui (vide Tags de Substituição Individuais).