Passar para o conteúdo principal
Todas as coleçõesLoja Virtual
Loja virtual - Como personalizar o seu tema?
Loja virtual - Como personalizar o seu tema?

Passo a passo pra você personalizar sua loja em seu editor de tema.

Atualizado há mais de uma semana

Os nossos temas foram pensados e desenvolvidos pelos nossos designers especialistas em UX para reunir os recursos que geram maiores conversões em um só lugar. Não é demais?

Iremos mostrar como você pode configurar as seguintes seções da sua loja:

⚠️ Atenção: No vídeo mostramos como realizar as configurações no tema Rocket, porém os elementos, bem como suas configurações podem ser aplicados em todos os temas



Para começar a configurar, em seu painel acesse Loja virtualAtivar Loja virtual → Personalizar.


Será exibidos os seguintes temas:

  • Cosmos - Layout divertido e colorido. A logo centralizada no cabeçalho dá ainda mais destaque para sua marca.

    Você pode visitar a loja de demonstração aqui.

  • Flash - Conta com um design moderno e cores marcantes, página inicial que foca em coleções de produtos. Ideal para lojas com grande variedade de itens.

    Você pode visitar a loja de demonstração aqui.

  • Luminar - Layout minimalista com cores sóbrias. Traz sofisticação e delicadeza para sua loja.

    Você pode visitar a loja de demonstração aqui.

  • Nebula - Chama atenção pelas cores vibrantes e traço moderno. Tipografia e bordas mais arredondadas e delicadas.

    Você pode visitar a loja de demonstração aqui.

  • Rocket - Nosso primeiro tema. Layout limpo e que pode se adaptar muito bem às necessidades de qualquer negócio.

Você pode visitar a loja de demonstração aqui.

  • Stars - Estética uniforme e cores mais neutras. Perfeito para transmitir confiança e seriedade para sua loja, além de um visual moderno.

Você pode visitar a loja de demonstração aqui.

  • Stark - Esse tema utiliza o visual escuro. Perfeito para utilizar em ações promocionais ou na Black Friday.

    Você pode visitar a loja de demonstração aqui.

Ao selecionar o tema, você será direcionado ao editor, onde você pode personalizar a aparência da sua loja. Disponibilizamos também uma área de Preview pra você ir visualizando as configurações antes de salvá-las.

💡 Dica: Você pode definir as cores dos botões, Tipografia, Visual e botões, e Vitrine de produtos acessando as Configurações do tema.


Página inicial

Página inicial ou home do seu site é a página de apresentação do sua loja, aquela na qual o seu cliente irá acessar inicialmente

→ Cabeçalho

Visual

Você pode definir o visual do cabeçalho, escolhendo as cores do texto e cabeçalho da sua loja.


Configurações

Nesse campo, você pode marcar se deseja exibir o Menu de categorias, Busca e ajustar a posição que o logotipo irá ficar disposto em sua loja:

Caso opte por fixar a header em seu cabeçalho ao rolar a página, marque essa opção no Checkbox.

Barra superior

Aqui você pode escolher se deseja exibir a barra superior. Depois, marque se deseja exibir o WhatsApp e telefone/celular da loja.

Caso marque essa opção, serão exibidos os dados cadastrados em Configurações Geral Contatos da loja.

Você também pode inserir um link para rastreio de pedidos. Basta copiar a url do serviço de rastreio que utiliza.

Barra de anúncio

Você pode definir se deseja mostrar a barra de anúncio ou não. Caso opte por exibi-la somente na Página inicial da sua loja, marque no checkbox indicado.

Defina o texto que será apresentado. Você pode colocar algum benefício da sua loja, como Frete grátis ou algum aviso especial.

Você também pode inserir um Link, para redirecionar o cliente, tornando a barra de anúncio clicável.

Escolha a Cor da barra e a Cor texto que irá utilizar em seu cabeçalho.

Páginas promocionais

Aqui você pode configurar a cor do texto dos destaques promocionais de sua loja.

Para configurar ou editar um destaque, basta acessar em seu painel: Marketing → Promoções .

Estilo de cabeçalho

Defina o formato do cabeçalho da sua loja.

Você pode escolher entre as opções:

  • Logotipo centralizado e menu abaixo:

  • Logotipo à esquerda e menu ao lado:

  • Logotipo à esquerda e menu abaixo:

→ Banners e coleções

Nessa seção, você pode personalizar a posição e estrutura dos banners e coleções da sua loja.

Disponibilizamos essas opções de banners:

  • Banner principal (Banner para área principal da sua loja)

  • 3 Banner (Possui 3 colunas)

  • 2 Banner (Possui 2 colunas)

  • 1 Banner (Possui 1 coluna)

Os Banner principais são apresentados em carrossel e você pode cadastrá-los clicando em ''Adicionar banner''.

Depois, configure o tempo de Transição entre os banners e a Largura.

Você pode configurar normalmente os outros tipos de banners, de acordo com a estratégia que deseja utilizar em sua loja.

Na Coleção, você precisa selecionar entre as cadastradas anteriormente em seu painel.

As coleções serão exibidas na página inicial da loja, e por meio delas, você pode exibir um grupo de produtos em promoção, por exemplo.

Para mais informações de como criar um banner, leia esse artigo: Como criar um Banner?

Pra mais informações de como criar coleções, leia esse artigo: Loja virtual - Coleções

É possível configurar o Estilo em que essa coleção será apresentada, a Quantidade de colunas que ela irá possuir na versão mobile e o Número de produtos visíveis. Marque se deseja mostrar essa opção em ''Ver todos''.

💡 Dica: Para alterar a posição dos banners e coleções, basta arrastar com o cursor do seu mouse

→ Rodapé

Visual

Você pode definir o visual do rodapé, escolhendo as cores do texto e e do rodapé sua loja.

Newsletter

A Newsletter é uma ação que envia e-mail aos usuários que optarem por se cadastrarem. É possível criar várias estratégias de captação e gerar um cupom é uma ótima maneira para incentivar o cliente.

Caso opter por Exibir a Newsletter do rodapé da sua loja, marque Sim. Depois cadastre o título que será exibido ao cliente.

Descrição

Caso optar por mostrar a descrição, marque Sim e selecione no checkbox se desejar mostrar o logotipo e a descrição da loja, aquela na qual foi previamente cadastrada no seu painel em ConfiguraçõesGeral.

Categorias

Marque Sim, se optar Exibir as categorias em seu rodapé. Depois, selecione se deseja mostrar todas as categorias cadastradas ou apenas as que estão de destaque no menu da sua loja.

Páginas informativas


As páginas informativas são aquelas que contém conteúdos importantes sobre a loja. Através delas, é possível criar páginas como ''Quem nós somos'', ''Trocas e devoluções'', ''Política de frete'' e muito mais.

Marque Sim se deseja exibir as páginas informativas em seu rodapé.

Para mais informações sobre esse recurso, acesse: Como criar páginas informativas?

Atendimento

Marque Sim, se pretende exibir o meios de atendimento em sua loja. Depois assinale na checkbox quais canais de contato deseja mostrar em seu rodapé.

Você pode configurar essas informações em seu menu Configurações Geral Contato da loja.

Redes Sociais

Nessa seção, selecione as redes sociais que deseja exibir em sua rodapé. É possível configurá-las previamente, acessando ConfiguraçõesGeral Redes Sociais da loja.

Configurações Gerais

Aqui em Configurações gerais, é possível determinar de deseja exibir algumas informações gerais, como Ícones das opções de pagamento, Selo de loja protegida, Endereço da loja, Razão social e CNPJ/Nome e CPF e o Selo Usamos Yampi.



→ Adicionar seção

Aqui, você pode adicionar outros Banner e coleções, além de ativar e configurar esses recursos:

  • Vídeos do Youtube
    Essa seção permite que você adicione vídeos do Youtube na página inicial da loja

  • Destaques informativos

    Com essa nova seção você pode inserir informações rápidas como descontos, formas de pagamento, troca de produtos, condições de frete, etc.

É possível inserir até 4 destaques na seção e você consegue alterar ícone, texto e cores .

  • Avaliações

Permite destacar as avaliações dos compradores na Página inicial da sua loja.

Você pode inserir o título dessa seção em sua página inicial e selecionar as avaliações que deseja exibir aos seus clientes.



Página de categorias

As páginas de categorias, são todas aquelas que exibem itens ou conjuntos de itens classificados segundo sua categoria.

→ Cabeçalho

Nessa seção há todas as opções ensinadas anteriormente para a Página principal. Você configurar conforme fez anteriormente, se desejar.

→ Páginas de categorias

Configurações

Produtos por página: Escolha se deseja exibir 24 ou 36 produtos por página
Mostrar ordenação: Marque na checkbox se deseja exibir os filtros de ordenação ou não. Eles serão exibidos dessa forma:

Coluna de filtros

Marque Sim, se deseja exibir as colunas de filtro. Esses filtros são muito importantes e facilitam a busca do cliente.

Marque nas checkbox seguintes, se deseja exibir as colunas de categorias, preço e marca.

🔍 Ensinamos como você pode criar filtros personalizados nesse artigo: Como criar filtros?

Configuração de Banners

Para que seus banners apareçam na página, é necessário que estejam vinculados às categorias. Maque ''Sim'' para que seja vinculados às categoria indicadas.

Você também pode definir o tempo de transição dos seus banners.

→ Rodapé

Nessa seção, é necessário que configure o rodapé de suas páginas de categorias. Há todas as opções ensinadas anteriormente para a Página principal. Você pode configurar conforme fez anteriormente, se desejar.


Página de produtos

A página de produto é aquela onde estão localizadas todas as informações, descrições e avaliações de um produto. É muito importante que essa seção seja bem construída, pois é crucial para a conversão de suas vendas.

→ Cabeçalho

Nessa seção, é necessário que configure o cabeçalho de suas página de produtos.

Há todas as opções ensinadas anteriormente para a Página principal e Página de categorias. Você pode configurar conforme fez anteriormente, se desejar.

→ Seção principal

Configurações

Nessa seção, você irá configurar os seguintes recursos:

Texto do botão comprar (CTA): Você pode personalizar o nome do seu botão de compra. Por exemplo:

Mostrar seletor de quantidade: Marque na checkbox indicada se deseja exibir o seletor de quantidade. Ele irá ser apresentado dessa forma:

Mostrar sensor de escassez: Para que seja exibido o sensor, basta marcar na checkbox indicada. Ele irá ser exibido abaixo do botão de comprar, dessa forma:


Mostrar simulação de frete: Marque na checkbox se deseja exibir o simulador de frete na sua página do produto.


Mostrar modal de “Produtos adicionados ao carrinho” ao clicar no botão comprar: Esse modal será exibido assim que o cliente clicar no botão comprar. É apresentado dessa forma:

Mostrar opções de parcelamento: Irá mostrar o modal com as opções de parcelamento

Mostrar média de avaliações: Irá mostrar a média das avalições, tanto na página do produto, quanto na vitrine.


Informações dos produtos



Mostrar SKU: Marque essa opção se deseja mostrar o SKU do produtos em sua Página de produto. Essa informação será exibida acima do nome do produto, como no exemplo:


Mostrar disponibilidade: Essa opção permite que você mostre a disponibilidade do produto. Será apresentado em sua Página de produto da seguinte maneira:


Mostrar garantia: Caso o seu produto tenha garantia, você pode marcar essa opção, que exibirá o tempo de garantia do mesmo, em meses.

Mostrar botão flutuante para dispositivos móveis: Ao ativar esse recurso, será exibido um botão flutuante ''Comprar'' na visão mobile da tela do produto. Como no exemplo:


Produtos relacionados

Os produtos relacionados são produtos semelhantes ou que podem complementar a compra do produto que está sendo visualizado pelo cliente.

É possível configurar os produtos relacionados de um produto, acessando ProdutosProduto que deseja configurarProdutos relacionados.

Você pode definir o título dessa sessão, o estilo de exibição desse produtos (Carrossel ou em Grade) e a quantidade de colunas apresentadas na versão mobile.

💡 Vale lembrar que você pode ocultar essa seção, basta clicar nos três pontinhos ao lado do título da seção → Ocultar seção

Vídeo do YouTube

Você pode inserir vídeos na página do seu produto, se desejar. Pra adicioná-lo, basta acessar ProdutosProduto que deseja configurar InformaçõesDetalhes do produto Link no YouTube.

Você pode também pode alterar o título dessa seção em sua página, em Título.

💡 Vale lembrar que você pode ocultar essa seção, se desejar, basta clicar nos três pontinhos → Ocultar seção

Compre Junto

O Compre Junto oferece outros produtos similares (o que pode interessar ao cliente, dependendo da sua estratégia) ao que o consumidor está visualizando, em uma espécie de Combo. Caso o cliente aceite, os produtos são adicionados ao carrinho com desconto.

É possível alterar o Título da seção, e o Texto do botão comprar. Caso opte por exibir o modal de ''Produto adicionado ao carrinho'', assim que o cliente clicar no botão comprar, marque essa opção na checkbox.


Você pode criar essa ação acessando em seu menu Marketing Compre junto.

Ele será apresentado dessa forma na página do seu produto:


Nesse artigo explicamos como você pode configurar esse recurso: Como configurar o Compre junto?

→ Especificações


Essas configurações devem ser realizadas primeiramente acessando ProdutosProduto que deseja configurar Informações → Detalhes do produto


Depois, você pode alterar o Título da seção Descrição do produto, Especificações técnicas e Medidas.

💡 Vale lembrar que você pode ocultar essa seção, se desejar, basta clicar nos três pontinhos → Ocultar seção

→ Avaliações e dúvidas

As Avaliações e Dúvidas são uma importante ferramenta para você obter um feedback e receber as dúvidas sobre o seu produto. Através desse recurso, possível observar, de forma rápida e visual, quais produtos estão se destacando, quais geram mais dúvidas , e com isso analisar e definir estratégias diferentes para cada um, além de conceber mais credibilidade à sua loja.

Nessa seção, você pode definir a ordem que pretende exibir as Avaliações e dúvidas, e se deseja mostrar esses campos. Ademais, é possível mostrar a data dessas ações. Se optar por mostrá-las, marque a opção correspondente no checkbox.

Você também pode optar por mostrar a média dessas avaliações.

Seus clientes podem fazer essas avaliações ou pergunta na própria página do produto. Depois, basta você respondê-lo e aprovar, para que apareça na página do produto em questão.

Nesse artigo, mostramos como funciona esse recurso: Loja virtual - Avaliações e dúvidas

💡 Dica: Você pode alterar a posição dessas seções em sua página de produto. Basta arrastar com o cursor do seu mouse:

→ Rodapé

Nessa seção, é necessário que configure o rodapé de suas páginas de Produto. Há todas as opções ensinadas anteriormente para a Página inicial e Página de categorias. Você pode configurar conforme fez anteriormente, se desejar.


Página promocional

A página promocional permite que você dê mais destaques aos produtos com promoções e maior personalização para a sua loja. Você pode destacar as promoções que desejar no cabeçalho da sua Loja Virtual.

→ Cabeçalho

Nessa seção, você pode configurar e personalizar o cabeçalho de suas página de promoções.

Lembrando há todas as opções ensinadas anteriormente para a Página principal e Página de categorias e Página de produtos. Você pode configurar conforme fez anteriormente, se desejar.

Página promocional

Aqui que você pode configurar sua página promocional.

Clique em Configurar página promocional.

Você será redirecionado para as configurações da promoção em seu painel. Basta configurar, conforme as suas estratégias e selecionar a opção ''Destacar no menu".

Em seguida, acesse seu Editor de temas Página promocional e personalize a exibição dessa página.

→ Rodapé

Nessa seção, é necessário que configure o rodapé de suas págin promocional. Há todas as opções ensinadas anteriormente para a Página inicial, Página de categorias e Página de produtos. Você pode configurar conforme fez anteriormente, se desejar.


Configurações do tema


Aqui você pode configurar todos os aspectos visuais da sua loja, como o Carrinho de compras, Cores, Tipografia, Visual e Botões e disposição da sua Vitrine de produtos.

Um recurso muito interessante adicionamos recentemente é a possibilidade de adicionar Códigos para você personalizar a sua loja, além das configurações padrões que disponibilizamos.

Porém, ressaltamos que, por ser um código personalizado, não prestamos suporte para essas alterações no tema, e por isso recomendamos que essas modificações sejam realizadas por profissionais de sua confiança, pois um código incorreto pode quebrar o layout da sua loja.

Em caso de dúvidas, clique no balãozinho de atendimento em seu painel ou nos encaminhe por e-mail para [email protected] 😉



Artigos relacionados

Respondeu à sua pergunta?