Manual Tema Platinum na Loja Integrada

Apresentação

Olá, como vai?!

Obrigado por adquirir o tema Platinum da DevRocket. Será um prazer lhe ajudar a deixar sua loja com o estilo da sua marca e pronta para vender.

Este manual tem o objetivo de auxiliá-lo a utilizar o nosso tema, da melhor forma. Vamos ajudá-lo a se preparar antes da instalação, a fazer as configurações iniciais e deixar a sua loja LI otimizada =)

Aqui também vamos colocar todos os nossos contatos, principalmente de suporte.

Caso ainda não tenha adquirido o tema para sua Loja Integrada, pode comprá-lo no link DevRocket.

Porém, caso não tenha loja na plataforma Loja Integrada e deseja contratar, poderá realizar pelo link Loja Integrada do qual receberá um e-mail com cupom de 10% de desconto na loja de serviços da LI.

A DevRocket também possui os serviços de cadastro de produtos, categorias, configurações gerais, migrações, criação de banners e muito mais, para um orçamento sem compromisso, é só chamar o nosso comercial.

Recomendações

As configurações deste tema é realizado por nós da DevRocket - porém, novos banners são de responsabilidade do lojista!
A DevRocket não realiza criação de banners.

Nós estaremos à sua disposição caso queira contratar um serviço adicional de configuração de tema, onde nós realizamos essas configurações da melhor forma possível para sua loja.

Antes de começar, por favor, leia todos os passos deste manual! Caso ainda assim você tenha dúvidas após a leitura, nós estaremos disponíveis para te ajudar.

Suporte ao Tema

A DevRocket tem o foco em desenvolvimento e soluções para internet, ajudando a sua marca crescer on-line. Saiba mais sobre nós:

Site: devrocket.com.br

Facebook: DevRocket

Instagram: DevRocket

Twitter: DevRocket

Blog: DevRocket

LinkedIn: DevRocket

YouTube: DevRocket

TikTok: DevRocket

Contato Comercial: comercial@devrocket.com.br

Tel / WhatsApp (14) 99902-1354

Contato Suporte: suporte@devrocket.com.br

Tel / WhatsApp (14) 99869-6227

Qualquer dúvida sobre configurações do tema, entre em contato através do suporte.

** Você tem o direito ao nosso suporte por 180 dias e lhe responderemos em até 48 horas úteis.

Importante:

Não prestamos suporte gratuito para lojas que retirarem nosso logotipo do tema, e 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, lembrando que todos os nossos testes ocorrem no tema padrão atualizado DevRocket.
Para configurações e alterações de código padrão, o mesmo é realizado via orçamento através de e-mail ou WhatsApp.
Configurações e funcionalidades nativas da plataforma é de responsabilidade do lojista ou por meio de orçamento através do e-mail e WhatsApp.
Não recomendamos a alteração HTML/CSS/JS do tema instalado, caso não possua conhecimento em programação.
A DevRocket não possui obrigatoriedade em prestar suporte para funcionalidades da plataforma e para suporte com relação à alteração da estrutura do código do tema.
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.
Ao cadastrar a descrição no produto, orientamos que não tenha nenhum tipo de código HTML, sendo assim, inclua as alterações de negrito, itálico, sublinhado e links via painel já que ele assume a estrutura do tema.

Sobre a Loja Integrada

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.

Instalação

Após o pagamento ser aprovado pelo Mercado Pago, a Loja Integrada faz a liberação do tema Vip de forma automática, para que possa estar instalando o tema e baixando os arquivos que acompanham - manual e banners, siga este passo a passo.

Para a instalação do tema siga o passo a passo recomendado: Instalação

Para baixar os banners do tema, siga o passo a passo descritos: Baixar Banners

Após a confirmação da compra do tema e o download dos arquivos, é preciso realizar manualmente algumas simples configurações; as caixas de configurações que não estão disponíveis no manual, não é necessário configurar, pois não há interferência direta no tema.

Sempre coloque um produto no carrinho para forçar o cache de 15 minutos padrão da Loja Integrada e salve todas as alterações feitas.

Visual da Loja - Disposição do Layout

Acesse seu painel da loja virtual, no menu esquerdo, clique em "Personalize sua loja" 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

Visual da Loja - Cores Predominantes

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)

Visual da Loja - Botões

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

Visual da Loja - Listagem de Produtos

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

Visual da Loja - Página do produto

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

Visual da Loja - Monte sua vitrine

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

Após as configurações do "Visual da Loja", clique em "Salvar alterações".

Pop-up Newsletter

Acesse: Marketing » Newsletter

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

Após as configurações acima, clique em “Salvar Alterações”.

Upload de Imagens

Acesse: Configurações » Gerenciador de arquivos

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 Envio: 95 x 25 px

Envie o arquivo desejado para a plataforma:

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

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

Funcionalidades do Tema

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

Acesse: Personalize sua loja » Incluir código HTML » Adicionar código.

Menu, Rastreio, Vídeo e Selos

Para a apresentação da quantidade de categorias, é necessário a configuração abaixo:

Descrição: Menu, Rastreio, Vídeo e Selos

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 em roxo.

// Menu
    var devrocket_itens_menu = 8;
    var devrocket_itens_menu_texto = '+ Categorias';
// Rastreio e Vídeo
    var devrocket_rastreio_correios = true;
    var devrocket_url_youtube = 'https://www.youtube.com/watch?v=rJd6Qd3ZoOY';
// Selos
    var devrocket_formas_envio = [
        'https://cdn.awsli.com.br/1197/1197939/arquivos/jadlog.png',
        'https://cdn.awsli.com.br/1197/1197939/arquivos/_sedex.png',
        'https://cdn.awsli.com.br/1197/1197939/arquivos/pac.png'
    ];

O rastreio é "true" para apresentar no tema, senão, deve-se colocar "false" para a não exibição, e a quantidade na categoria vem como padrão 8.

Após as configurações acima, clique em "Criar código".

Produtos no Mobile, Menu Fixo e Barra de Contato

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

Descrição: Produtos no Mobile, Menu Fixo e Barra de Contato

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 em roxo.

// Produtos por linha no mobile
var devrocket_produtos_linha_celular = 2;
// Menu
var devrocket_menu_fixo = true;
// Barra de Contato
var devrocket_barra_contato = true;
// Menu Horizontal
var devrocket_menu_horizontal = true;

O menu é "true" para a apresentação no tema, senão, colocar "false" para a não exibição, o mesmo ocorre para a barra de contato.

Após as configurações acima, clique em "Criar código".

Barra de Ofertas e Timer de Promoção

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

Descrição: Barra de Ofertas e Timer de Promoção

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 em roxo.

// Barra de Ofertas
var devrocket_barra_oferta = {
frase: '<strong>Frete Grátis<strong> para todo o Brasil. Pague com <img src="https://cdn.awsli.com.br/1934/1934313/arquivos/pix-2.png" style="height: 18px;" />.',
cor: '#6392bd'
};
// Timer
var devrocket_timer_produtos = [
{'produto': 99059137, 'data': '2022-12-31T20:22:00', 'frase': 'A Promoção expira em', 'cor_fundo': '#e74c3c', 'cor_texto' : '#ffffff'},
{'produto': 99056627, 'data': '2022-12-31T21:22:00', 'frase': 'A Promoção expira em', 'cor_fundo': '#e74c3c', 'cor_texto' : '#ffffff'},
];

O link da imagem é realizado em "Gerenciador de arquivos" e o tamanho indicado para a imagem da barra de ofertas é 56 x 20px

Em rosa altere para o código do produto, seguindo o passo a passo abaixo:

Acesse: Produtos » Listar produtos » clique para editar o produto desejado.

Dentro do acesso do produto na URL, copie o número do produto, conforme imagem acima.

Em azul altere para o ano, mês e dia do final da promoção.

Em verde, altere para a hora, minutos e segundos.

Em vermelho coloque a frase desejada para a apresentação.

Em laranja coloque a cor do fundo da caixa em hexadecimal.

Em preto coloque a cor em hexadecimal do texto.

Após as configurações acima, clique em “Criar código”.

Rodapé e Tabelas de Medidas

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

Descrição: Rodapé e Tabelas de Medidas

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 em roxo.

// Rodapé
var devrocket_instagram = '@suamarcaaqui';
var devrocket_horario_atendimento = 'Seg. a Sex: das 8h às 18h';
var devrocket_whatapp = '(00) 00000-0000 - Chama no Whats!';

// Frase Newsletter
var devrocket_frase_newsletter = '<p>Receba nossas <strong>ofertas exclusivas</strong>. Aproveite!</p>';

// Tabela de Medidas
var devrocket_tabela_medidas = {
titulo: 'Tabela de Medidas',
imagem: 'https://cdn.awsli.com.br/1934/1934313/arquivos/tabela-medidas.jpg',
categorias: ['*'] // Para todas as categorias
};

Caso deseje utilizar a tabela de medidas apenas em categorias específicas, informe o nome delas separando por vírgula e aspas simples utilizando conforme abaixo, lembrando que é somente a categoria pai (raiz).

// Tabela de Medidas
var devrocket_tabela_medidas = {
titulo: 'Tabela de Medidas',
imagem: 'https://cdn.awsli.com.br/1934/1934313/arquivos/tabela-medidas.jpg',
categorias: ['Blusas', 'Vestidos'] // Para categorias específicas
};

A imagem da tabela de medidas é upada em "Gerenciamento de arquivos" e o tamanho indicado para imagem é de 500 x 400px.

Após as configurações acima, clique em “Criar código”.

WhatsApp, Telegram, Instagram e Pedidos pelo WhatsApp

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

Descrição: WhatsApp, Telegram, Instagram e Pedidos pelo WhatsApp

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 em roxo.
Caso utilize alguma configuração do "Fideliza Mais", é obrigatório deixar o pulse = false no WhatsApp Flutuante e Instagram Flutuante.

Mantenha sempre o DDD, e caso deseje o ícone pulsante ative o "true", se desejar estático substitua por "false".

// WhatsApp Flutuante
var devrocket_whatsapp = {
numero: '5500000000000',
mensagem: 'Olá, tudo bem? Quero falar sobre o tema para a minha loja virtual!',
pulse: true
};
// Instagram Flutuante
var devrocket_instagram_flutuante = {
usuario: 'suamarcaaqui', /* Nome do usuário do Instagram */
pulse: true
};
// Telegram Flutuante
var devrocket_telegram = {
usuario: 'suaContaAqui', /* Nome do usuário do telegram */
pulse: true
};
// Pedidos WhatsApp
var devrocket_pedidos_whatsapp_listagem_produtos = true;
var devrocket_pedidos_whatsapp_botao_comprar = true;
var devrocket_pedidos_whatsapp_listagem_produtos_dados = {
numero: '5500000000000',
mensagem: 'Olá, tudo bem? Preciso de ajudar com o produto',
frase_botao: 'Pedir pelo WhatsApp'
};

Após as configurações acima, clique em “Criar código”.

Personalização de Cores e Frase

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

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

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 em roxo.

// Personalização de cores
var devrocket_cor_barra_topo = '#000000'; // para deixar a cor do barra topo diferente das demais
var devrocket_cor_menu = '#111111'; // para deixar a cor do menu diferente das demais
var devrocket_cor_rodape = '#222222'; // para deixar a cor do rodapé diferente das demais
var devrocket_cor_meio_pagamento = '#f9f9f9'; // para deixar a cor da barra onde fica os selos de meios de pagamento diferente das demais
var devrocket_cor_botao_newsletter = '#444444'; // para deixar a cor do botão da newsletter diferente das demais

// Frase de Pix na página do produto
var frase_pix_comprar = '

Pague também com

https://cdn.awsli.com.br/1934/1934313/arquivos/pix-logo.png" style="height: 22px;" />

';

A imagem do PIX é upada em "Gerenciamento de arquivos", e o tamanho indicado é 135 x 48px.

Após as configurações acima, clique em “Criar código”.

Caso queira o menu em degradê configure o código abaixo:

// MENU degradê
const menu_degrade = true; /* true ou false */
const menu_degrade_cor_inicial = '#8e44ad'; /* #000000 */
const menu_degrade_cor_final = '#9b59b6'; /* #000000 */
const menu_degrade_posicao = 'h'; /* V = Vertical | H = Horizontal */

Depoimentos de Clientes e Ícones na Categoria

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

Descrição: Depoimentos de Clientes e Ícones na Categoria

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 em roxo.

// Depoimentos de Clientes
var depoimentos = [
{
imagem: 'https://cdn.awsli.com.br/1595/1595762/arquivos/depoimento-3.png',
nome: 'José de Paulo da Silva',
mensagem: 'Esse tema era tudo que eu precisava. Agora posso vender tranquilamente!',
localidade: 'Brasília / DF',
estrelas: 5
},
{
imagem: 'https://cdn.awsli.com.br/1595/1595762/arquivos/depoimento-6.png',
nome: 'Fernanda Oliveira Lima',
mensagem: 'Tema muito fácil de instalar, e o manual é super completo.',
localidade: 'Salvador / BA',
estrelas: 5
}
];

// Imagens Categorias
var devrocket_imagens_categoria = [
'https://cdn.awsli.com.br/1938/1938120/arquivos/imagem-exemplo-devrocket.png',
'https://cdn.awsli.com.br/1938/1938120/arquivos/imagem-exemplo-devrocket.png',
'https://cdn.awsli.com.br/1938/1938120/arquivos/imagem-exemplo-devrocket.png',
'https://cdn.awsli.com.br/1938/1938120/arquivos/imagem-exemplo-devrocket.png',
'https://cdn.awsli.com.br/1938/1938120/arquivos/imagem-exemplo-devrocket.png',
'https://cdn.awsli.com.br/1938/1938120/arquivos/imagem-exemplo-devrocket.png',
'https://cdn.awsli.com.br/1938/1938120/arquivos/imagem-exemplo-devrocket.png',
'https://cdn.awsli.com.br/1938/1938120/arquivos/imagem-exemplo-devrocket.png',
];

// Posição de apresentação dos ícones
var devrocket_imagens_categoria_posicao = 'direita'; /* esquerda | centro | direita */
/* Quando deixar na posição "centro", alterar o valor de "--devrocket-imagem-categoria-espaco-abaixo" para "0px" */

Após as configurações acima, clique em “Criar código”.

A imagem para depoimentos de clientes e ícones na categoria é upada em "Gerenciamento de arquivos".

Tamanho indicado para imagem de depoimento de cliente: 90 x 90px

Tamanho indicado para imagem de ícone na categoria: 32 x 32px em PNG

É obrigatório a configuração da quantidade de estrelas, o que é equivalente a quantidade de estrelas a serem apresentadas no depoimento.

Colocar os ícones da categoria na mesma ORDEM DA CATEGORIA, sempre respeitando a quantidade visível em tela, os ícones da categoria NÃO apresentam no mobile.

Sobre Nós na Home

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

Descrição: Sobre nós na Home

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 em roxo.

// Sobre Nós
var devrocket_sobre_nos = {
titulo: "Sobre Nós - Confira!",
conteudo: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book." +
"It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." +
"<strong>Missão e Valores!<strong>" +
"Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.",
imagem: "https://cdn.awsli.com.br/2176/2176146/arquivos/banner-secao-destaques-3-min.png"
};

A imagem é upada em "Gerenciamento de arquivos", e o tamanho indicado é 500 x 500px.

Após as configurações acima, clique em “Criar código”.

Banners entre Seções e Mobile

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

Descrição: Banners entre Seções e Mobile

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 em roxo.

// Banners Após lançamentos
devrocket_lancamentos = {
lancamento : true,
area : 'lancamento',
img1 :'https://cdn.awsli.com.br/2083/2083824/arquivos/banner-secoes-1-min.png',
link1 : "https://devrocket-black-acessorios.lojaintegrada.com.br/",
img2 : '',
link2 : '',
img3: '',
link3: ''
};

// Banners após mais vendidos
devrocket_mais_vendidos = {
maisvendido : true,
area : 'mas-vendido',
img1 :'https://cdn.awsli.com.br/2083/2083824/arquivos/banner-secoes-dupla-1-min.png',
link1 : "https://devrocket-black-acessorios.lojaintegrada.com.br/",
img2 : 'https://cdn.awsli.com.br/2083/2083824/arquivos/banner-secoes-dupla-2-min.png',
link2 : 'https://devrocket-black-acessorios.lojaintegrada.com.br/',
img3: '',
link3: ''
};

// Banners após destaques
devrocket_destaques = {
destaque : true,
area : 'destaque',
img1 :'https://cdn.awsli.com.br/2083/2083824/arquivos/banner-secoes-trio-1-min.png',
link1 : "https://devrocket-black-acessorios.lojaintegrada.com.br/",
img2 : 'https://cdn.awsli.com.br/2083/2083824/arquivos/banner-secoes-trio-2-min.png',
link2 : 'https://devrocket-black-acessorios.lojaintegrada.com.br/',
img3: 'https://cdn.awsli.com.br/2083/2083824/arquivos/banner-secoes-trio-3-min.png',
link3: 'https://devrocket-black-acessorios.lojaintegrada.com.br/'
};

// Banners Mobile
devrocket_banner_mobile = [
{
link : "https://devrocket-black-acessorios.lojaintegrada.com.br/",
img:"https://cdn.awsli.com.br/2083/2083824/arquivos/banner-full-mobile-1-min.png"
},
{
link : "https://devrocket-black-acessorios.lojaintegrada.com.br/",
img: "https://cdn.awsli.com.br/2083/2083824/arquivos/banner-full-mobile-2-min.png"
},
{
link : "https://devrocket-black-acessorios.lojaintegrada.com.br/",
img: "https://cdn.awsli.com.br/2083/2083824/arquivos/banner-full-mobile-3-min.png"
}
];

Após as configurações acima, clique em “Criar código”.

Os banners devem ser upados em "Gerenciamento de arquivos".

Observação: o link é o endereço para redirecionar ao clicar no banner; o img é o endereço da imagem no "Gerenciamento de arquivos".

Tamanhos para os banners entre seções, se for utilizar 1, 2 ou 3 banners:

1 banner: 1600 px largura x 600 px altura (altura livre)

2 banners: 800 px largura x 800 px altura (altura livre)

3 banners: 600 px largura x 600 px altura (altura livre)

Dimensão para Full Banners no Mobile: 500 x 700 px

Mini Banners no Código

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

Descrição: Mini Banners no Código

Local publicação: Cabeçalho

Página publicação: TPágina Inicial - Home

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 em roxo.

// Mini banners via código
devrocket_banner_mini = {
img1 :'https://cdn.awsli.com.br/2382/2382499/arquivos/banner-secao-mobile-1-min.png',
link1 : "https://glow-moda-devrocket.lojaintegrada.com.br/",
img2 : 'https://cdn.awsli.com.br/2382/2382499/arquivos/banner-secao-mobile-2-min.png',
link2 : 'https://glow-moda-devrocket.lojaintegrada.com.br/',
img3: 'https://cdn.awsli.com.br/2382/2382499/arquivos/banner-secao-mobile-3-min.png',
link3: 'https://glow-moda-devrocket.lojaintegrada.com.br/'
};

Após as configurações acima, clique em “Criar código”.

Os banners devem ser upados em "Gerenciamento de arquivos".

Observação: o link é o endereço para redirecionar ao clicar no banner; o img é o endereço da imagem no "Gerenciamento de arquivos".
Tamanho recomendado do banner: 500 x 700px

Lembrando que, se os mini banners forem inseridos via painel da loja, os mesmos não deverão ser inseridos via código, e vice e versa.

Feed das Redes Sociais

Ideal para inserir os mesmos posts das redes sociais na sua loja virtual, inserindo a quantidade desejada de posts.

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

Descrição: Feed das Redes Sociais

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 em roxo.

// Feed Redes Sociais
var devrocket_feed_conta = {
frase: 'Siga nosso Instagram',
conta: '@seuinstagram',
url: 'https://www.instagram.com/instagram/'
};

var devrocket_feed = [
{
img: 'https://cdn.awsli.com.br/1934/1934313/arquivos/post-10-tema-petshop-tray.png',
url: 'https://www.instagram.com/instagram/'
},
{
img: 'https://cdn.awsli.com.br/1934/1934313/arquivos/post-11-tema-games-tray.png',
url: ''
},
{
img: 'https://cdn.awsli.com.br/1934/1934313/arquivos/post-12-tema-black-friday-loja-integrada.png',
url: ''
},
{
img: 'https://cdn.awsli.com.br/1934/1934313/arquivos/post-9-black-friday-2021.png',
url: ''
},
{
img: 'https://cdn.awsli.com.br/1934/1934313/arquivos/post-1-tema-max-loja-integrada.png',
url: ''
},
];

Após as configurações acima, clique em "Criar Código".

Os banners devem ser upados em "Gerenciamento de arquivos".

Observação: a url é o endereço para redirecionar ao clicar no banner; o img é o endereço da imagem no "Gerenciamento de arquivos".

Tamanho indicado da imagem: 300 x 300 px

Timer Régua de Promoção

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

Descrição: Timer Régua

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 em roxo.

// Timer Régua
var devrocket_timer_regua = {
data : '2022-12-31T20:22:00',
titulo : 'Promoção Exclusiva',
frase : 'Aproveite os melhores produtos com os melhores preços!',
cor_fundo : '#e411a7',
cor_texto : '#ffffff',
url: 'https://devrocket-vip-moda.lojaintegrada.com.br/shorts-jeans-com-elastano-azul'
};

Após as configurações acima, clique em “Criar código”.

A imagem do timer régua deve ser upada na plataforma conforme passo a passo citado anteriormente neste manual, em "Upload de Imagens".

Tamanho ideal da imagem: 1600 x 170 px

Alterar a URL em roxo.

Acesse: Visual » Editar CSS

Insira o código abaixo:

.devrocket-timer-regua{
background-image: url('https://cdn.awsli.com.br/2176/2176146/arquivos/banner-timer-regua-min.png');
}

Carrossel de Categorias

Podendo ser configurada no cabeçalho ou no rodapé, o carrossel de categorias é essencial para a loja virtual, inserindo a quantidade desejada.

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

Descrição: Carrossel de Categorias

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 em roxo.

// Carrossel de Categorias
var devrocket_carrossel_categorias_posicao = 'cabecalho'; // cabecalho | rodape
var devrocket_carrossel_categorias_titulo = 'Conheça nossas Coleções';
var devrocket_carrossel_categorias = [
{
img: 'https://cdn.awsli.com.br/2176/2176146/arquivos/saia.png',
url: 'https://devrocket-vip-moda.lojaintegrada.com.br/acessorios',
titulo: 'Acessórios',
},
{
img: 'https://cdn.awsli.com.br/2176/2176146/arquivos/camisa.png',
url: 'https://devrocket-vip-moda.lojaintegrada.com.br/bermudas',
titulo: 'Bermudas',
},
{
img: 'https://cdn.awsli.com.br/2176/2176146/arquivos/camiseta.png',
url: 'https://devrocket-vip-moda.lojaintegrada.com.br/blusas',
titulo: 'Blusas',
},
];

Após as configurações acima, clique em "Criar Código".

Os banners devem ser upados em "Gerenciamento de arquivos".

Observação: a url é o endereço para redirecionar ao clicar no banner; o img é o endereço da imagem no "Gerenciamento de arquivos".

Tamanho indicado da imagem: 300 x 300 px

Caso queira que o Carrossel de Categorias abra o link na mesma guia, insira o código abaixo:

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

Descrição: Carrossel de Categorias - Abrir na mesma guia

Local publicação: Rodapé

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

Tipo: HTML

// Carrossel Categorias - Abrir na mesma aba
<script>
setTimeout(function(){
$('.devrocket-carrossel-categorias-conteiner a').attr('target','_self');
}, 2000);
</script>

Página Extra no Cabeçalho

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

Descrição: Feed das Redes Sociais

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 em roxo.

// Página Extra
var devrocket_paginas_extras_cabecalho = [
{
url: 'https://devrocket-vip-moda.lojaintegrada.com.br/pagina/missao-e-valores.html',
nome: 'Missão e Valores',
},
{
url: 'https://devrocket-vip-moda.lojaintegrada.com.br/pagina/politica-de-privacidade.html',
nome: 'Política de Privacidade',
},
{
url: 'https://devrocket-vip-moda.lojaintegrada.com.br/pagina/quem-somos.html',
nome: 'Quem Somos',
},
{
url: 'https://devrocket-vip-moda.lojaintegrada.com.br/pagina/servicos.html',
nome: 'Serviços',
},
];

Após as configurações acima, clique em "Criar Código".

Observação: a url é o endereço para redirecionar ao clicar no nome da página.

Box de Promoção e Ofertas do Dia

O "Ofertas do Dia" apresenta junto com o menu de categorias e é redirecionado para o "Box de Promoção".

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

Descrição: Feed das Redes Sociais

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 em roxo.

// Box de Promoção
var devrocket_produtos_vitrine = {
produtos: [131190091, 131189750, 131189612, 131189384],
titulo: 'Produtos em Destaque',
texto: 'Promoção Exclusiva. Aproveite!',
data_final: '2023-12-31T00:00:00',
cor_fundo: '#e411a7',
cor_texto: '#ffffff'
};

// Ofertas do Dia
var devrocket_oferta_dia = {
titulo: 'Promoções Exclusivas',
cor: '#ffffff'
}

Após as configurações acima, clique em "Criar código".

Em produtos altere para o código do produto, acessando Produtos » Listar » escolha o produto desejado » número na URL.

Os produtos para apresentar no box de promoção, devem estar cadastrados como destaque na plataforma.

Página Extra no Menu

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

Descrição: Página Extra no Menu

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 em roxo.

var devrocket_paginas_extras_menu = [
{
url: 'https://glow-moda-devrocket.lojaintegrada.com.br/vestido-amplo-multicores-lima-com-recortes',
nome: 'Black Friday 2022',
posicao: 'final',
},
{
url: 'https://glow-moda-devrocket.lojaintegrada.com.br/vestido-preto-decote-quadrado-com-mangas-em-tule',
nome: 'Lançamentos',
posicao: 'inicio',
}
];

Após as configurações acima, clique em "Criar Código".

Observação: a url é o endereço para redirecionar ao clicar no nome da página.

Data de Validade nos Produtos

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

Descrição: Data de Validade nos Produtos

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 em roxo.

// Data de Validade - Produtos
var devrocket_produtos_validade = [
   {
       produto: 152800665,
       validade: "10/10/2025",
   },
   {
       produto: 152800257,
       validade: "10/10/2025",
   },
   {
       produto: 152793841,
       validade: "10/10/2025",
   },
];

Após as configurações acima, clique em "Criar código".

Em produtos altere para o código do produto, acessando Produtos » Listar » escolha o produto desejado » número na URL.

Flag na Página de Produtos

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

Descrição: Flag na Página de Produtos

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 em roxo.

var devrocket_flag_pagina_produto = [
{
produto: 152800665,
link: "",
posicao_x: "direita",
posicao_y: "superior",
url_img: ""
},
{
produto: 152800257,
link: "https://devrocket-max-moda.lojaintegrada.com.br/blusas",
posicao_x: "esquerda",
posicao_y: "superior",
url_img: "https://img.theculturetrip.com/450x/smart/wp-content/uploads/2017/06/brazili-flaf.png"
},
{
produto: 152793841,
link: "",
posicao_x: "direita",
posicao_y: "inferior",
url_img: ""
}
];

Após as configurações acima, clique em "Criar código".

Ícones, Disponibilidade e Títulos da Loja

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

Descrição: Ícones, Disponibilidade e Títulos da Loja

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 em roxo.

// Ícone da opção Favoritos
var devrocket_icone_favoritos = 'bandeira'; // coração | estrela | bandeira

// ícone do Carrinho
var devrocket_icone_carrinho = 'sacolinha'; // carrinho | cesta | sacolinha

// Opção de fechamento da forma de pagamento na página de produto
var devrocket_compactar_formas_pagamento = 'fechado'; // aberto | fechado

// Retirar itens do menu principal
var devrocket_retirar_itens_menu = ["Casacos", "Jaquetas", "Saias"];

// Disponibilidade de estoque nas variações do Produto
var devrocket_disponibilidade_estoque_variacoes_produtos = 'sim'; // sim | não

// Alterar os títulos das Vitrines
var devrocket_titulos_vitrines = ["Temos Novidades", "Confira Também :P", "Promoção | 30% OFF", "Quem Já Comprou..."];

// Alterar os títulos do rodapé
var devrocket_titulos_rodape = [
"Nossas Categorias", // Categorias
"Páginas Extras", // Conteúdo
"Sobre Nós", // Sobre a loja
"Nosso Horário", // Horário de Atendimento
"Chama WhatsApp", // WhatsApp
"Nossas Redes", // Social
"Siga no Insta", // Siga nosso Instagram
"Rastreie seu Pedido (Correios)" // Rastreio de Pedidos
];

Após as configurações acima, clique em "Criar código".

Ocultador, Mapa da Loja e Todas as Categorias

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

Descrição: Ocultador, Mapa da Loja e Todas as Categorias

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 em roxo.

// Ocultar o cálculo de CEP na página de Produto e Carrinho
var devrocket_ocultar_calculo_cep = 'não'; // sim | não

// Mapa na Loja
var devrocket_mapa_loja = true;
var devrocket_mapa_loja_frase = "Onde Estamos | Mapa";
var devrocket_mapa_loja_endereco = "Avenida Carlos Gomes, 46 - Sala 2, Centro, CEP: 17.501-000 - Marília / São Paulo, Brasil";
var devrocket_mapa_loja_iframe = '<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3693.4710105699855!2d-49.94854318450002!3d-22.222201019388702!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94bfd7b070e481a7%3A0x9a2f4deabf0405dc!2sDevRocket%20-%20Ag%C3%AAncia%20de%20Dev%20e%20Mkt!5e0!3m2!1spt-BR!2sbr!4v1633459236921!5m2!1spt-BR!2sbr" width="100%" height="420px" style="border:0;" allowfullscreen="" loading="lazy"></iframe>';

// Todas as categorias dentro de "+ Categorias"
var devrocket_menu_mais_categorias = 'sim'; // sim | não

Após as configurações acima, clique em “Salvar Alterações”.

Temporizador, Botão Fixo e Alerta de Frete Grátis

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

Descrição: Temporizador, Botão Fixo e Alerta de Frete Grátis

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 em roxo.

// Temporizador do Carrinho
var devrocket_temporizador_carrinho = {
cor_fundo: '#ff0000',
cor_texto: '#ffffff',
frase: 'Finalize seu pedido agora! Faltam apenas:', // Frase
minutos: 10 // Minutos para finalizar
};

// Botão "Comprar Fixo" na listagem de produtos
var devrocket_botao_comprar_fixo = 'nao'; // sim | não
var devrocket_botao_comprar_fixo_mobile = 'nao'; // sim | não

// Alerta de Frete Grátis
var devrocket_alerta_frete_gratis = {
valor_frete_gratis: 500, // valores sempre com "ponto"
valor_diferenca: 500, // valores sempre com "ponto"
cor_texto: '#ffffff',
cor_fundo: '#ff9900'
};

Após as configurações acima, clique em “Salvar Alterações”.

Checkout e TikTok

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

Descrição: Checkout e TikTok

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 em roxo.

var devrocket_checkout_direto = true;

// Tik Tok
var devrocket_link_tiktok = 'https://www.tiktok.com/@google';
</script>

Após as configurações acima, clique em “Salvar Alterações”.

Banner no Vídeo, Logo no Rodapé e Imagem do Produto

Para a apresentação da quantidade de categorias, é necessário a configuração abaixo:

Descrição: Banner no Vídeo, Logo no Rodapé e Imagem do Produto

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 em roxo.

/* Banner no Vídeo */
var banner_video =
{
img: 'https://cdn.awsli.com.br/1263/1263467/arquivos/Banner video Moda Platinum (400 400 px) - certo.png',
url: 'https://devrocket.com.br',
};

/* Logo no rodapé */
const devrocket_logo_footer = 'https://cdn.awsli.com.br/2498/2498751/arquivos/Capturar1-removebg-preview.png';

/* Imagem Produto Vertical */
var orientacao_imagem_produto = 'vertical'; // Qualquer outro valor sera horizontal

Após as configurações acima, clique em "Criar código".

Dropdown de Contato e Promoções

Para a apresentação da quantidade de categorias, é necessário a configuração abaixo:

Descrição: Dropdown de Contato e Promoções

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 em roxo.

/* MENU Dropdown Contatos */
const menu_contatos_ativo = true;
const menu_contatos_telefone = '(00) 00000-0000';
const menu_contatos_whatsapp = '(00) 00000-0000';
const menu_contatos_whatsapp_secundario = '(00) 00000-0000';
const menu_contatos_email = 'email@seudominio.com.br';
const menu_contatos_atendimento = 'Segunda a Sexta das 8hs as 17:30hs'

/* MENU Dropdown Promoções */
const menu_promocoes_ativo = true; /* true ou false */
const menu_promocoes_titulo = '<strong> Marca</strong>';
const menu_promocoes_itens = [
{
titulo: 'Blusas',
link: '/blusas/',
img: '',
svg: `<svg style="margin-bottom: -3px;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-percent" viewBox="0 0 16 16"> <path d="M13.442 2.558a.625.625 0 0 1 0 .884l-10 10a.625.625 0 1 1-.884-.884l10-10a.625.625 0 0 1 .884 0zM4.5 6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm7 6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path></svg>`
},
{
titulo: 'Camisas',
link: '/camisas/',
img: '',
svg: `<svg style="margin-bottom: -3px;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16"><path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"></path></svg>`
},
{
titulo: 'Camisetas',
link: '/camisetas/',
img: 'https://cdn-icons-png.flaticon.com/512/3128/3128568.png',
svg: ``
}
];

CSS na Loja

Caso os ícones forem da cor preta, inserir o código abaixo para que apresente na mesma cor do texto do menu das categorias, no caso, branco.

Acesse: Visual » Editar CSS

Insira o código abaixo:

.devrocket-imagem-categoria{
filter: invert(100%)
}

Após as configurações acima, clique em “Salvar Alterações”.

Para lojas com todos os ícones flutuantes ativos o ideal é aplicar o CSS abaixo:

:root{
--devrocket-voltar-topo-altura: 60px;
--devrocket-voltar-topo-largura: 60px;
--devrocket-voltar-topo-espaco-direita: 20px;
--devrocket-voltar-topo-espaco-esquerda: 20px;
--devrocket-voltar-topo-borda-arredondada: 60px;
--devrocket-voltar-topo-tamanho-fonte: 22px;
--devrocket-voltar-topo-cor-fonte: #ffffff;
--devrocket-voltar-topo-espaco-abaixo: 230px;
--devrocket-voltar-topo-posicao: right; /* right| left */;
}

:root{
--devrocket-telegram-cor-fundo: #0088cc;
--devrocket-telegram-altura: 60px;
--devrocket-telegram-largura: 60px;
--devrocket-telegram-espaco-direita: 20px;
--devrocket-telegram-espaco-esquerda: 20px;
--devrocket-telegram-borda-arredondada: 60px;
--devrocket-telegram-tamanho-fonte: 32px;
--devrocket-telegram-cor-fonte: #ffffff;
--devrocket-telegram-espaco-abaixo: 90px;
--devrocket-telegram-posicao: right; /* right| left */;
}

:root{
--devrocket-instagram-cor-fundo: radial-gradient(circle at 33% 100%, #fed373 4%, #f15245 30%, #d92e7f 62%, #9b36b7 85%, #515ecf);

/* Caso queira colocar um cor específica basta descomentar o código abaixo e comentar o de cima */
/* --devrocket-instagram-cor-fundo: #bc318f; */

--devrocket-instagram-altura: 60px;
--devrocket-instagram-largura: 60px;
--devrocket-instagram-espaco-direita: 20px;
--devrocket-instagram-espaco-esquerda: 20px;
--devrocket-instagram-borda-arredondada: 60px;
--devrocket-instagram-tamanho-fonte: 32px;
--devrocket-instagram-cor-fonte: #ffffff;
--devrocket-instagram-espaco-abaixo: 160px;
--devrocket-instagram-posicao: right; /* right| left */;
}

Para alteração da cor da fonte do menu insira o código abaixo:

:root{
--cor-fonte-menu: #ff9900;
--cor-fonte-submenu: #ff0000;
}
#cabecalho .menu .fundo-menu .titulo, #cabecalho .menu ul li.com-filho a i,
.menu.superior .nivel-um .titulo, .menu.lateral .nivel-um .titulo{
color: var(--cor-fonte-menu) !important;
}
.menu.superior .nivel-dois a, #cabecalho .menu.superior.menu-slide .com-filho.borda-principal .com-filho a i{
color: var(--cor-fonte-submenu) !important;
}

Para troca de fontes e posicionamento dos botões:

:root{
-altura-imagem: 400px;
   --altura-botao-comprar: 42px;
   --altura-imagem-mobile: 220px;
   --fonte-principal: "Poppins"; /* Nunito Sans | Poppins */
   --fonte-titulo-categorias: "DM Serif Display"; /* DM Serif Display | Nunito Sans | Poppins */
   --titulo-produto-estilo: uppercase; /* uppercase | none */
   --cor-bandeira-adicionado-carrinho: #009900;
   --tamanho-maximo-pagina: 1370px;
   --titulo-carrossel-categorias-estilo: uppercase;
}

Após as configurações acima, clique em “Salvar Alterações”.

Criação de Marcas

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.

Banners

Acesse: Visual » Banners

Tamanhos recomendados e posições:

Banner Tarja: 1500 x 80 px

Full Banner: 1600 x 600 px

Mini Banner: 500 x 400 px

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.

Logotipo e Favicon

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.

Descrição da Loja

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.

Avaliação do Tema Comprado

Nos ajude a melhorar nossos temas e serviços oferecidos. Faça a sua avaliação de compra de tema e nos diga a sua experiência desde a compra, configurações e resultado na loja.

Veja como avaliar-nos no artigo "Como avaliar meu tema/serviço?"

Dicas e Curiosidades

» Qualidade das imagens:

Nós, da DevRocket, 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 DevRocket 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.

» Nota Fiscal do Serviço/Tema comprado diretamente na plataforma da Loja Integrada:

Você receberá sempre duas (2) notas fiscais para cada compra realizada, uma da plataforma e outra do parceiro. Ao somar as 2 notas, o total é o valor da sua compra. A nota da Loja Integrada é enviada em até 30 dias após a aprovação da compra. Caso você não receba dentro desse prazo, envie um e-mail para mensalidades@lojaintegrada.com.br com seu número e data de compra e CNPJ/CPF para verificarmos sua nota fiscal referente a Loja Integrada.

Considerações Finais

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 DevRocket!

Manuais

Plataforma Loja Integrada Tema Platinum Manual

Loja Integrada - Platinum