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/