Para realizar a personalização do layout padrão, confira o passo a passo logo a seguir.

Para acessar o painel da sua loja e começar as configurações, basta clicar em Visual > Visual da loja.

Na aba disposição do layout, é possível 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.

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 máxima de 1140px, no pequeno a largura é fixa em 980px

O que é o conteiner?

Conteiner é a área de conteúdo, onde está localizado todo o conteúdo do seu site.

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 dispostos a esquerda, dessa maneira:

Disposição dos itens 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 é possível 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 subcategorias aparecerão apenas ao passar o mouse na categoria pai.

Na aba cor principal é possível 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.

Nesta seção, defina a cor e o texto dos botões padrões da listagem de produtos, página do produto e finalização de compra.

Defina ação desse botão na página do produto: adicionar produto e ir para o carrinho ou adicionar produto e permanecer na página.

Defina o texto do botão na Listagem de Produtos e defina a ação deste botão:

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

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

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

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

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

Cor

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

Imagem

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

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

Fonte primária

O valor do campo fonte primária altera a fonte global do tema, o valor é atribuído 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 é atribuído a classe .titulo, a classe esta presente nos textos de destaque da loja como os preços e os nomes dos produtos. Neste campo é possível escolher uma das fontes da lista, qual será o seu peso font-weight e se serão ou não maiúsculas text-transform.

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

Produtos por linha

Neste campo é possível definir quantos produtos serão apresentados por linha: 2, 3 ou 4 produtos.

Aplicar caixa de contorno nos produtos

Defina se os produtos terão uma caixa de contorno ou não.

Mostrar imagens extras

Selecione essa opção se deseja que mostre as imagens extras ao passar o mouse sobre o produto na listagem.
​

Disposição das miniaturas do produto

Escolha entre exibir as imagens extras do produto abaixo da imagem principal ou ao lado dela.

Valor do produto em destaque

Defina qual valor estará em destaque na página do produto. Na imagem abaixo, o destaque é o valor da parcela.

Exibir a quantidade de estoque

Ativando essa opção, será apresentado essa informação na página dos seus produtos:

Exibir campo para alterar a quantidade que será adicionado no carrinho

Ativando essa opção, o campo de quantidade será apresentado na página do produto para o cliente selecionar antes de ser direcionado para o carrinho. Dessa maneira:

Nesta seção, você irá definir a ordem de exibição dos produtos na página inicial, para entender com mais detalhes cada item, clique aqui.

Solicitar login antes de iniciar o checkout

Defina se você irá obrigar os seus clientes a realizar o login em sua loja antes de iniciar o checkout (processo de finalização da compra).

Atenção! Esse recurso somente funcionará se você ativar o gerenciamento de cadastro de cliente em sua loja.

Esse recurso é mais utilizado quando o lojista necessita aprovar o cliente antes de realizar a compra na loja, exemplo: quando a loja somente vende para pessoa jurídica.

Defina os campos obrigatórios
Você pode selecionar alguns campos como obrigatórios no processo de cadastro, são eles: data de nascimento, sexo e comentário no pedido.

Inserir o campo "comentários no checkout"

Se desejar, você pode ativar o campo comentários no checkout, se for importante obter algumas informações importantes da compra.

Confira todos os detalhes para ativar o aceite de política de privacidade em sua loja, aqui.

Esse artigo possui todas as informações sobre cada item para você personalizar a sua loja, confira cada ponto com cautela e arrase na personalização!