Orientações para um Tema HTML Personalizado
Nesta página
Geral
- Os temas devem ser compatíveis com W3. Ambos markup e styles
- Bibliotecas Javascript, Plug-ins (slideshows, lightboxes, etc) devem estar sempre atualizados. Se possível na última versão estável
- Remova
http:
ouhttps:
de recursos externos, isso evita avisos de sites não seguros. Os Urls devem ser://resource.com/library.js
- CSS Inline deve ser evitado e passado para um ou mais assets css
- Os temas devem ser totalmente Adequados
- Javascript e CSS devem ser transferidos para o rodapé
- Bibliotecas Javascript devem ser minimizadas
Menus
- Se apenas 1 idioma por loja, o menu de idioma não deve ser apresentado
- Se apenas 1 moeda por loja, o menu de moeda não deve ser apresentado
- O menu principal deve apresentar pelo menos 3 níveis de categoria (Categoria > Subcategoria > Sub-subcategoria)
- Se o menu tiver muitos itens, deverá conseguir navegar/visualizá-los mesmo que o ecrã seja menor que a lista de itens
- Se o menu principal tiver muitos itens, a navegação móvel deve ser otimizada para poder visualizar todos os submenus
Área de rodapé
- Exibir opções de contato como número de telefone e e-mail. Exibir o e-mail de contato deve ser uma opção de tema
- Exibir as redes sociais se estiverem presentes nas configurações da loja
- Exibir bloco de direitos autorais com os elementos: “[©] + [An atual] + [Nome da loja]. + Todos os Direitos Reservados. Distribuído por Jumpseller”. A palavra Jumpseller deve ter um link para a página inicial do Jumpseller
- Exibir links do menu de rodapé
Layout Página Inicial
A página inicial deve ter estes blocos disponíveis para o comerciante:
- Controlo deslizante promocional para apresentar imagens e textos em destaque. Sugerimos usar Owl Carousel Library
- Exibir produtos apresentados se a opção de tema estiver ativada. A quantidade de produtos a ser exibida deve estar limitada nas opções de tema
- Exibir Produtos Recentes se a opção de tema estiver ativada. A quantidade de produtos a ser exibida deve estar limitada nas opções de tema
- Exibir área do Blog se a opção de tema estiver ativada. A área do blog deve mostrar as páginas mais recentes com a categoria “Publicação”. A quantidade de páginas a serem exibidas deve ser limitada nas opções de tema
Opcional
- Bloco do Instagram conectado ao Instagram do utilizador de comerciante
- Newsletter connectado a uma conta Mailchimp
Layout de Categoria
A página de categoria deve ter os seguintes elementos:
- Título da categoria com um tag
h1
- Apresentar a imagem da categoria se o comerciante a carregar
- Apresentar a descrição da categoria com um tag
h2
- Seleção de tipo de produto
- Lista de produtos categorizados nesta categoria. Os produtos devem ter os elementos descritos na secção Bloco de Produto
- Paginação limitada à quantidade de produtos escolhida pelo comerciante nas opções do tema
- Se a categoria não tiver produtos associados, deve apresentar a mensagem “Não existem produtos disponíveis nesta categoria”
- Suporte para filtros de produto. Ver a documentação.
Layout dos resultados de pesquisa
A página de resultados de pesquisa deve ter os seguintes elementos:
- Título da página “Resultados de pesquisa” com um tag
h1
- Número de resultados associados à pesquisa
- Apresentar a frase “Pesquisou por:” Seguido pela string de texto que o utilizador pesquisou.
- Lista de produtos que correspondem à pesquisa. Os produtos devem ter os elementos descritos na seção Bloco de Produto
- Paginação limitada à quantidade de produtos escolhida pelo comerciante nas opções do tema
- Se a pesquisa não tiver resultados, deve apresentar a mensagem: “Não existem produtos que correspondam à sua pesquisa, Tente pesquisar novamente”
- Suporte para filtros de produto. Ver a documentação.
Produtos
Bloco de Produtos
O bloco de produtos nas listas deve ter os seguintes elementos:
- Primeira imagem do produto, se não tiver uma imagem carregada, apresente uma imagem de espaço reservado em substituição
- A imagem deve ter uma tag
alt
com o nome do produto - Nome do produto com uma tag
h3
- Preço do produto e preço com desconto se o produto tiver
- Se o produto e as suas variantes não tiverem stock, apresente uma mensagem “Fora de stock”
- Se o produto e as suas variantes não tiverem disponíveis, apresente uma mensagem “Não disponível”
- Link para o produto
Página do Produto
- Exibir várias imagens de produtos. Se o produto não tiver uma imagem carregada, apresente uma imagem de espaço reservado no lugar com a mensagem “Não há imagem de produto disponível”
- As imagens do produto devem mudar se o visitante escolher uma variante
- Exibir a marca do produto se o produto tiver
- Mostrar preço do produto e preço com desconto se o produto tiver
- Exibir o SKU e Stock de Produto e as suas variantes se as opções de tema para apresentar estiverem ativadas
- Exibir campos personalizados do produto, se disponível
- Exibir anexos do produto, se disponível (e o Produto não é Virtual)
- Exibir Opções de Produto, se disponível
- Oculte o “botão Adicionar ao carrinho” se o produto ou suas variantes não tiverem stock ou não estiverem disponíveis
- A descrição do produto deve apresentar corretamente as tags HTML mais usadas (e.g:
ol
,ul
,li
,strong
,a
,p
,br
,table
,i
,s
,b
,h2
,h3
,h4
,h5
,img
,iframe
,alignment
) - Os ícones de partilha nas redes sociais devem ser apresentados se o comerciante ativou nas opções de tema
- Exibir o bloco “Produtos relacionados” se o comerciante ativá-lo nas opções do tema. Ver o artigo de apoio
Conta de Cliente
Não Registado
- Caso o cliente não esteja registado, a loja deve mostrar um link para o login e registo na área de cliente. Deve aparecer apenas se o comerciante ativar a opção na sua loja.
- O url do link de Login/Registo deve ser:
/cliente/login
. Neste ecrã é apresentado o formulário de Login e um link para o formulário de registo caso o cliente ainda não esteja registado.
Registado
- Quando o cliente estiver na sua conta ou registado, um link para sair da sua conta e o seu nome deve ser apresentado com um link para a sua conta de cliente.
- O ecrã da conta com o url
/cliente
deve apresentar 3 blocos principais:- Informação de Contacto
- Endereços de envio
- Endereço de faturação
- Estes dois últimos devem apresentar links para Adicionar novo/Editar/Excluir/Marcar como principal.
- O mesmo ecrã apresenta as compras realizadas pelo cliente registado. Caso o cliente ainda não tenha feito compras, deverá aparecer a mensagem “Ainda não fez nenhuma compra” e se o cliente tiver feito compras, aparecerá uma lista dessas compras, com as seguintes informações:
- ID do pedido
- Estado do pedido
- Pedido atualizado
- Total do pedido
- Botão para fazer o mesmo pedido
- Lista de produtos no pedido, deve apresentar: quantidade, preço subtotal, nome e variantes se os tiver. Se houver um produto na lista que não existe mais, a mensagem “Este produto não existe” deve ser exibida
- Bloco de visão geral com: custo de envio, subtotal, descontos aplicados e total do pedido
Processo de Compra
Página do Carrinho
- Exiba a tabela de produtos adicionados ao carrinho de compras com os seguintes elementos para cada produto:
- imagem
- nome do produto e suas variantes
- quantidade com possibilidade de atualização
- preço e desconto se o produto tiver
- subtotal
- opção de remover o produto do carrinho
- Exibir formulário para estimativa de custo de envio se estiver ativado nas opções de tema
- Exibir formulário para adicionar um código de cupão se a loja tiver criado um código promocional
- Exibir uma tabela com a revisão do pedido, mostrando os elementos do pedido atual em andamento: subtotal, descontos, impostos, total, custo de envio
- Exibir um botão de envio para ir para a página de checkout
- Se não houver produtos no carrinho, deve exibir uma mensagem como: “O carrinho de compras está vazio neste momento. Pode voltar e começar a adicionar produtos.”
Bloco de Checkout
- Exibir formulário de checkout com suporte a campos personalizados
- Exibir opções de pagamento adicionadas pelo comerciante
- Exibir opções de envio adicionadas pelo comerciante. Oculte se os produtos forem digitais
- Exibir uma tabela com a revisão do pedido, mostrando os elementos do pedido atual em andamento: subtotal, descontos, impostos, total, custo de envio
- Exibir um botão de envio para ir para a página de revisão
Rever Bloco de Pedido
- Apresente a tabela de produtos pedidos com os seguintes elementos para cada um:
- imagem (sem link)
- nome do produto e suas variantes
- quantidade sem a possibilidade de atualização
- preço e desconto se o produto tiver
- subtotal
- exclusão de produto deve ser evitada
- Exibir uma tabela com a revisão do pedido, mostrando os elementos do pedido atual em andamento: subtotal, descontos, impostos, total, custo de envio
- As informações de envio (se disponível) e de faturação devem ser exibidas
Bloco de Sucesso
- Uma mensagem de sucesso ou insucesso (por exemplo ‘Agradecemos pela sua compra’) deve ser apresentada
- O número do pedido
{{ order.id }}
deve ser apresentado - As informações de envio e pagamento devem ser apresentadas
- Se o login do cliente for opcional ou obrigatório, o formulário de criação de palavra-passe do cliente deve ser apresentado
- Se a opção de tema “Tabela de Produtos na Página de Sucesso” estiver ativada, deve apresentá-la
Páginas
- O corpo de todas as páginas deve apresentar corretamente as tags de HTML mais usadas (e.g:
ol
,ul
,li
,strong
,a
,p
,br
,table
,i
,s
,b
,h2
,h3
,h4
,h5
,img
,iframe
,alignment
) - Todos os temas têm por padrão 3 modelos de página: Blog, Publicação e Padrão
Outros
Opções de Tema
- Prefira usar URLs completos para e-mails, redes sociais ou outros e evite criar uma lógica com nomes de utilizador e IDs de conta
- Se o campo estiver vazio, crie a lógica para não exibir este código na web
Imagens
- As imagens dos produtos, categorias e páginas devem ser redimensionadas corretamente utilizando o rótulo líquido:
{% "image.jpg" | resize: npx x npx %}
. Desta forma, o carregamento da loja é otimizado - “Redimensionar” deve ser sempre o escolhido a “Geral”
- Todas as imagens devem ter ambas o
alt
e o tag de texto - Se não tiver imagem, exibir uma imagem de espaço reservado em substituição
Código
- O código HTML deve ser utilizado usando as teclas de atalho do Editor: Selecionar Tudo (Ctrl + A) e Shift + Tab
Traduções
- Texto sem fim, como pontos finais (.) Ou dois-pontos (:) devem estar fora das strings de tradução.
{% t 'Sorty by' %}:
- Os temas devem ser totalmente traduzidos nos nossos idiomas principais antes de serem publicados em https://translate.jumpseller.com
- As traduções devem ser pensadas para beneficiar o cliente final, por exemplo, não há necessidade de traduzir strings de ajuda do comerciante: “Este produto não tem imagem”
SEO
- Na Página Inicial, o Nome da Loja deve ser
h1
, a Descrição da Loja deve serh2
e os Nomes dos Produtos devem serh3
- Na Página da Categoria, o Nome da Categoria deve ser
h1
, o Nome do Produto deve serh2
e a Descrição do Produto deve serh3
- Siga os guias gerais de Web Design de SEO como: http://webdesign.tutsplus.com/articles/seo-articles/seo-checklist/