As nossas orientações para criar um Tema HTML Personalizado
Orientações sobre como personalizar a sua loja Jumpseller editando o HTML e CSS. Este é um trabalho interno em progresso das nossas Orientações de ...
O tema simples possui dois tipos de cabeçalho:
Cabeçalho de largura total: O cabeçalho se estende completamente de um lado da tela para o outro. Este tipo de cabeçalho será exibido se marcar a opção “Mostrar comprimento total do cabeçalho” em Opções do tema> Geral.
Cabeçalho estreito: O cabeçalho mantém um espaço vazio ao seu redor. Esse tipo de cabeçalho será exibido se desmarcar a opção “Mostrar comprimento total do cabeçalho” em Opções de tema> Geral.
Moedas adicionais e ID de Aplicação de OpenExchangeRates: Usará esses campos se desejar exibir várias moedas em sua loja. Aprenda aqui como ter várias moedas em sua loja.
Ícones para redes sociais e WhatsApp aparecerá se tiver essas informações no seu Painel de Administração > Definições > Geral
As informações que devem ser exibidas nesta seção podem ser editadas em Opções de Tema> Geral> Texto na barra superior.
Se deseja que a barra superior continue aparecendo na parte superior da página ao rolar para baixo, selecione “Barra superior” na opção de cabeçalho fixo:
A barra superior fica assim quando a página rolar para baixo:
O tema Simple pode ter dois tipos de menu:
Menu Horizontal: Os submenus serão exibidos na mesma linha, lado a lado. Esse design de menu aparecerá quando a opção “Mostrar o Menu Principal Verticalmente” não estiver marcada nas opções gerais.
Menu Vertical: Ele mostrará as opções de submenus empilhadas umas sobre as outras. Esse design de menu aparecerá quando a opção “Mostrar o Menu Principal Verticalmente” estiver marcada nas opções gerais.
Também pode selecionar se deseja alinhar o menu à esquerda ou no centro da barra de navegação.
Se deseja que seu menu continue aparecendo na parte superior da página ao rolar para baixo, selecione “Menu” na opção de cabeçalho fixo:
A menú fica assim quando a página rolar para baixo:
Aprenda a configurar o menu de navegação na sua loja
Existem duas áreas principais para exibir produtos na página inicial: Produtos em destaque e Produtos recentes.
Pode optar por mostrar as duas opções, uma delas ou nenhuma, alterando a seleção em “Exibir produtos na página inicial”.
Se o seu produto tiver variantes com preços diferentes e não desejar exibir um preço fixo na página inicial, poderá marcar a opção “Mostrar ‘desde’ nos Preços de Produtos com Variantes”. O preço mais baixo será exibido.
Na página inicial, os preços dos produtos ficarão assim:
Para mostrar um produto nesta seção, deve primeiro configurar o produto como “Produto em destaque”:
Quando salva as alterações, o produto será exibido na seção “Produtos em destaque”:
Nesta seção, todos os produtos adicionados recentemente serão exibidos classificados pela data de criação. O último produto criado será exibido primeiro na linha.
Pode selecionar quantos produtos em destaque e produtos recentes deseja exibir na página inicial, selecionando um número na lista suspensa. Pode ter até 36 produtos em cada seção.
As informações da loja são mostradas no rodapé em “Contato” e na página de contato da loja.
Pode adicionar um número de telefone de contato e decidir se deseja exibir o e-mail de contato marcando ou desmarcando essa opção.
O email de contato está configurado no seu Painel de Administração > Definições > Geral
O menu mostrado no rodapé deve ser criado na guia “Menu do rodapé”, nas opções de menu localizadas no Painel de administração> Temas > Navegação.
As opções adicionadas a este menu de rodapé aparecerão aqui:
Links para perfis de mídia social aparecerão em “Siga-nos” se tiver essas informações registradas no seu Painel de Administração > Definições > Geral
Pode adicionar alguns logotipos da forma de pagamento e o logotipo da loja, selecionando-os nas opções “Rodapé”.
Eles serão mostrados aqui:
Tem a opção de configurar até oito banners na página inicial. Esses banners podem ser vinculados a uma página de categoria, uma página de produto, uma página de conteúdo ou qualquer outro item de conteúdo para o qual tenha um URL.
Precisa ter uma imagem para cada banner. O tamanho sugerido é: 240x240. Em seguida, precisará do link para a página da categoria que deseja exibir.
Vá para o Painel de administração> Produtos> Categorias e selecione a categoria à qual deseja vincular o banner.
Uma vez dentro da página da categoria, role para baixo até “Visão do Resultado na Pesquisa”, onde pode obter o permalik da categoria.
Então, escrevendo esse link permanente na opção de tema “Banner Link”, o banner será redirecionado para a página da categoria que selecionou.
Na seção de redes sociais, também pode optar por mostrar seu feed do Instagram (se tiver um). Esta seção será exibida nas seções “Produtos em destaque” e “Produtos recentes”.
Também pode selecionar se deseja mostrar 6 ou 12 postagens do Instagram ao mesmo tempo.
Importante: Sua conta do Instagram deve estar definida como “Pública” para exibir o feed. Se estiver definido como “Privado”, as imagens não serão exibidas. O feed é atualizado mensalmente; portanto, quando publica uma imagem no Instagram, ela não aparece imediatamente.
Pode decidir se deseja mostrar as postagens mais recentes do blog na página inicial, marcando e desmarcando esta opção.
Também pode selecionar quantas postagens deseja mostrar.
A seção do blog será exibida abaixo da seção “Produtos recentes” na página inicial.
Aprenda a usar a funcionalidade do blog incorporada à sua loja aqui
O Slider tem as seguintes opções:
Ativar Altura Automática do Slider: A ativação dessa opção elimina as restrições de altura do controle deslizante e adapta automaticamente a altura ao tamanho da imagem. Esta opção é especialmente recomendada se deseja que suas imagens sejam exibidas em tamanho real na versão móvel. Se ativar esta opção, sugerimos que todas as imagens tenham a mesma altura para respeitar o design da página inicial.
Ativar Loop: As imagens deslizam constantemente.
Ativar Reprodução automática: Os slides começarão a mudar assim que a página carregar.
Ativar Pausar ao Passar o Rato: A animação será interrompida quando o mouse for colocado em um dos slides.
Tempo de Espera de Reprodução Automática Define o tempo (em segundos) entre os slides quando “Ativar loop” está selecionado.
Também pode alterar a cor e a opacidade do plano de fundo:
Então tem algumas opções para configurar cada slide:
Precisa fazer o upload de uma imagem de 1905x800 pixels de tamanho recomendado, escrever um título, um texto no botão e ter um URL de destino para vincular o botão.
Pode vincular o botão a uma página específica, a uma página de produto, categoria etc. Veja o exemplo de como obter um link específico em Configurar banners na página inicial
Se essas opções estiverem marcadas, as informações serão exibidas na página do produto.
Se essa opção for selecionada, os produtos relacionados ao produto que está sendo exibido aparecerão na seção inferior da página do produto.
O relacionamento é dado pela primeira categoria de produto que eles compartilham.
Os ícones de redes sociais aparecerão na página do produto para permitir que a publicação do produto seja compartilhada neles.
O ícone do WhatsApp será exibido apenas em dispositivos móveis.
Pode ocultar o ícone do carrinho de compras ou ocultar os preços do produto (ou ambos ao mesmo tempo). Esse recurso é útil quando deseja usar sua loja como um catálogo online ou como um site normal (não como um site de comércio eletrônico).
Se essa opção for selecionada, uma mensagem pop-up será exibida no canto superior direito da loja, sempre que um produto for adicionado ao carrinho.
Se selecionar esta opção, o estimador de custos de envio aparecerá na página do carrinho.
Se selecionar esta opção, uma tabela aparecerá na página de sucesso que mostra cada produto comprado pelo cliente.
Pode adicionar texto à barra lateral do seu blog usando um widget de blog. Também pode definir o título do widget.
O ícone favorito é o pequeno ícone mostrado na guia de navegação quando alguém visita sua loja.
O ícone Jumpseller é exibido por padrão. Pode definir seu próprio favicon em “Outras opções”. Tamanho recomendado: 16x16. Também recomendamos o uso do formato PNG e plano de fundo transparente.
Pode personalizar facilmente fontes e tamanhos nas opções de fonte.
Quando uma imagem não é usada para o logotipo da loja, o nome da loja será exibido. Também pode personalizar sua fonte e tamanho.
A cor principal afetará todos os títulos.
O tema Simple possui um formulário de inscrição para boletins, localizado na parte inferior da página da loja.
Para fazê-lo funcionar, precisa do URL de um formulário de inscrição criado no Mailchimp. Aprenda a criar um formulário de inscrição com o Mailchimp.
Logotipo da loja: alta: 100px a 150px | largura: 100px a 300px |
Teste gratuito por 14 dias. Não é necessário cartão de crédito.