GK Digital Manual do Tema – GK Digital V1

Loja Integrada - Manual do Tema GK Digital

Versão 1.0

Olá, tudo bem?

Primeiramente, agradecemos por adquirir o Tema GK Digital V1 – Roupas. Será um prazer te acompanhar na configuração da sua loja e ajudar você a deixá-la com uma identidade visual profissional, moderna e focada em vendas 🚀

Este manual foi criado para orientar você no uso do nosso tema dentro da plataforma Loja Integrada, de forma simples e prática. Aqui você vai encontrar:

  1. como se preparar antes da instalação
  2. primeiros passos e configurações iniciais
  3. orientações para personalização visual
  4. boas práticas para otimizar sua loja

Também colocaremos neste manual todos os nossos canais de atendimento e suporte.

Lembre-se: o suporte técnico referente ao tema é de responsabilidade da GK Digital — e não da plataforma Loja Integrada.

Caso você ainda não tenha adquirido o tema para sua loja, entre em contato com nosso time comercial para garantir o seu.

Se você ainda não possui uma loja na plataforma Loja Integrada, podemos te orientar no processo de contratação.

Além do desenvolvimento de temas, a GK Digital também oferece:

  1. cadastro de produtos e categorias
  2. configurações gerais da plataforma
  3. criação de banners e criativos
  4. serviços de migração
  5. personalizações extras

Para orçamento sem compromisso, é só chamar nossa equipe

A GK Digital é uma agência especializada em desenvolvimento de soluções para e-commerce, com foco na criação de temas otimizados para vendas e personalizações sob medida para a plataforma Loja Integrada. Nosso objetivo é ajudar sua loja a crescer de forma profissional, sustentável e escalável.

Saiba mais sobre nós: 

Site: www.agenciagkdigital.com.br

Instagram: @gkdigital.agencia

Facebook: GK Digital

WhatsApp Comercial: (99) 99161-4347

Contato de Suporte: suporte@gkdigital.com.br

Qualquer dúvida referente à instalação, configuração ou funcionamento do tema, entre em contato diretamente com nosso suporte.

⚠️ Direito de suporte incluído:

Você tem direito ao suporte do tema por 90 dias, com respostas em até 48 horas úteis.

Informações importantes sobre o suporte:

  1. Não prestamos suporte gratuito para lojas que removerem o logotipo da GK Digital do tema.
  2. Não oferecemos suporte gratuito caso alterações realizadas por terceiros gerem instabilidade, conflito ou erros no tema.
  3. O suporte cobre dúvidas, orientações e possíveis falhas relacionadas ao tema GK Digital V1.
  4. Todos os testes do tema são feitos na versão padrão da Loja Integrada, atualizada.
  5. Para customizações, alterações visuais ou modificação de código-fonte, oferecemos orçamento sob demanda via e-mail ou WhatsApp.
  6. Funcionalidades nativas da plataforma são de responsabilidade do lojista, podendo ser solicitadas via orçamento caso queira ajuda.
  7. Não recomendamos editar HTML, CSS ou JS do tema se você não tiver conhecimento técnico.
  8. A GK Digital não é responsável por suporte da plataforma Loja Integrada, apenas pelo tema.
  9. Qualquer problema relacionado a frete, formas de pagamento, integração e funcionalidades internas deve ser tratado diretamente com o suporte oficial da Loja Integrada.
  10. Na descrição de produtos, recomendamos que não sejam inseridos códigos HTML. Caso queira aplicar negrito, itálico, sublinhado ou links, utilize as ferramentas do próprio editor da plataforma, preservando compatibilidade com o tema.

Caso precise de suporte sobre a plataforma, recomendamos que entre em contato com a Loja Integrada.

Saiba como conseguir suporte da Loja Integrada aqui. 

Talvez você encontre a resposta de forma simples e rápida nos artigos da Central de ajuda da Loja Integrada.

Para clientes no plano grátis, temos também a Comunidade da Loja Integrada.

Após a confirmação do pagamento pela Hotmart, nossa equipe receberá automaticamente os dados do comprador e iniciará o processo de contato para instalação do tema.

Como o Tema GK Digital V1 – é um tema externo e não está listado na Loja Integrada como tema oficial, sua instalação é realizada manualmente pela nossa equipe técnica.

Como funciona o processo de instalação

  1. Após a confirmação do pagamento na Hotmart

  2. Entraremos em contato pelo WhatsApp cadastrado na compra

  3. Vamos solicitar o convite ou acesso ao painel da sua loja na Loja Integrada

  4. Faremos a instalação completa do tema dentro da sua loja

  5. Aplicaremos as configurações iniciais necessárias

Além da instalação, você receberá os arquivos incluídos:

  • manual completo

  • banners e criativos do tema

  • instruções adicionais

Baixar arquivos do tema

Os arquivos, como banners e guias adicionais, poderão ser enviados via WhatsApp, e-mail ou link direto após a liberação da compra.

Caso deseje baixar novamente posteriormente, basta solicitar ao suporte.

Configurações após instalação

Após configurarmos o tema na sua loja, recomendamos seguir as orientações abaixo:

  • revise e personalize as configurações disponíveis no painel tema

  • apenas configure as caixas apresentadas no manual

  • itens não listados aqui não precisam ser alterados

⚠️ Após realizar qualquer modificação e publicação no tema, recomendamos:

✔ adicionar um produto ao carrinho
✔ aguardar a atualização do cache padrão da plataforma (aprox. 15 minutos)

Esse processo força a atualização visual do tema na loja.

Acesse seu painel da loja virtual, no menu esquerdo, clique em "Visual" e selecione "Visual da loja".

Acesse: Disposição de Layout

Tamanho do Layout: Médio

Disposição do logotipo: Logo a Esquerda

Disposição dos itens da loja: Disposição 03

Disposição da coluna lateral: Sem coluna

Selecione:

- Exibir menu superior

- Categorias

- Compactar subcategorias do menu lateral

Acesse: Cores Predominantes

Escolha a cor principal da sua loja: (cor padrão do tema ou conforme desejar em hexadecimal)

Escolha a cor secundária da sua loja: (cor padrão do tema ou conforme desejar em hexadecimal)

Acesse: Botões

Cor padrão para os botões: (cor padrão do tema ou conforme desejar em hexadecimal)

Texto do botão na Página de Produto: "Comprar" ou adicionar o texto desejado para apresentação

Defina a ação deste botão: "Adicionar produto e ir para o carrinho" ou conforme desejar

Texto do botão na Listagem de Produtos: "Comprar" ou adicionar o texto desejado para apresentação

Defina a ação deste botão: "Adicionar produto e permanecer na página" ou conforme desejar

Não mostrar o botão de listagem: caso selecione este item o botão comprar não irá apresentar na home e na listagem do produto, somente irá apresentar dentro da página do produto

Acesse: Estilo do Tema

Cor da área de conteúdo (conteiner): Cores claras

Altura máxima da imagem do produto: 450px

Acesse: Listagem de Produtos

Produtos por linha: 4

Aplicar a caixa de contorno aos produtos: Sem caixa

Selecione:

- Mostrar imagens extras a passar o mouse sobre o produto na listagem

Acesse: Página do produto

Disposição das miniaturas do produto: Horizontal

Valor do produto em destaque: "Destacar parcela" ou conforme desejar

Selecione conforme desejar os itens abaixo:

- Exibir a quantidade em estoque disponível para compra

- Exibir campo para alterar a quantidade que será adicionado ao carrinho

Acesse: Monte sua vitrine

Selecione:

- Lançamentos

- Mais vendidos

- Destaques

Ordenar por: "Produtos em ordem aleatória" ou conforme desejar

Por categoria - caso deseje colocar uma categoria em destaque na home há uma limitação de 10 categorias para esta exibição

Quantos produtos mostrar: 8 ou conforme desejar

Exibir produtos em carrossel: selecione caso deseje

Quando selecionado carrossel, no mobile tem que apresentar somente 1 produto por linha. Caso deseje apresentar 2 produtos por linha no mobile, o carrossel deverá ser desativado.

Acesse: Marketing » Newsletter

  * Clique sobre a imagem para aumentar

Título: Newsletter ou conforme desejar

Texto Capa: Receba nossas ofertas por e-mail ou conforme desejar

Texto Sucesso: Obrigado por se inscrever! Aguarde novidades da nossa loja em breve ou conforme desejar

Ativar caixa de captação de e-mails no menu lateral: selecione

Ativar barra de captação de e-mails: Sim

Acima do rodapé: Sim 

Cor de fundo da barra: insira a cor padrão do tema ou conforme desejar

Ativar caixa de captação de e-mails no Pop-up: Sim

Quando mostrar a Janela? - Após 10 Segundos ou conforme desejar

Onde mostrar a janela para o cliente?

Qualquer página ou conforme desejar

Acesse: Configurações » Gerenciador de arquivos

  * Clique sobre a imagem para aumentar

Para implementar as imagens dos selos de envio e obter os links, é necessário subir o arquivo que deseja, em Gerenciador de arquivos e copiar os links (URLs) e colar na configuração dos selos.

Tamanho para imagens de Forma de Envio95 x 25 px

  * Clique sobre a imagem para aumentar

Envie o arquivo desejado para a plataforma:

  * Clique sobre a imagem para aumentar

Após o arquivo upado, ele ficará disponível para ser utilizado na sua loja virtual

  * Clique sobre a imagem para aumentar

O upload é fundamental tanto para os selos quanto para inserir os banners seções e mobile no seu tema.

As funcionalidades do tema irão ser configuradas via código na plataforma.

Acesse: Visual » Incluir código HTML » Adicionar código.

Menu, Categorias, Banners Extras e Mais

Para o seu tema funciona 100%, é necessário a configuração abaixo:

Descrição: Seletor Geral Tema

Local publicação: Rodapé

Página publicação: Todas as páginas

Tipo: JavaScript

Insira o código abaixo no campo Conteúdo, altere os elementos conforme as orientações individuais e não deixe espaço entre as ‘aspas’, lembrando para alterar somente os elementos destacados entre as aspas: ‘ ‘.

Código para copiar logo abaixo da imagem:


Como utilizar e editar esse script

Esse script serve como uma configuração geral do tema/loja.
Ele funciona assim:

  • cada var ... = ... define uma informação que o tema vai usar

  • a maioria das alterações é apenas trocar textos dentro das aspas " " ou ' '

  • se quiser desativar algo, normalmente é só mudar 'sim' para 'não'

  • sempre manter a estrutura e sintaxe corretas (ponto e vírgula, vírgulas nas listas, aspas)


Guia Explicativo Linha por Linha

Limite de categorias

 
var categorias_limite = [{ qtd: '9' }];
 
  • controla quantas categorias aparecem no menu

  • troque '9' pelo número desejado (recomendado 7 a 9)


Menu de ofertas

 
var ofertas_menu = [{
ativado: 'sim',
titulo: 'TOP 20',
link: '/ofertas'
}];
 
  • ativa ou desativa o botão de ofertas: 'sim' ou 'não'

  • altera o texto exibido no menu: "titulo"

  • muda o link da página de ofertas "link"


Nome do menu Todas as categorias

 
var nomecategorias = 'CATEGORIAS'
 
  • aparece como Todas as Categorias o menu de todas as categorias


Mensagem Topo do site

 
const texto = "<b>*ATENÇÃO:</b> 40% de DESCONTO na compra do seu tema!";
 
  • texto exibido em destaque

  • pode usar HTML dentro das aspas


Informações da área de vantagens

Cada bloco segue a mesma estrutura:

 
var infoimagem1 = '<svg .... ></svg>'
var textoinfo1 = 'Frete Grátis'
var subtextoinfo1 = 'Compras acima de R$ 220,00'

Cada grupo altera:

  • infoimagemX = ícone (usa SVG) (Recomendamos não alterar)

  • textoinfoX = título da vantagem

  • subtextoinfoX = texto complementar

Para trocar o ícone, substitua o conteúdo entre aspas por outro <svg> completo.


Liga/desliga banners extras

 
var ativarbannersextras = 'sim'
 
  • 'sim' = ativa a seção

  • 'não' = oculta completamente

  • Lembrando que os banners precisar estar cadastrado para essa opção ficar ativar, ative após cadastrar os banners no painel da LI, Banner Tarja 1, Banner Tarja 2, Banner Tarja 3, Banner Tarja 4.

 

Menu do topo – contatos

 
var menudropdowntelefone = '(99) 99230-4326'
var menudropdownwhatsapp = '(99) 99230-4326'
var menudropdownemail = 'suporte@agenciagkdigital.com.br'
 
  • altera textos de contato exibidos no menu

  • pode remover parenteses se quiser


Carrossel de categorias

 
var ativarcarroselcategorias = 'sim'
var titulosecaocategorias = 'Escolha por categoria'
 
  • ativa/desativa carrossel

  • altera o título exibido acima


Lista de categorias da seção

 
var section_categorias = [
{
href: '/proteinas',
src: 'url...',
title: 'Proteínas' },
{
href: '/carboidratos',
src: 'url...',
title: 'Carboidratos' },
];
 

Cada objeto dentro do array representa uma categoria.
Pode alterar ou adicionar mais copiando o formato.


Avaliações automáticas

 
var ativaravaliações = 'sim'
 

Lista de depoimentos

 
var avaliacoes = [
{ nome: "Gustavo R.", cidade: "SP", comentario: "Entrega super rápida..." }
]
 
  • você pode remover/editar/adicionar avaliações seguindo a estrutura

  • sempre separar com vírgula os objetos dentro do array


⚠️ Regras gerais para edição

Para evitar erros ao alterar:

✔ sempre mantenha aspas ' ' ou " "
✔ arrays precisam de colchetes [ ]
✔ objetos precisam de { }
✔ sempre colocar vírgula depois de cada item da lista
✔ não apagar ponto e vírgula final quando existir


💡 Dicas finais

  • todo texto que aparece no site está entre aspas

  • todo ícone que aparece é um <svg> completo dentro de aspas

  • valores "sim" ou "não" controlam visibilidade

  • links devem começar com /

Para o seu tema funciona 100%, é necessário a configuração abaixo:

Descrição: Seção de Ofertas

Local publicação: Cabeçalho

Página publicação: Todas as páginas

Tipo: JavaScript

Insira o código abaixo no campo Conteúdo, altere os elementos conforme as orientações individuais e não deixe espaço entre as 'aspas', lembrando para alterar somente os elementos destacados entre as aspas: ' '.

Código para copiar:

var ativarsuperoferta = 'n'
var slcsuperoferta = ''
var datainiciosuperoferta = '2024/08/20 00:00:00'
var datafimsuperoferta = '2024/08/31 00:00:00'
var textosuperoferta = 'TOP 20 - Aproveite!'

Para o seu tema funciona 100%, é necessário a configuração abaixo:

Descrição: Personalização de Cores e Frase

Local publicação: Rodapé

Página publicação: Todas as páginas

Tipo: CSS

Insira o código abaixo no campo Conteúdo, altere os elementos conforme as orientações individuais e não deixe espaço entre as 'aspas', lembrando para alterar somente os elementos destacados entre as aspas: ' '.

Código para copiar:

Acesse: Produtos » Marcas

O carrossel de marcas é uma funcionalidade padrão da plataforma Loja Integrada, cadastre a marca desejada e para que a mesma fique ativa e apresentando na loja virtual selecione:

Marca ativa: Sim

Marca em destaque: Sim - só assim essa marca irá refletir no tema

Nome da marca: coloque o nome da sua marca ou fabricante conforme desejar

Logo da marca: selecione a imagem desejada, no tamanho 300 x 100px em PNG sem fundo

Lembre-se que as marcas não apresentam na versão mobile.

Acesse: Visual » Banners

  * Clique sobre a imagem para aumentar

Tamanhos recomendados e posições:

Banner Tarja: 812x 334px

Full Banner: 1920 x 492px

Full Banner Mobile: 880x 700px

Categorias: 180x200px

Mini Banners: 400x400px

Banners Extras Rodape: 542x964px

Saiba como adicionar os banners no painel da Loja Integrada, e lembre-se que para rotacionar os full banners, deverá ser cadastrado mais de um, e o procedimento ocorre automaticamente.

Recomendamos que insira o logotipo com as dimensões mais próximas possíveis do logotipo oficial do tema.

Dimensões:

Logotipo: 300 x 100 px ou 600 x 200 px em PNG sem fundo

Favicon: 128 x 128 px em tamanho máximo de 100KB em formato .ico

Evite inserir logotipos com sombras e bordas brancas na própria imagem. Reduza o máximo possível ou mesmo completamente as bordas brancas antes de subir o logotipo na plataforma.

Evite também inserir imagens com tamanhos maiores na vertical, pois isso vai fazer com que o topo da loja fique muito grande, prejudicando assim a usabilidade do seu layout.

Para inserir o logotipo e favicon siga o passo a passo da plataforma.

Para apresentar os dados no rodapé do tema, é necessário inserir uma descrição da loja diretamente no painel da sua loja virtual.

Para inserir as informações, acesse Configurações » Dados da Loja e siga o passo a passo da Loja Integrada.

Personalização de Cores e Frase

Para o seu tema funciona 100%, é necessário a configuração abaixo:

Descrição: Personalização de Cores e Frase

Local publicação: Rodapé

Página publicação: Todas as páginas

Tipo: CSS

Insira o código abaixo no campo Conteúdo, altere os elementos conforme as orientações individuais e não deixe espaço entre as ‘aspas’, lembrando para alterar somente os elementos destacados entre as aspas: ‘ ‘.

Código para copiar abaixo da imagem:


Manual de Customização – Variáveis CSS do Tema GK Digital V1

O código abaixo é responsável por controlar as principais cores, textos, tamanhos e estilos do tema utilizando variáveis CSS dentro do :root.

Essas variáveis tornam o painel mais organizado, tornando possível alterar diversas partes da interface apenas modificando os valores dentro das aspas.


🔧 Onde alterar

Todo o bloco deve permanecer dentro da tag <style> no cabeçalho do tema.

Para modificar qualquer item basta alterar o valor após : mantendo a sintaxe.

Exemplo real:

 
--cor_botao: black;

Pode ser trocado para:

 
--cor_botao: #ff0000; /* vermelho */

Ou nomes de cores válidos:

 
--cor_botao: blue;

Nenhuma dessas alterações exige conhecimento avançado — apenas manter o valor dentro das aspas OU após os :.


🧩 Manual variável por variável

Abaixo segue o significado e propósito de cada linha 👇


🎨 Cores globais e do topo

Variável Função
--texto_global Cor padrão do texto em todo o site
--cor_barratopo Fundo da barra superior (área acima do menu)
--cor_texto_barratopo Cor do texto na barra superior
--cor-menu-superior Cor do fundo do menu do topo
--texto_menucategorias Cor do texto dos itens de categoria
--texto_todascategorias Cor dos textos em “todas categorias”

🛍 Cabeçalho e ícones

Variável Função
--cor-cabeçalho Cor de fundo do cabeçalho
--cor_buscadesktop Cor de fundo da barra de busca
--corlinkdropboxcb Cor de links no dropdown
--cor_icones4info Cor dos ícones de informações
--cor_texto_cabecalho Cor do texto no cabeçalho
--cor-icones_cabecalho Cor dos ícones da barra superior
--cor-icones Cor geral de ícones
--cor-icone_carrinho Cor do ícone do carrinho

🧾 Menu categorias e hover

Variável Função
--cormenu_textohover Cor ao passar o mouse no menu
--cor_icone_departamentos Cor do ícone departamentos
--texto_titulotodascategorias Cor título “todas categorias”
--cor-texto_subcategorias Cor dos textos das subcategorias
--texto_submenutodascategorias Cor dos itens do submenu

🛒 Carrinho

Variável Função
--cor-quantidadecart Cor do fundo da bolinha de quantidade
--cor-textoquantidadecart Cor do texto dentro da bolinha

🔍 Busca

Variável Função
--cor-botaobusca Cor do botão buscar desktop
--cor-botaobuscamobile Cor do botão buscar mobile

🧩 Botões

Variável Função
--cor_botao_hover Cor ao passar mouse no botão
--cor_texto_botao_hover Cor do texto no hover
--cor_botao Cor padrão do botão
--cor_texto_botao Cor do texto dentro do botão
--cor_botao_comprar Cor do botão comprar

⭐ Ícones

Variável Função
--cor_icones_hover cor ao passar mouse
--cor_texto_icones texto junto aos ícones

📩 Newsletter

Variável Função
--cor_newsletter fundo seção newsletter
--cor_texto_newsletter texto
--cor_topofertasfundo fundo barra ofertas
--cor_topofertastexto texto da barra ofertas
--cor_botaonewsletter botão newsletter
--cor_textobotaonewsletter texto botão newsletter

💳 Rodapé e pagamentos

Variável Função
--corpagamentosselosrodape cor selos pagamento
--cor_footer cor fundo rodapé
--cor_titulosrodape cor títulos
--cor_texto_footer cor textos
--texto_rodapemobile cor textos mobile rodapé

⭐ Funcionalidades

Variável Função
--cor_maisvendidos fundo seção mais vendidos
--cor_textomaisvendidos texto mais vendidos
--cor_textoavista cor texto “à vista/pix desconto”
--backPixpg fundo destaque pix
--cPixIcone cor ícone pix
--textdescontopix mensagem exibida após valor
--ativarestrelasproduto ativa estrelas nos produtos
--qtdeavaliacoes quantidade padrão para avaliações

🧱 Estruturas e layouts

Variável Função
--removeroutrascategorias oculta outras categorias
--font_family fonte principal
--font_family_secundario fonte secundária
--cor_closebuttoncarrinholateral cor botão fechar carrinho lateral
--textosobrelojarodape texto exibido no rodapé sobre loja
--tamanhodeconteiner largura máxima container
--tamanhodeconteinerprodutos container da página produto
--tamanhodeconteinerrodapes container rodapé

⚠️ Dicas importantes para edição

✔ sempre mantenha o ; no final
✔ sempre coloque cores usando:

  • nome da cor

  • código hexadecimal (#000)

  • rgba()

✔ textos precisam ficar entre aspas
✔ não retire variáveis do :root

» Qualidade das imagens:

Nós, da GK Digital , recomendamos cadastrar os produtos com as imagens padrões, sendo todas do mesmo tamanho de 1000 x 1000px ou inferior para ficar conforme o demonstrativo.

A própria plataforma da Loja Integrada explica sobre a qualidade das imagens e sua resolução: esclarecimento Loja Integrada.

» PageSpeed:

Muitos lojistas ficam preocupados com as notas alcançadas por suas lojas no PageSpeed, e nós da GK Digital recomendamos comprimir sempre as imagens dos produtos e banners, podendo usar o site de compressão: https://compresspng.com/

A plataforma da Loja Integrada disponibilizou um artigo explicando mais sobre o PageSpeed: Como Melhorar a Minha Nota.

» Remoção do Logotipo da Loja Integrada:

É proibida a remoção do logotipo da Loja Integrada do rodapé da loja virtual, saiba mais nos Termos de Uso da plataforma.

» Remoção do Logotipo da agência:

É possível estar realizando a remoção do logotipo da agência do tema sim, porém todo o suporte do mesmo é perdido, conforme termos da plataforma.

As informações disponíveis pela Loja Integrada referente a Termos de Uso de compra de temas e serviços ficam disponíveis também no momento da compra.

Você finalizou todo o passo a passo e seu tema está prontinho!

Desejamos ótimas vendas e que seu novo tema deixe seus clientes ainda mais engajados com seus produtos ❤️

É um prazer tê-lo conosco na GK Digital!