Antes de começar a configuração, será necessário realizar a instalação.

Para instalar, siga os passos abaixo:

Após a instalação do tema, é necessário você realizar as configurações principais para o funcionamento correto do tema. As configurações precisam estar idênticas como apresentado abaixo:

Para configurar, acesse o menu lateral esquerdo e clique em: Personalize a sua loja > Visual da Loja.

Em cores predominantes, você deve selecionar as duas cores da sua marca que você deseja que tenha mais destaque no layout da sua loja.

A cor que estiver selecionada não irá interferir no resultado na loja. Selecione branco para todos os campos apresentados abaixo:

Essa configuração não interfere no tema, mas é importante estar habilitada, para saber mais sobre essa configuração configura o material de ajuda, clicando aqui.

Essa configuração não pertence ao tema, mas é importante estar configurada em sua loja e para saber mais sobre essa configuração, acesse o material de ajuda, clicando aqui.

Agora que todas as configurações foram realizadas, clique em: "Salvar alterações".

Com a instalação do tema, a configuração dos Banners na Loja Integrada ocorrerá de uma maneira diferente. Siga os passos abaixo:

1. Acesse Personalize a sua loja;

2. Clique em Banners;

3. Carregando a página, note que existem diversos campos disponíveis para adição dos banners. Na imagem abaixo, os banners já estão nos locais que o tema suporta:

Para os banners disponíveis, indicamos os formatos abaixo:

Na página de criação do banner, é possível realizar configurações:

Agora configuremos todas as funcionalidades do tema. Nessa parte do material, é importante redobrar a atenção, pois será necessário adicionar e editar alguns códigos no seu painel.

1. No menu lateral, acesse "Personalize sua loja";

2. Clique em "Incluir código HTML"

3. Clique na opção "Adicionar Código"

Agora serão configuradas as seguintes funcionalidades:

Para a adição dos códigos do tema, será necessário criar uma página onde será adicionado o código base do tema para as funcionalidades.

A página precisará estar configurada exatamente da forma abaixo:

<script>

var configWhatsapp = {

whatsapp: "+551199999999", // Número do WhatsApp

// Chamada para ação

texto: "Olá! Estou acessando a loja e preciso de ajuda.", posicao: "right", // Posição do widget na página '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;

--icone-menu1:

url(https://cdn.awsli.com.br/2258/2258260/arquivos/1-acessorios.png);

--icone-menu2: url(https://cdn.awsli.com.br/2258/2258260/arquivos/2-blusas.png);

--icone-menu3: url(https://cdn.awsli.com.br/2258/2258260/arquivos/3-calcas.png);

--icone-menu4: url(https://cdn.awsli.com.br/2258/2258260/arquivos/4-saias.png);

--icone-menu5: url(https://cdn.awsli.com.br/2258/2258260/arquivos/5-oferta.png);

--icone-menu6: url(https://cdn.awsli.com.br/2258/2258260/arquivos/6-simples.png);

--icone-menu7: url(https://cdn.awsli.com.br/2258/2258260/arquivos/6-simples.png);

--icone-menu8: url(https://cdn.awsli.com.br/2258/2258260/arquivos/6-simples.png);

}

</style>

Ficará dessa forma:

Após colar o código clique em “Criar código” em verde do lado inferior direito da página.

Com os códigos acima as funcionalidades ainda estarão com os dados padrão do tema galeria da Loja Integrada.

Com o código adicionado na página de HTML, é possível personalizar os códigos.

// * WHATSAPP FLUTUANTE

var configWhatsapp = {

whatsapp: "+5511999722470", // Número do WhatsApp

call_to_action: "Orçamento ou dúvidas?",

// Chamada para ação position: "right", // Posição do widget na página 'right' ou 'left'

¦55 é código do Brasil, 11 é o código de área (no exemplo estamos utilizando um número de São Paulo).

O restante é o número do WhatsApp (não utilize nenhuma pontuação ou espaçamento entre os números e não exclua as aspas).

Você também pode alterar a frase “orçamento ou dúvidas?” para qualquer outra frase de sua preferência.

// * VÍDEO

var configVideohome = { videoref: 'AXOfw9x-hVw'

videoref: 'styTBw6Urfw',

imagemPreview: 'https://cdn.awsli.com.br/1736/1736356/arquivos/video.PNG'

};

Pode ser utilizado qualquer vídeo que esteja no YouTube. Para isso basta copiar o seguinte código do vídeo:

Após copiado, substitua o código no local destacado em videoref como no modelo acima.

Opcionalmente, você pode incluir uma imagem de pré-visualização (imagemPreview) do vídeo. Assim, o vídeo só será carregado se clicarmos na imagem, tornando o carregamento da página mais rápido.

// * BANNER TARJA MOBILE

var configBannerextra = {

tarjaMobile: 'https://cdn.awsli.com.br/1242/1242028/arquivos/tarja_mo- bilenew.png',

linktarjaMobile: ' '

};

O link do Tarja Mobile é criado na própria Loja Integrada. Para configurar, siga os passos abaixo:

1. No menu lateral do seu painel, acesse Configurações;

2. Clique em Gerenciador de Arquivos;

3. Já na página, clique em "Enviar um Arquivo".

4. Escolha o arquivo e realize o upload;

5. Assim que importado, será gerado uma URL:

6. Substitua a URL de tarjaMobile por essa nova URL.

Dessa forma, a imagem do Banner Tarja Mobile será atualizada.

// * FRASE PIX NA PARTE SUPERIOR DA PÁGINA

var configFrase ={ fraseBarra: 'Aceitamos PIX', imagemLink:

'https://cdn.awsli.com.br/2692/2692187/arquivos/pix-icone.png'

};

A frase pix na parte superior da página já está configurada com o ícone do PIX e esse ícone é editável, podendo ser substituído por outra imagem. (não remova as aspas simples no começo e no final da frase).

O procedimento de upload de imagem é o mesmo do Banner Tarja Mobile.

Feito todas as personalizações necessárias, clique em “Criar código”.

A funcionalidade de depoimentos de clientes é um script que pode ser adicionado a sua loja manualmente.

1. No menu lateral, acesse: Personalize sua loja > Incluir código HTML

2. Assim que a página carregar, clique na opção Adicionar Código, como mostra na imagem abaixo.

3. Configure a página, que deverá estar exatamente igual à imagem abaixo:

4. Copie o código abaixo e cole em "Conteúdo":

(as aspas simples que estão no começo e no final da frase)
​

// 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, com certeza. Há tempos buscava um custo x benefício semelhante no mercado, mas nunca encontrava.'

},

];

05 - Ao concluir, clique em “Salvar Alterações” para finalizar!

Para mudar a imagem do cliente, vá em: Configurações > Gerenciador de arquivos > “Enviar um arquivo” e selecione a imagem que quer utilizar.

Ao enviar aparecerá a imagem e um código ao lado. Copie este código e substitua no código da imagem (não exclua as aspas simples no começo e fim do código da imagem).

Para ativar o carrossel de depoimentos e incluir os demais depoimentos desejados, você precisa replicar o conteúdo dentro do mesmo código. Confira:

1. Replique o conteúdo destacado abaixo e cole no mesmo código criado:
​

{
imagem: 'https://cdn.awsli.com.br/1651/1651369/arquivos/1.png',
nome: 'Renata',
cargo: 'São Paulo - SP',
depoimento: 'Adorei! O produto é sensacional. Vou recomendar a todos os meus amigos, com certeza. Há tempos buscava um custo x benefício semelhante no mercado, mas nunca encontrava.'
},

// DEPOIMENTOS

DEPOIMENTOS = [

{

imagem: 'https://cdn.awsli.com.br/1651/1651369/arquivos/1.png'

nome: 'Renata',

cargo: 'São Paulo - SP',

depoimento: 'Adorei! O produto é sensacional. Vou recomendar a todos os meus amigos, com certeza.

Há tempos buscava um custo x benefício semelhante no mercado, mas nunca encontrava.'

},

{

imagem: 'https://cdn.awsli.com.br/1651/1651369/arquivos/2.png',

nome: 'Thiago',

cargo: 'Curitiba - PR',

depoimento: 'Um presente bem diferente e inteligente. Ver meus filhos gargalhando deixou claro que o presente foi espetacular. Diversão garantida por um longo tempo aqui em casa. Parabéns pela loja.'

},

{

imagem: 'https://cdn.awsli.com.br/1651/1651369/arquivos/3.png',

nome: 'Leo Magalhães',

cargo: 'São Paulo - SP',

depoimento: 'Produtos modernos e inovadores. Sempre voltarei a comprar com vocês. Continuem assim que vão longe.'

},

];

2. Depois que incluir a quantidade de depoimentos que quiser, clique em “Salvar Alterações” do lado inferior direito da página.

O Feed do Instagram é uma das personalizações mais simples e não necessita a configuração de nenhum código.

Basta acessar o menu lateral > “Redes Sociais” e configurar o seu Instagram no próprio painel da Loja Integrada como mostra a imagem abaixo:

A personalização das cores é feita por CSS.

Basta modificar o código “Configuração do tema” que foi inserido na primeira etapa da configuração do tema.

1. Acesse: Personalize sua loja > Incluir código HTML.

2. Edite as cores no código: Config do tema
​

Abaixo a descrição sobre o que cada código de cor modifica:

​--cor-tituloContato: Altera a cor do texto “Fale conosco” no cabeçalho.

--cor-textoContato: Altera a cor do texto das formas de contato.

--cor-menu: Altera a cor do texto dos itens do menu.

--cor-tituloVitrine: Altera a cor do título das vitrines.

--cor-barraSuperior: Altera a cor da barra no topo da página.

--cor-textoBarraSuperior: Altera a cor do texto na barra (Aceitamos PIX)

--cor-botaoRastreio: Altera a cor do botão “Rastrear” no cabeçalho.

--cor-botaoRastreioHover: Altera a cor do botão “Rastrear” no cabeçalho ao posicionar o mouse em cima.

--cor-textoBotaoRastreio: Altera a cor do texto do botão “Rastrear” no cabeçalho.

--cor-textoBotaoRastreioHover: Altera a cor do texto do botão “Rastrear” no cabeçalho ao posicionar o mouse em cima.

--cor-textoRastreioTitulo: Altera a cor do texto “Digite seu código de rastreamento” no cabeçalho.

--cor-nomeDepoimento: Altera a cor do texto do nome do cliente no depoimento.

--cor-localDepoimento: Altera a cor do texto do local da cliente no depoimento.

--cor-textoDepoimento: Altera a cor do texto do depoimento do cliente.

--cor-tituloRodape: Altera a cor dos títulos no rodapé.

--cor-textoRodape: Altera a cor dos textos no rodapé.

--cor-textoRodapeHover: Altera a cor dos textos no rodapé ao posicionar o mouse em cima.

--cor-nomeProduto: Altera a cor do texto do nome do produto.

--cor-textoFrete: Altera a cor do texto “Calcule o frete” na página do produto.

Feito isso é só clicar em “Salvar página”

Na página Config Tema em Incluír Código HTML você adicionou um código. Nesse mesmo código, existe um trecho que permite personalizar títulos.

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";

Tudo que estiver na cor negrito, é editável.

Abaixo a descrição sobre o que cada código de cor modifica:

var varTituloSelos = "Site protegido"; altera o título do Selo de Site Protegido

Para começar a personalização, primeiro é necessário validar quantas categorias sua loja possui. Para acessar a listagem, siga os passos abaixo:

1. Acesse "Produtos";

2. Clique em "Categorias"
​

As categorias seguirão uma ordenação definida na plataforma.

Clique em “Enviar um arquivo” em Configurar > Gerenciador de Arquivos e selecione a imagem que quer utilizar. Faça isso com cada uma das imagens que irá utilizar em cada destaque.

Ao enviar, irá aparecer a imagem e URL.

O primeiro passo é configurar a ordenação e será necessário adicionar um novo código na plataforma, mas agora em CSS. Para isso, sigas os passos abaixo:

1. Acesse "Personalize sua loja";

2. Editar CSS.

Categoria no 1 /* Menu Insta */

@media screen and (max-width: 767px){

menuinsta > div > div > div > li.slick-slide:nth-child(1) > a:before {

background-im- age:url(https://cdn.awsli.com.br/1859/1859601/arquivos/5-tapetes.png);

}

}

O número (1) acima significa a ordem da categoria que foi mencionado em Ordenação das categorias. Para configurar as categorias, basta copiar o código acima e trocar somente a numeração. A funcionalidade permite que configure até 8 categorias.
​
Ao configurar, ficará dessa forma:

Você substituirá o link que está no código em backgroud-image pelo link da imagem que corresponde a categoria que escolheu, que está após url: em vermelho.

Repita o processo de substituição das imagens para todas as suas categorias.

Em seguida, você irá incluir um novo código HTML, com as seguites configurações:

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-car- ousel@1.8.1/slick/slick.css"/>

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-car- ousel@1.8.1/slick/slick.min.js"></script>
​
Após adicionado, basta clicar em “Salvar código”. No mobile, aparecerá dessa forma:

​

✨ Pronto! Essa foi a configuração completa do Tema Galeria.

​

​