Manual do Tema

Yes Pro

Suporte do Tema

Bem Vindo!

Bem-vindo ao tema Yes Pro! Este guia foi criado para ajudá-lo a navegar e configurar seu tema de maneira rápida e eficiente. Nosso objetivo é garantir que sua experiência seja a melhor possível.

Se precisar de ajuda, nossa equipe de suporte está pronta para ajudar! Você pode entrar em contato pelos seguintes meios:

Configurando o tema

01. Publicação

Após adquirir o tema Yes Pro e ter o pagamento aprovado, ele estará disponível para ser ativado em sua loja virtual. Siga as etapas abaixo para ativar o tema e começar a personalizar seu design:

Acesse: Minha Loja » Aparência da Loja » Temas Instalados e não Publicados » Publicar.

Como Publicar tema

02. Personalização

Depois de publicar o tema em sua loja virtual, você poderá personalizá-lo facilmente para deixá-lo com a cara do seu negócio. Para acessar as opções de personalização, basta clicar na opção de Editar Tema em Tema Publicado


Importante

Sobre nosso Suporte

  • Você tem o direito ao nosso suporte por 180 dias e lhe responderemos em até 48 horas úteis.
  • Não prestaremos suporte gratuito caso haja implementações ou alterações de terceiros que ao serem inseridos tenham causado algum tipo de problema.
  • O suporte é para dúvidas e possíveis falhas do tema, nossos testes ocorrem no tema padrão atualizado.
  • Configurações e funcionalidades nativas da plataforma é de responsabilidade do lojista ou por meio de orçamento através de e-mail e WhatsApp.
  • Não recomendamos a alteração HTML/CSS/JS do tema instalado, caso não possua conhecimento em programação.
  • Não temos obrigação de suporte caso o código padrão seja modificado.
  • Todo e qualquer tipo de problema com relação à plataforma, como configuração de frete, formas de pagamento, integrações e outros, deve ser tratado diretamente com o suporte da plataforma.
  • Recomendamos cadastrar produtos com as imagens padrão, sendo todas do mesmo tamanho de 1300 x 1600px para ficar conforme o demonstrativo.

Minha Loja

Introdução

Para realizar a adição ou alteração da sua logo ou conectar suas redes sociais a sua loja virtual, deverá ir na primeira aba após clicar em 'Editar Tema', como mostrado na imagem abaixo:

Aba de Minha Loja

Para adicionar sua logo, deverá arrasta-lá até a área destacada ou selecionar uma imagem de seu computador

Como modificar imagem da logo

Tamanho adequado da logo: 290x100


Redes Sociais

Aqui você poderá adicionar suas redes sociais, que ficarão visíveis para que os usuários as acessem. Elas estarão disponíveis no rodapé da loja

Adicionar as redes sociais

Cores

Cores Gerais do Tema

Na aba Cores, você encontrará diversas opções para personalizar as cores da sua loja. Essas opções estão divididas em Cores Gerais do Tema, que incluem as principais cores que impactam várias partes do layout, cores do Cabeçalho e cores do Rodapé. Cada cor tem sua utilidade indicada no topo, com uma descrição das áreas afetadas exibida logo abaixo. Isso torna o processo de personalização mais intuitivo e eficiente.

Cores Gerais do Tema

Cores Complementares do Tema

As Cores Complementares diferem das Cores Gerais, pois não estão centralizadas na aba de "Cores". Em vez disso, elas são configuradas diretamente em cada área específica à qual pertencem, como no exemplo da imagem. Essas cores oferecem uma personalização ainda mais detalhada, permitindo que você ajuste elementos únicos em diferentes seções da loja. Basta navegar até a funcionalidade desejada para encontrar as opções de cores disponíveis, tornando a personalização ainda mais flexível.

Cores Gerais do Tema

Banners

Introdução

IMPORTANTE: Os banners devem ser adicionados pelo painel da plataforma Tray.
No painel lateral esquerdo vá em Marketing > Banners

Configuração básica na edição do tema para pausas no slide e tempo de exibição

Cores Gerais do Tema

A sessão Banners é uma funcionalidade essencial para a personalização da página home em um site. Por meio dessa sessão, é possível adicionar, ajustar e configurar todos os banners da página, tanto para a versão desktop quanto para a versão mobile.

Cores Gerais do Tema

Para adicionar o Banner Home, siga o passo a passo abaixo.

  1. Acesse a sua conta na plataforma da Tray.
  2. Na página inicial, clique na aba “Marketing”, e depois “Banners”.
  3. Clique em “Cadastrar banner”.
  4. Insira o nome do banner como Banner Home.
  5. Ativar carrossel de imagens?, selecione a opção de Sim.
  6. No campo "Adicionar Imagem", insira a imagem que desejar. Para inserir mais que um banner, clique em “Adicionar mais Imagens”.
  7. "Local de exibição" selecione Banner Home.
  8. Role a tela até o final e clique em “Salvar”.

Tamanho adequado do Banner Home: 1920x600

Agora para adicionar o Banner Home para Mobile siga o passo a passo abaixo:

  1. Clique em “Cadastrar banner”.
  2. Insira o nome do banner como Banner Home Mobile.
  3. Ativar carrossel de imagens?, selecione a opção de Sim.
  4. No campo "Adicionar Imagem", insira a imagem que desejar. Para inserir mais que um banner, clique em “Adicionar mais Imagens”.
  5. "Local de exibição" selecione Banner Home Mobile.
  6. Role a tela até o final e clique em “Salvar”.

Tamanho adequado do Banner Home Mobile: 500x500

Seguindo corretamente esse passo a passo seu Banner já estará em funcionamento na loja!


Importante: São três banners juntos que devem ser cadastrados individualmente.

Cores Gerais do Tema

Para adicionar o Banner Home, siga o passo a passo abaixo.

Primeiro Banner

  1. Acesse a sua conta na plataforma da Tray.
  2. Na página inicial, clique na aba “Marketing”, e depois “Banners”.
  3. Clique em “Cadastrar banner”.
  4. Insira o nome do banner como Banner mini 1
  5. Ativar carrossel de imagens?, selecione a opção Não.
  6. No campo "Adicionar Imagem", insira a imagem que desejar.
  7. "Local de exibição" selecione Banner Extra 10
  8. Role a tela até o final e clique em “Salvar”.
Segundo Banner
  1. Faça o mesmo procedimento do primeiro banner trocando apenas o nome para Banner mini 2 e em Local de exibição coloque extra 11.

Terceiro Banner

  1. Faça o mesmo procedimento do primeiro banner trocando apenas o nome para Banner mini 3 e em Local de exibição coloque extra 12.

Tamanho adequado de cada Banner: 400x400


Banners entre seções

Importante: São dois banners juntos que devem ser cadastrados individualmente.

Cores Gerais do Tema

Para adicionar os Banners entre seções, siga o passo a passo abaixo.

Primeiro Banner

  1. Acesse a sua conta na plataforma da Tray.
  2. Na página inicial, clique na aba “Marketing”, e depois “Banners”.
  3. Clique em “Cadastrar banner”.
  4. Insira o nome do banner como Banner entre Sessão 1
  5. Ativar carrossel de imagens?, selecione a opção de Não.
  6. No campo "Adicionar Imagem", insira a imagem que desejar.
  7. "Local de exibição" selecione Banner Extra 8
  8. Role a tela até o final e clique em “Salvar”.

Segundo Banner

  1. Clique em “Cadastrar banner”.
  2. Insira o nome do banner como Banner entre Sessão 2
  3. Ativar carrossel de imagens?, selecione a opção de Não.
  4. No campo "Adicionar Imagem", insira a imagem que desejar.
  5. "Local de exibição" selecione Banner Extra 9
  6. Role a tela até o final e clique em “Salvar”.

Tamanho adequado de cada Banner: 655x445


Importante: Os banners de desktop e mobile são cadastrados individualmente, e possuem tamanhos diferentes

Banner Container

Para adicionar o Banner Coantainer, siga o passo a passo abaixo.

  1. Acesse a sua conta na plataforma da Tray.
  2. Na página inicial, clique na aba “Marketing”, e depois “Banners”.
  3. Clique em “Cadastrar banner”.
  4. Insira o nome do banner como Banner Container Desktop, para ser exibido na tela desktop ou Banner Container Mobile, para ser exibido em mobile.
  5. Ativar carrossel de imagens?, selecione a opção de Não.
  6. No campo "Imagem do banner", insira a imagem que desejar.
  7. "Local de exibição" selecione Banner extra 5, para desktop.
  8. "Local de exibição" selecione Banner extra 6, para mobile.
  9. Role a tela até o final e clique em “Salvar”.

Tamanho adequado para o banner rodapé DESKTOP: 1290x300
Tamanho adequado para o banner rodapé MOBILE: 400x400


Importante: Os banners de desktop e mobile são cadastrados individualmente, e possuem tamanhos diferentes

Banner Rodapé

Para adicionar o Banner do rodapé, siga o passo a passo abaixo.

  1. Acesse a sua conta na plataforma da Tray.
  2. Na página inicial, clique na aba “Marketing”, e depois “Banners”.
  3. Clique em “Cadastrar banner”.
  4. Insira o nome do banner como Banner Rodape Desktop, para ser exibido na tela desktop ou Banner Rodape Mobile, para ser exibido em mobile.
  5. Ativar carrossel de imagens?, selecione a opção de Não.
  6. No campo "Imagem do banner", insira a imagem que desejar.
  7. "Local de exibição" selecione Banner Rodapé, para desktop.
  8. "Local de exibição" selecione Banner Extra 3, para mobile.
  9. Role a tela até o final e clique em “Salvar”.

Tamanho adequado para o banner rodapé DESKTOP: 1920x300
Tamanho adequado para o banner rodapé MOBILE: 400x400


Layout da Loja

Vitrine de Produtos

Na seção de Vitrine de Produtos, localizada na aba de Layout da Loja na edição do tema, você encontra diversas opções para personalizar a exibição dos produtos. Entre elas:

  • Texto do botão na listagem dos produtos: Apenas da listagem dos produtos
  • Selo Adicional: Texto dos selos adicionais que são adicionados na hora do cadastro de produto
  • Exibir botão de WhatsApp nos produtos: Leva diretamente para o número inserido com as informações do produto escolhido
  • Exibir a segunda imagem ao passar o mouse: Habilita a exibição da segunda imagem cadastrada do produto ao passar o cursor
  • Vitrine dos Produtos: Configure até 3 vitrines, podendo definir seu título, quantidade de produtos e tipo de vitrine
  • Cor dos Selos: Cores aplicadas nos selos de destaque, lançamento e Adcional

Imagem da aba de layout da loja

Página do Produto

Ainda na aba Layout da Loja, na seção Página do Produto, você pode habilitar:

  • Exibição das Avaliações
  • Exibição dos Produtos relacionados (na pagina do produto)
  • Zoom nas imagens dos produtos na página de produto. O zoom tem apenas um modo de exibição, não sendo possível personalização

Cores Gerais do Tema

Complementares

Introdução

Na aba Complementares, ainda dentro da edição do tema, você encontrará diversas funcionalidades e elementos adicionais personalizáveis. Essas opções permitem ajustar detalhes que agregam valor à sua loja, melhorando tanto a experiência do cliente quanto a aparência geral do site.

Explore as opções disponíveis para aproveitar ao máximo todos os recursos que o tema oferece!

Cores Gerais do Tema

TopBar

A TopBar permite exibir até três informações estratégicas no topo da loja no formato carrossel, podendo ser visível tamnto para desktop quanto mobile. É possível personalizar a cor da TopBar diretamente nessa mesma aba, alinhando-a à identidade visual da sua loja.

imagem das opções da TopBar

Visão na loja:

imagem da TopBar

Temporizador

O Temporizador é uma funcionalidade ideal para destacar promoções e criar senso de urgência na sua loja. Totalmente personalizável, ele permite configurar o tempo de duração da oferta, o texto de destaque e as cores. Essa ferramenta é perfeita para atrair a atenção dos clientes, incentivar compras rápidas e aumentar as conversões, especialmente em campanhas promocionais ou ações sazonais.

imagem das opções do temporizador

Visão na loja:

imagem do temporizador

Sessão de Categorias

A Sessão de Categorias permite criar um espaço dedicado para destacar até 5 categorias da sua loja. Você pode selecionar as imagens e melhores categorias e adicionar links personalizados para redirecionar os clientes diretamente para as páginas correspondentes. Essa funcionalidade é ideal para destacar os produtos mais populares, melhorar a navegação e direcionar os clientes para as áreas mais estratégicas da sua loja.

sessão de categorias - opções

Visão na loja:

sessão de categorias

Tamanho adequado para as imagens das categorias: 300x300


Tarja Informativa

A Tarja Informativa é uma seção localizada logo abaixo dos banners da home, ideal para destacar informações importantes de forma clara e visual. Você pode subir imagens personalizadas para os ícones e adicionar textos informativos, como condições especiais de frete, descontos, formas de parcelamento ou políticas de troca. Essa funcionalidade ajuda a reforçar mensagens estratégicas e a transmitir segurança e benefícios aos seus clientes.

Tarja Informativa - opções

Visão na loja:

Tarja Informativa

Tamanho adequado para os ícones da Tarja: 60x60


No Menu de Categorias é possível ajustar a quantidade de categorias que serão exibidas. Escolha a quantidade ideal para sua loja, por padrão são 6 categorias (sem contar o "todas categorias").

Você também poderá modificar o texto para "Todas Categorias" e as cores do menu

Importante: Os produtos exibidos no menu das categorias aparecerão se a categoria em questão tiver subcategorias, os produtos são escolhidos aleatóriamente dentro da categoria, não é possível escolher.

menu categorias painel

Visão na loja:

menu categorias visual

Marcas

Na seção de marcas você pode exibir até 8 logos de marcas que preferir, junto delas poderá adicionar um link da sua preferência

Abaixo também poderá personalizar as cores dos dots dessa seção

seção de marcas do painel

Visão na loja:

seção de marcas

Cupom Especial

No cupom especial você pode definir título, descrição, código do cupom e timer. Perfeito para exibição de cupons da loja

Abaixo também poderá personalizar as cores referente a essa seção

seção de cupom

Visão na loja:

seção de cupom

Newsletter (Pop-Up)

Aqui você poderá ativar e modificar o visual do pop-up de newsletter sendo possível adicionar uma imagem que aparecerá do lado esquerdo do pop-up (exibida apenas no desktop), e a opção de exibir links de "Meus Pedidos", "Minha Conta" e "Contato"

Importante: O pop-up é exibido 5 segundos após o usuário acessar a loja e não é possível alterar esse valor, para o mesmo usuário o pop-up será mostrado a cada 24 horas que é o tempo necessário para dissipação do cache do navegador

Abaixo também poderá personalizar as cores referente a esse pop-up

newsletter painel

Visão na loja:

newsletter visual

Tamanho adequado da imagem para newsletter: 400x470

Botões Flutuantes

Aqui você poderá escolher quais botões gostaria de ativar:

  • Botão de WhatsApp: Defina um número e uma mensagem padrão
  • Botão do Instagram: Coloque seu arroba (@) do instagram para direcionamento
  • Botão de Volta ao Topo: Aparece logo após a primeira seção e faz com que o usuário retorne ao topo da loja

botões flutuantes - painel

Feed do Instagram

Na seção de feed do instagram você poderá selecionar até 8 imagens dos seus melhores posts do instagram e coloca-los em exibição na loja axexando o link de cada post na imagem, fazendo com que o usuário seja redirecionado diretamente ao seu instagram ou post original

botões flutuantes - painel

Visual na Loja:

newsletter visual

Tamanho adequado de cada Imagem: 400x400



Gabaritos

Banner Home (Desktop)

Localização no Painel da Tray: Marketing > Banners > Banner Home Desktop

Tamanho recomendado: 1920x600

Bnner Home Desktop

Versão mobile: Marketing > Banners > Banner Home Mobile

Tamanho recomendado: 500x500



Banners Mini (Banner Triplo)

Localização no Painel da Tray: Marketing > Banners > extra 10, extra 11 e extra 12

Tamanho recomendado para cada banner individualmente: 400x400

Bnner Trplo

Banners entre seção

Localização no Painel da Tray: Marketing > Banners > extra 8 e extra 9

Tamanho recomendado para cada banner individualmente: 635x300

Bnner entre secao

Banner Container

Localização no Painel da Tray: Marketing > Banners > Extra 5

Tamanho recomendado: 1290x300

Bnner Container

Versão mobile: Marketing > Banners > Banner Home Mobile

Tamanho recomendado: 500x500



Banner Rodapé

Localização no Painel da Tray: Marketing > Banners > Banner Rodapé

Tamanho recomendado: 1920x300

Bnner entre secao

Versão mobile: Marketing > Banners > Extra3

Tamanho recomendado: 500x500



Imagem dos Produtos

Cadastrada junto com os produtos

Tamanho recomendado: 100x1000

Produtos Vitrine

Imagens da seção de categorias

Localização no Painel do tema: Complementares > Seção de Categorias

Tamanho recomendado para cada imagem: 300x300

Imagens Categorias

Ícones da Tarja Informativa

Localização no Painel do tema: Complementares > Tarja Informativa

Tamanho recomendado para cada imagem: 60x60

Ícones da tarja informativa

Imagens para feed do instagram

Localização no Painel do tema: Complementares > Feed do Instagram

Tamanho recomendado para cada imagem: 400x400

Imagens Feed Instagram