Soporte

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://jumpseller.com/translate/
  • 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/