Temas Personalizados
O que é o Tema Personalizado?
O Tema Personalizado é uma funcionalidade exclusiva para lojas no plano Inkrível que permite ao lojista definir quais
produtos ou imagens aparecem na home da loja, adaptando a experiência de compra ao contexto do cliente — seja por
campanha, data comemorativa ou tipo de dispositivo.
Ela permite destacar produtos estratégicos, como o Algodão Peruano, facilitar a navegação entre modelos e reforçar a
identidade visual da marca.
Como criar um tema personalizado?
- Acesse Aparência da Loja.
- Você verá o seu tema atual e a opção “Criar novo tema”.
- Ao clicar, você será levado ao editor visual. Ali, pode alternar entre visualização Mobile e Desktop.
- Escolha se deseja adicionar uma seção de Imagem ou Produtos.
Seções de Imagem no Mobile
você pode escolher dividir em até 6 colunas. As imagens podem ter links.
- 1 imagem: ocupa 100% da largura da tela, altura livre
Quando você faz o upload de uma imagem, ela mantém a proporção original (aspect ratio). Porém, para garantir uma boa
experiência visual no celular, a imagem é automaticamente redimensionada proporcionalmente até ocupar 100% da largura da
tela.
No exemplo acima:
1. A imagem original tem proporção de 452×552px (≈0,82).
2. Ao ser enviada para a seção com largura total do celular (1080px), ela foi aumentada proporcionalmente até atingir
essa largura.
3. Com isso, a altura se ajusta automaticamente, preservando a qualidade visual e a proporção da imagem original.
- 2 imagens: divide a tela em 2 colunas, altura livre
Quando você envia duas imagens para uma seção, o sistema divide automaticamente a tela em duas colunas, e cada imagem
ocupa 50% da largura da tela. Assim como no caso de uma imagem, a proporção original (aspect ratio) da imagem é mantida,
e a altura é ajustada automaticamente.
No exemplo acima:
1. Cada imagem foi enviada com 452×552px (≈0,82 de proporção).
2. Ao ser renderizada em uma coluna de 540px de largura, a imagem foi aumentada proporcionalmente até preencher esse
espaço.
3. A altura resultante também é proporcional: nesse caso, 660px, para preservar o aspecto da imagem original.
- 3 ou mais imagens: ativa o carrossel, altura livre
Quando você envia três ou mais imagens, a seção entra no modo carrossel no celular. Cada imagem passa a ocupar 45%
da largura da tela — isso permite um pequeno espaço entre as imagens e uma melhor navegação horizontal.
Mesmo nesse formato, a proporção original da imagem (aspect ratio) continua sendo respeitada. O sistema apenas
aumenta ou reduz proporcionalmente a imagem até que ela ocupe os 45% da tela.
- Se você subir uma imagem com proporção quadrada, ela será redimensionada para 45% da largura e terá altura
proporcional.
- Se for uma imagem mais vertical ou horizontal, o sistema ajustará a altura conforme necessário, mantendo a forma
original.
- E assim como nas outras seções, a imagem com maior altura define a altura da seção.
⚠️ Importante: A imagem com maior altura define a altura total da seção
💡 Dá pra brincar com o espaço branco dentro das imagens para criar composições mais interessantes.
Qualidade da imagem e redimensionamento
Quando você faz upload de uma imagem para o editor de seções, ela é exibida na loja com redimensionamento proporcional,
ou seja, mantendo sua forma original. Mas isso não significa que a qualidade visual será mantida em todos os casos —
tudo depende da resolução do arquivo que você enviou.
O que acontece se a imagem tiver resolução baixa?
Se a imagem tiver uma resolução muito pequena (por exemplo, 300x300), mas for exibida com 100% da largura da tela, o
sistema precisa “esticar” essa imagem para ocupar o espaço — isso pode causar perda de nitidez, pixelização ou aspecto
borrado, especialmente em telas de celular com alta densidade de pixels (como iPhones mais novos).
E se for grande demais?
Se você subir uma imagem muito grande (por exemplo, 5000px de largura), ela será redimensionada automaticamente para
caber no layout — mas isso não melhora a qualidade. Pelo contrário, pode afetar a performance do site, deixando o
carregamento mais lento sem nenhum ganho visual.
O que recomendamos
- Use imagens com boa resolução, adequadas ao tamanho que ocuparão (ex: ao menos 1080px de largura para imagens que
ocuparão 100% da tela).
- Evite arquivos muito pesados: até 500KB por imagem costuma ser o ideal.
- Prefira o formato .webp, que mantém boa qualidade com tamanho reduzido.
Seções de Imagem no Desktop
- 1 imagem: ocupa 100% da seção
- 2 imagens: divide a seção em 2 colunas
- 3 imagens: cada uma ocupa 33%
- 4 imagens: cada uma ocupa 25%
- 5 imagens: cada uma ocupa 20%
A imagem mais alta define a altura da seção, como no mobile
Seções de Produto no mobile
Você pode adicionar uma seção de produtos ao seu tema escolhendo uma categoria já existente na sua loja. A ordem dos
produtos exibidos seguirá a ordenação configurada na própria categoria.
- 1 categoria com 1 produto: ocupa a tela inteira
- 2 produtos: divide a tela em dois blocos
- 3 ou mais produtos: exibe os produtos em carrossel horizontal
Seções de Produto no desktop
- 1 produto: ocupa 100% da largura da seção, em formato de destaque.
- 2, 3 ou 4 produtos: exibidos lado a lado, sem carrossel.
- 5 ou mais produtos: ativam automaticamente o carrossel horizontal.
💡 O título da categoria é exibido automaticamente acima dos produtos e o clique nele direciona para a categoria
📦 Ao todo, no máximo 12 produtos são exibidos
Tipos de Arquivo Aceitos
- .png → recomendado para imagens com transparência e detalhes.
- .jpeg → ideal para fotografias com boa compressão.
- .webp → o melhor formato para performance: qualidade alta com menor peso.
- .gif → para imagens animadas.
Aceitamos arquivos com tamanho de até 10MB.
Você continua com 100% da performance do tema clássico, mesmo usando temas personalizados. A plataforma converte as
imagens automaticamente para .webp sempre que possível.
Mas atenção: o tamanho do arquivo que você sobe ainda impacta na velocidade do site. Evite arquivos pesados.
E se eu não quiser configurar um tema personalizado?
Se você não configurar para nenhum, o tema clássico da INK segue ativo! E tem mais: Se você não configurar o tema
personalizado para um dispositivo, esse dispositivo continuará usando o tema padrão da INK, sem erro ou impacto
negativo.
Vídeo Prático de como editar o seu tema
https://youtu.be/leYDo_pgKDA
OBS: Caso você salve seu tema e algumas informações não estejam aparecendo ou ocorra algum erro de salvamento, verifique
se você está usando um GIF muito pesado.