⏱️ Tempo estimado: 30–45 minutos
Nível: ⭐⭐⭐☆☆ (Intermediário)
Antes de começar, você precisa:
Ter uma conta ativa na Loja Integrada com plano pago
Ter acesso ao painel administrativo da loja
Ter o Tema Galeria disponível em Soluções > Temas
O Tema Galeria é um dos temas exclusivos para assinantes de planos pagos da Loja Integrada. Ele oferece suporte a banners personalizáveis, WhatsApp flutuante, depoimentos de clientes, feed do Instagram e destaque de categorias no mobile.
Este artigo contém as mesmas informações do PDF disponível para download em Soluções > Temas.
Instalando o tema
01 - Acesse Soluções no menu lateral.
02 - Clique em Temas.
03 - Localize o tema Galeria e clique em Instalar.
Configurando o Visual da Loja
Após instalar, acesse Personalize a sua loja > Visual da Loja e aplique as configurações abaixo exatamente como indicado.
Disposição do layout
01 - Em Tamanho do layout, selecione Médio (1180px).
02 - Em Disposição do logotipo, selecione Logo à esquerda e disposição 03.
03 - Em Disposição da coluna lateral, selecione Sem coluna.
04 - Em Exibir menu superior, marque a opção e depois marque Categorias.
05 - Em Compactar subcategorias do menu lateral, marque a opção.
Cores predominantes
06 - Em Cor principal e Cor secundária, selecione as cores da sua marca.
Botões
07 - Em Cor padrão para os botões, escolha a cor de sua preferência.
08 - Em Texto do botão na página de produto, preencha com Comprar.
09 - Em Defina a ação deste botão, selecione Adicionar produto e ir para o carrinho.
10 - Em Texto do botão na listagem de produtos, preencha com Comprar.
11 - Em Defina a ação desse botão, selecione Ir para o produto.
Estilo do tema
12 - Em Cor da área de conteúdo (container), selecione Transparente.
13 - Em Altura máxima da imagem do produto, preencha com 1000px.
Backgrounds
14 - Selecione branco para todos os campos de background. A cor selecionada não interferirá no resultado da loja.
Fontes
15 - Em Fonte primária e Fonte dos títulos, selecione Raleway.
16 - Marque a opção 700 Bold.
Listagem de produtos
17 - Em Produtos por linha, selecione 3.
18 - Em Aplicar caixa de contorno aos produtos, selecione Sem caixa.
19 - Marque a opção Mostrar imagens extras ao passar o mouse sobre o produto na listagem.
Página do produto
20 - Em Disposição das miniaturas do produto, selecione Horizontal.
21 - Em Valor do produto em destaque, selecione Destacar preço.
Monte sua vitrine
22 - Selecione Lançamentos, Mais vendidos e Destaques.
23 - Defina a quantidade de produtos que deseja exibir.
24 - Marque a opção Exibir os produtos em carrossel.
Lazy Loading
25 - Localize a seção Lazy Loading e ative a opção. Essa configuração não pertence ao tema, mas melhora o desempenho da loja. Veja o material de ajuda sobre Lazy Loading.
26 - Clique em Salvar alterações.
Ajustando as configurações gerais
As configurações abaixo ficam em um caminho diferente. Acesse Configurações > Gerais e aplique os ajustes indicados.
Checkout
01 - Localize a seção Checkout e marque a opção Solicitar login antes de iniciar o checkout.
LGPD
02 - Localize a seção LGPD e selecione todas as opções disponíveis.
⚠️ Atenção: o Tema Galeria exibe uma faixa fixa no mobile para aceite da política de privacidade. Se a sua loja ainda não tiver uma política de privacidade criada, essa faixa aparecerá em branco para o visitante. Configure sua política de privacidade antes de ativar o tema. Veja como fazer isso no material de ajuda sobre LGPD.
03 - Clique em Salvar alterações.
Configurando os banners
Com o tema instalado, a configuração de banners funciona de forma diferente do padrão da plataforma.
01 - Acesse Personalize a sua loja.
02 - Clique em Banners.
Os campos disponíveis para cada posição são:
Banner | Dimensões recomendadas |
Banner Tarja | 2000 × 75 px |
Full Banner | 2000 × 450 px |
Mini Banner | 425 × 545 px |
Tarja Mobile | 600 × 125 px |
💡 Dica: por padrão, o Mini Banner aparece somente na página inicial. O Banner Tarja e o Full Banner podem ser configurados para aparecer em outras páginas.
Configurando cada banner
03 - Preencha os campos de cada banner:
Nome do banner: nome para identificação interna
Página da publicação: páginas onde o banner será exibido
Link do banner: página que abrirá ao clicar no banner
Quando clicar no link: escolha entre abrir na mesma página ou em uma nova aba
Título do banner: deixe em branco
Upload da imagem: envie um arquivo JPG ou PNG com no máximo 500 KB
Configurando o Banner Tarja Mobile
O Banner Tarja Mobile é enviado de forma diferente dos demais — o arquivo precisa ser hospedado primeiro no Gerenciador de Arquivos.
04 - Acesse Configurações > Gerenciador de Arquivos.
05 - Clique em Enviar um arquivo, escolha a imagem e realize o upload.
06 - Após o upload, copie a URL gerada.
07 - Cole essa URL no campo tarjaMobile dentro do código Config do tema, em Personalize sua loja > Incluir código HTML.
Adicionando o código base de funcionalidades
Esta etapa ativa o WhatsApp flutuante, o vídeo, o Banner Tarja Mobile, a frase na barra superior e os depoimentos de clientes.
Criando a página de configuração
01 - No menu lateral, acesse Personalize sua loja.
02 - Clique em Incluir código HTML.
03 - Clique em Adicionar Código.
04 - Configure a página com os valores abaixo:
Descrição:
Config do temaLocal de publicação: Rodapé
Página de publicação: Todas as páginas
Tipo: HTML
05 - Cole o código abaixo no campo Conteúdo:
<script>
var configWhatsapp = {
whatsapp: "+551199999999", // Número do WhatsApp
texto: "Olá! Estou acessando a loja e preciso de ajuda.",
posicao: "right", // 'right' ou 'left'
};
var configBannerextra = {
tarjaMobile: 'https://cdn.awsli.com.br/2168/2168440/arquivos/Tarja_Mobile.png',
linktarjaMobile: ' '
};
var configVideohome = {
videoref: 'styTBw6Urfw',
imagemPreview: 'https://cdn.awsli.com.br/1736/1736356/arquivos/video.PNG'
};
var configFrase = {
fraseBarra: 'Aceitamos PIX',
imagemLink: 'https://cdn.awsli.com.br/2692/2692187/arquivos/pix-icone.png'
};
var varBuscaPlaceholder = "Buscar produtos";
var varTituloPaginas = "Conteúdos";
var varTituloCategorias = "Categorias";
var varTituloContato = "Contato";
var varTituloPagamento = "Formas de pagamento";
var varTituloRedesSociais = "Redes Sociais";
var varTituloSelos = "Site protegido";
</script>
<style>
:root {
--cor-tituloContato: #371E56;
--cor-textoContato: #371E56;
--cor-menu: #65419A;
--cor-tituloVitrine: #65419A;
--cor-barraSuperior: #65419A;
--cor-textoBarraSuperior: #FFFFFF;
--cor-botaoRastreio: #FFFFFF;
--cor-textoBotaoRastreio: #65419a;
--cor-botaoRastreioHover: #65419a;
--cor-textoBotaoRastreioHover: #FFFFFF;
--cor-textoRastreioTitulo: #65419a;
--cor-nomeDepoimento: #000000;
--cor-localDepoimento: #AAAAAA;
--cor-textoDepoimento: #707070;
--cor-tituloRodape: #65419A;
--cor-textoRodape: #65419A;
--cor-textoRodapeHover: #371E56;
--cor-nomeProduto: #4c4b4b;
--cor-textoFrete: #666666;
}
</style>
06 - Clique em Criar código.
⚠️ Atenção: os dados acima são os valores padrão do tema. Você vai personalizá-los na próxima etapa — não é necessário adicionar os códigos novamente.
Personalizando as funcionalidades
Todas as alterações abaixo são feitas editando o código Config do tema criado na etapa anterior, em Personalize sua loja > Incluir código HTML.
💡 Dica: somente os valores entre aspas podem ser modificados. Não altere os nomes das variáveis nem remova as aspas.
WhatsApp flutuante
Localize o trecho configWhatsapp e edite:
whatsapp: número no formato+5511999999999(55 = Brasil, 11 = DDD)texto: frase exibida na chamada para ação
Vídeo
Localize o trecho configVideohome e edite:
videoref: código do vídeo no YouTube (parte final da URL após?v=)imagemPreview: URL de uma imagem de preview (opcional — se preenchida, o vídeo só carrega ao clicar)
⚠️ Atenção: vídeos em playlist ou no formato "Shorts" do YouTube não funcionam. Use apenas o formato padrão watch.
Banner Tarja Mobile
Localize o trecho configBannerextra e edite:
tarjaMobile: substitua pela URL da imagem enviada via Configurações > Gerenciador de Arquivos > Enviar um arquivo
Frase na barra superior
Localize o trecho configFrase e edite:
fraseBarra: texto exibido na barra superior (ex:Aceitamos PIX)imagemLink: URL do ícone exibido ao lado da frase (opcional)
Após as alterações, clique em Criar código.
Adicionando depoimentos de clientes
01 - Acesse Personalize sua loja > Incluir código HTML.
02 - Clique em Adicionar Código.
03 - Configure a página com os valores abaixo:
Descrição:
Depoimentos configuraçãoLocal de publicação: Rodapé
Página de publicação: Todas as páginas
Tipo: Javascript
04 - Cole e personalize o código abaixo:
// DEPOIMENTOS
DEPOIMENTOS = [
{
imagem: 'https://cdn.awsli.com.br/1651/1651369/arquivos/1.png',
nome: 'Renata',
local: 'São Paulo - SP',
depoimento: 'Adorei! O produto é sensacional. Vou recomendar a todos os meus amigos.'
},
];
05 - Clique em Salvar Alterações.
Para adicionar mais depoimentos, replique o bloco entre { e }, para cada novo depoimento. O carrossel é ativado automaticamente quando há mais de um.
Para trocar a foto do cliente, faça o upload da imagem em Configurações > Gerenciador de Arquivos e substitua a URL no campo imagem.
Configurando o feed do Instagram
01 - No menu lateral, acesse Redes Sociais.
02 - Configure o Instagram no campo correspondente.
Nenhum código adicional é necessário para esta funcionalidade.
Personalizando cores
As cores do tema são controladas via CSS, no mesmo código Config do tema criado anteriormente.
01 - Acesse Personalize sua loja > Incluir código HTML.
02 - Abra o código Config do tema e edite os valores das variáveis no bloco <style>:
Variável | O que altera |
| Cor do texto dos itens do menu |
| Cor da barra no topo da página |
| Cor do texto na barra superior |
| Cor dos títulos das vitrines |
| Cor do botão "Rastrear" |
| Cor do texto do botão "Rastrear" |
| Cor do nome do cliente no depoimento |
| Cor do texto do depoimento |
| Cor dos títulos no rodapé |
| Cor dos textos no rodapé |
| Cor do nome do produto |
| Cor do texto "Calcule o frete" |
03 - Clique em Salvar página.
Personalizando títulos
No mesmo código Config do tema, localize e edite as variáveis abaixo conforme necessário:
Variável | O que altera |
| Texto do campo de busca |
| Título da coluna de páginas no rodapé |
| Título da seção de categorias |
| Título da seção de contato |
| Título da seção de formas de pagamento |
| Título da seção de redes sociais |
| Título do selo de site protegido |
Configurando os destaques de categorias no mobile
Verificando as categorias
01 - Acesse Produtos > Categorias para verificar quantas categorias sua loja possui e a ordenação atual.
Enviando as imagens de destaque
02 - Acesse Configurações > Gerenciador de Arquivos.
03 - Clique em Enviar um arquivo e faça o upload de cada imagem de destaque.
💡 Dica: use imagens de 150 × 150 px para melhor resultado no mobile.
Configurando a ordenação via CSS
04 - Acesse Personalize sua loja > Editar CSS.
05 - Cole e adapte o código abaixo para cada categoria, trocando o número da posição e a URL da imagem:
@media screen and (max-width: 767px) {
menuinsta > div > div > div > li.slick-slide:nth-child(1) > a:before {
background-image: url(https://cdn.awsli.com.br/exemplo/imagem.png);
}
}
O número entre parênteses (nth-child(1)) corresponde à posição da categoria na ordenação. Replique o bloco para configurar até 8 categorias.
Adicionando o código do carrossel
06 - Acesse Personalize sua loja > Incluir código HTML e clique em Adicionar Código.
07 - Configure a página com os valores abaixo:
Descrição:
Slick Loja IntegradaLocal de publicação: Cabeçalho
Página de publicação: Todas as páginas
Tipo: HTML
08 - Cole o código abaixo no campo Conteúdo:
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
09 - Clique em Salvar código.
Dúvidas Frequentes
Por que aparece uma faixa branca na parte inferior da loja no celular?
Essa faixa é fixa e serve para o visitante aceitar a política de privacidade da sua loja. Se ela aparece em branco, é porque a política de privacidade ainda não foi configurada no painel. Acesse as configurações de LGPD e crie a política antes de ativar o tema. Veja como fazer isso no material de ajuda sobre LGPD.
Posso usar qualquer vídeo do YouTube no tema?
Não. O vídeo precisa estar no formato padrão watch do YouTube. Vídeos em playlists ou no formato "Shorts" não funcionam.
Quantas categorias posso configurar no destaque mobile?
Até 8 categorias.
O Mini Banner aparece em todas as páginas?
Por padrão, somente na página inicial. Para exibi-lo em outras páginas, ajuste as configurações do banner.
Preciso adicionar os códigos de funcionalidade mais de uma vez?
Não. Os códigos são adicionados uma única vez. Após isso, todas as personalizações são feitas editando o código já criado.
Resumo dos passos principais
Instalar o tema em Soluções > Temas
Configurar o Visual da Loja em Personalize a sua loja > Visual da Loja
Ajustar Checkout, LGPD e Lazy Loading em Configurações > Gerais
Configurar os banners com as dimensões corretas
Criar a página Config do tema com o código base de funcionalidades
Personalizar WhatsApp, vídeo, banner mobile e frase na barra superior
Adicionar depoimentos de clientes via Javascript
Configurar o feed do Instagram em Redes Sociais
Personalizar cores e títulos editando o código Config do tema
Configurar os destaques de categorias no mobile via CSS e código do carrossel
Pronto! Com todas essas etapas concluídas, o Tema Galeria estará completamente configurado e personalizado na sua loja.
#tema-galeria #temas #personalizacao #visual-da-loja #lgpd #politica-de-privacidade #banners #whatsapp #mobile #configuracao #planos-pagos