Como configurar o visual da página de produtos
13 min
Criado por Rafael Pinheiro em 01/07/2020 15:44
Atualizado por Laura em 13/01/2021 16:25

Menu Aparência > Meus temas

Dentro do editor visual você pode modificar a aparência da página de produtos de sua loja. Configure conforme as instruções abaixo.

Editando o visual da sua página de produtos

1º Acesse o menu Aparência, clique em Meus Temas e em personalizar. 

1 aparencia.png2º Dentro do editor visual escolha a opção de Detalhe de produtos

3º Efetue as edições desejadas e clique em salvar
1.png

  • Cabeçalho: Insira aqui as configurações do menu de cabeçalho da página do produto. 
  • Informações do produto: Nessa seção você edita todas as informações exibidas na página do produto. 
  • Kit de produtos: Edite aqui a aparência dos KITS de produtos. 
  • Descrição do produto: Defina o estilo da descrição dos produtos, como por exemplo se ela será organizada por abas, ícones, ou se haverá destaque nas características. 
  • Selos customizados: Defina os detalhes dos selos, como titulo, margem e cor das bordas.
  • Produtos relacionados: Nesta seção você define a exibição dos produtos relacionados. 
  • Rodapé: Defina os detalhes do rodapé da página. 

Configurando as informações do produto

Dentro da seção de Informações do produto você pode editar todos os recursos visuais da página do produto, configurando conforme as instruções a seguir. 

1º Acesse o menu Aparência, clique em Meus Temas e em personalizar. 

1 aparencia.png2º Dentro do editor visual escolha a opção de Detalhe de produtos e clique em Informações do produto

infos.png

3º  Na aba de Informações do produto, efetue as edições desejadas e clique em salvar. 

infos1.png

  • Breadcrumb (migalhas): Selecionando essa opção você define se a página do produto exibirá o caminho de acesso ao produto.
  • Posição da imagem: Defina se os produtos serão exibidos a esquerda, centralizados ou à direita. 
  • Galeria de imagens do produto: A galeria é a exibição das fotos alternativas do produto, defina nesse campo se ela será exibida com miniatura lateral, miniatura inferior, sem miniatura ou com rolagem. 
  • Exibir zoom mobile: Selecione essa opção para permitir o zoom quando os clientes acessarem o produto pelo celular.
  • Desativar o zoom da imagem principal: Selecione essa opção para desativar o zoom da imagem principal da galeria. 
  • Características no titulo do produto: Selecione características cadastradas para serem exibidas logo abaixo do título do produto.
  • Exibir referência de produto: Defina aqui se a referência do produto será exibida.
  • Exibir ID ERP: Exibe o código do Sistema de Gestão cadastrado no produto.
  • Exibir marca do produto: Selecionando essa opção você define a exibição do logo da marca do produto.
  • Estilo de exibição do personalizador de produto: Caso você tenha configurado o aplicativo de personalizador de produto, defina se a exibição dele será aberta ou fechada.
  • Texto do aviso: Caso você tenha configurado o botão de avise-me quando chegar, insira aqui o texto do aviso exibido para o cliente. 
  • Texto do botão: Caso você tenha configurado o botão de avise-me quando chegar, insira aqui o texto do botão de aviso exibido para o cliente. 
  • Texto de instrução: Caso você tenha configurado o botão de avise-me quando chegar, insira aqui instruções para seu cliente sobre a funcionalidade.
  • Texto de pré-venda: Caso você tenha configurado o botão de pré-venda, insira aqui o texto do aviso exibido para o cliente. 
  • Texto do botão de pré-venda: Caso você tenha configurado o botão de pré-venda, insira aqui o texto do botão exibido para o cliente. 
  • Exibir informação de estoque baixo a partir de: Selecionando essa opção será exibido para seu cliente a informação de estoque baixo. Para não exibir a mensagem preencha com o número 0.
  • Exibir quantidade disponível em estoque: Selecione essa opção para exibir a quantidade de produto no estoque.
  • Mensagem de estoque baixo personalizada: Insira aqui uma mensagem personalizada para o estoque baixo, que substituirá a informação de quantidade de produtos. 
  • Exibir preço de variação com menor preço: Caso seu produto tenha variação de preço, como por exemplo para cores e tamanhos, marque essa opção para exibir o menor valor, como por exemplo: A partir de R$ 299,00.
  • Estilo de exibição de atributos: Defina se os atributos serão exibidos em botões, seleção ou grades.
  •  Exibir opções de pagamento: Selecione essa opção para exibir na página do produto as opções de pagamento.
  • Exibir cálculo de frete: Selecione essa opção para que o cálculo do frete fique visível para o cliente. 

  • Exibir selos de informação de entrega: Selecionando essa opção a informação de entrega será exibida.

  • Título do botão de personalizar produto: Caso seu produto seja personalizável insira aqui um titulo de personalização. 
  • Título de outras cores: Defina se outras cores do produto serão exibidas com títulos diferentes. 
  • Estilo de exibição de outras cores: Defina se as opções de cores do produto serão exibidas por botões de cor do produto, imagem do produto ou seletor de cores.
  • Habilitar slider em outras cores: Selecione essa opção para que o slider seja ativado também para as outras opções de cores.
  • Título de outras opções: Escolha qual visual de título que será utilizado para exibir as demais cores de um produto. 
  • Exibir botões de compartilhamento: Selecione essa opção para disponibilizar a opção de compartilhamento do produto, como por exemplo; ícone do facebook, ícone do instagram.  
  • Exibir botões de compartilhamento coloridos: Selecione essa opção para que os botões de compartilhamento sejam coloridos. 
  • Exibir botão de whatsapp: Selecione essa opção para inserir o ícone de compartilhamento pelo WhatsApp.

  • Exibir botão de facebook: Selecione essa opção para inserir o ícone de compartilhamento pelo Facebook.

  • Exibir botão de twitter: Selecione essa opção para inserir o ícone de compartilhamento pelo Twitter.

  • Exibir botão de pinterest: Selecione essa opção para inserir o ícone de compartilhamento pelo Pinterest. 

  • Exibir barra de compra rápida: Selecione essa opção para exibir a barra de compra abaixo do produto. 

Configurando o Kit de produtos

Dentro do editor visual você pode editar a aparência dos Kits de produtos, configurando conforme as instruções abaixo. 

1º Acesse o menu Aparência e clique em Meus Temas e em Personalizar. 

1 aparencia.png

2º Dentro do editor visual escolha a opção de Detalhe de produtos e clique em Kit de produtos.

kit de produtos.png

3º Dentro da aba de Kit de produtos, efetue as edições desejadas e clique em salvar.

4.png

  • Titulo: Defina aqui o titulo do Kit
  • Subtítulo: Defina o subtítulo do Kit. 
  • Ordenação de produtos: Defina se serão exibidos primeiro os produtos agrupados ou os produtos sem grupos. 
  • Estilo da seleção das variações: Defina se a seção será exibida em Lista ou Botões. 
  • Permitir a venda avulsa dos produtos: Selecione esse campo para permitir também a venda avulsa dos produtos do Kit. 

Configurando a Descrição do produto

Edite a aparência da seção de Descrição do produto, conforme as instruções abaixo.

1º Acesse o menu Aparência e clique em Meus Temas e em Personalizar. 

1 aparencia.png

2º Dentro do editor visual escolha a opção de Detalhe de produtos e clique em Descrição do produto.

descrição do produto.png1.png

3º Na aba de Descrição do produto, efetue as edições desejadas e clique em salvar.

descrição do produto.png

  • Estilo da descrição do produto: Defina a descrição do produto em; Descrição e características em abas, Descrição e características com ícones ou Destaque nas características.
  •  Espessura da borda de seção: Defina a espessura da borda da seção de Detalhes.

Configurando os Selos customizados

Dentro do editor visual você pode editar a aparência da seção de Selos customizados, configurando conforme as instruções abaixo. 

1º Acesse o menu Aparência e clique em Meus Temas e em Personalizar. 

1 aparencia.png

2º Dentro do editor visual escolha a opção de Detalhe de produtos e clique em Selos customizados.

selos customizados .png

3º Na aba de Selos customizados, efetue as edições desejadas e clique em salvar.

selos customizados.png

  • Ocultar listagem de selos customizados: Defina a descrição do produto em; Descrição e características em abas, Descrição e características com ícones ou Destaque nas características.
  • Título: Defina o título da seção de selos.
  • Margem da seção: Defina a espessura da margem da seção.
  • Cor da borda de seção: Defina a cor da seção. 
  • Espessura da borda de seção: Defina a espessura da borda da seção de selos.

Configurando os Produtos relacionados

Dentro do editor visual você pode editar a aparência dos Kits de produtos, configurando conforme as instruções abaixo. 

1º Acesse o menu Aparência e clique em Meus Temas e em Personalizar. 

1 aparencia.png

2º Dentro do editor visual escolha a opção de Detalhe de produtos e clique em Produtos relacionados.

produtos relacionados .png

3º Na aba de Produtos relacionados, efetue as edições desejadas e clique em salvar.

produtos relacionados.png

  • Título: Insira o título da seção, como por exemplo; Veja mais. 
  • Subtítulo: Insira aqui o subtítulo da seção.
  • Estilo do conteúdo: Selecione aqui se o conteúdo será centralizado ou adaptável a largura da tela. 
  • Classe customizada para editar o css: Nesse campo você insere edições em CSS para personalizar a seção, caso necessário. 
  • Não exibir em dispositivos móveis: Selecione essa opção para que os produtos relacionados não sejam exibidos nos dispositivos moveis.
  • Cor do título: Defina a cor do título da seção. 
  • Cor do subtítulo: Defina a cor do subtítulo da seção. 
  • Cor de fundo da seção: Defina a cor de fundo da seção.
  • Cor de fundo do post: Defina a cor de fundo do post.  
  • Cor da borda de seção: Defina a cor da borda da seção.
  • Defina a cor do título da seção: Insira aqui uma imagem para o fundo da seção. 
  • Imagem fixa de fundo: Selecione essa opção para definir a imagem de fundo como fixa.
  • Espessura da borda de seção: Defina aqui a espessura da borda da seção. 

  • Margem de cima da seção: Defina a espessura da margem de cima da seção. 

  • Margem de baixo da seção: Defina a espessura da margem de baixo da seção. 

Exibição na loja

Imagem posicionada a esquerda da página: 

Imagem do produto Centralizada:

Imagem do produto a Direita:

Galeria de imagens do produto:

Características no título de produto:

Exibição da marca do produto:

Exibir barra de compra rápida:

Exibir preço de variação com menor preço:

Informação de estoque baixo: 

Estilo de exibição de atributos:

Exibição de outras cores:

Título do botão de personalizar produto:

Seleção das variações:

Venda avulsa dos produtos:

Exibição dos produtos de um kit:

Estilo da descrição do produto:

Características com ícones + descrição:

Características destaques/ícones + descrição:

 

O que você achou deste artigo?
Últimos artigos visitados