Orientações para um Tema HTML Personalizado

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: ou https: 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 ser h2 e os Nomes dos Produtos devem ser h3
Na Página da Categoria, o Nome da Categoria deve ser h1, o Nome do Produto deve ser h2 e a Descrição do Produto deve ser h3
Siga os guias gerais de Web Design de SEO como: http://webdesign.tutsplus.com/articles/seo-articles/seo-checklist/