Support

Personalize o seu tema

Personalize your online store theme

O seu tema reflete a identidade da sua marca. Na Jumpseller os nossos temas possuem recursos de personalizações distintos para criar experiências únicas aos seus clientes. Nós chamamos essas opções de Opções De Temas.


Neste Guia


Opções De Temas

Tecnicamente uma Opção De Tema é um campo das lojas Jumpseller que podem conter informações como imagens, textos, links, números, arquivos, cores, valores boolean, etc. Eles são usados para personalizar o design da sua loja sem a necessidade de perceber de HTML/CSS, que é a linguagem de marcação usada para criar sites. Após selecionar um Tema, no seu Painel de Administração: Temas > Opções de Tema, todas as opções do tema selecionado serão exibidas. Neste guia vamos mostrar as instruções gerais e exemplos de como usar as opções que estão incluídas na maioria dos temas.

Obtenha o link para a página que deseja conectar ao elemento. Os Links podem ser internos ou externos e devem seguir o seguinte formato:
- Correto /page-name vai apontar para www.yourstore.com/page-name
- Correto //www.yourstore.com/page-name vai apontar para www.yourstore.com/page-name
- Correto //google.com vai apontar para google.com
- Incorreto: https://example.com não usar HTTP:// ou HTTPS:// nos links, use só // como em //example.com
Obtenha o link para as páginas da sua loja nas definições “Otimização Do Mecanismo De Pesquisa”: Produto, Categorias e Páginas têm essas opções. Por exemplo, nas páginas de Categoria: desça até à “Otimização Do Mecanismo De Pesquisa”, onde pode obter o link permanente da categoria. Em seguida, introduzindo esse link permanente na opção de tema "Banner Link", ele redirecionará o banner para a página da categoria.

Simple Theme

Formulários De Subscrição

Alguns temas contêm um formulário de subscrição que permite conectar a sua loja ao Mailchimp, uma ferramenta fácil de usar de marketing por email. Para instalar siga estes passos:

  • Step 1: Obtenha o código de ação de uma lista no Mailchimp, use este guia, especialmente o passo (8) sobre como obter o seu código. Deve aparecer com o texto sublinhado aqui: Mailchimp Action URL
    • Correto: https://jumpseller.us20.list-manage-com/subscribe/post?u=XXXXXXXXXXXXXXXXXXXXXXX$amp;id=119acb
    • Correto: //jumpseller.us20.list-manage-com/subscribe/post?u=XXXXXXXXXXXXXXXXXXXXXXX$amp;id=119acb
    • Incorreto: http://jumpseller.us20.list-manage-com/subscribe/post?u=XXXXXXXXXXXXXXXXXXXXXXX$amp;id=119acb
  • Passo 2: Cole-o no Formulário URL Opções De Tema, ele deve estar no Rodapé ou na secção Outras Opções nas suas Opções De Tema. Mailchimp Theme Option

Favicon: Ícones Do Navegador

É um ícone que os visitantes da página vão ver ao lado do nome da sua página nos seus navegadores. Não existe um padrão partilhado entre todos os navegadores para isso, alguns podem funcionar no Firefox mas não no Chrome, para garantir que o seu favicon seja exibido em todos os navegadores siga estas instruções: - Use formatos PNG ou ICO - A resolução não deve ser superior a 64px*64px

Encontre o campo Favicon na seção Geral ou em Outros nas suas Opções De Tema.

Simple Theme

Sliders e Responsividade

Os Sliders são aqueles grandes banners em movimento que começaram a ficar populares há uma década atrás, as lojas online querem mostrar a maior parte do seu conteúdo de uma só vez.

Existe uma nova tendência sugerindo que é muito melhor ter uma imagem ou uma quantidade muito pequena de imagens, a maioria dos clientes só prestará atenção à primeira imagem de um slider que precisou de carregar várias, arriscando a ter uma tela em branco se a conexão à Internet não for rápida o suficiente. Use mais de que uma imagem no seu slider apenas se isso for muito importante para os seus negócios.

Responsividade nos Sliders com Fundo e elementos na parte superior

Neste tipo de sliders, de forma a tornar visíveis e legíveis os elementos localizados no fundo, a imagem de fundo manterá a sua altura ao mudar para um ecrã de tamanho menor e reorganizará os botões e outros objetos para caber no ecrã. Este é o mesmo Slider em diferentes dispositivos: Responsive Background

Responsividade nos Sliders sem elementos na parte superior, só uma imagem.

Em alguns temas, como o Simples, há uma opção para Ativar a Altura Automática do Slider. Responsive Plain Image


Além Das Opções: Personalização Do Tema

Com alguns conhecimentos de HTML/ CSS/Javascript, pode alterar todos os aspetos visuais do seu tema no seu Painel de Administrador: Temas > Editor De Código.

Você é um expert? Crie o seu próprio tema.

Blocos

  • Layout: As alterações a este bloco afetam todas as páginas da loja.
  • Home: Página Inicial
  • Produtos: As Páginas do Produto, podem ter múltiplos modelos.
  • Categoria: As Páginas de Categoria de Produto, podem ter múltiplos modelos.
  • Pesquisa: Resultados da pesquisa de produtos
  • Contas De Clientes: Páginas de conta do cliente, Início de sessão, Registro, Alteração da Palavra-passe, ordens anteriores, etc.
  • Páginas De Pagamento: Carinho, Processar a compra, Rever a compra e Página Finalizadora.
  • Mensagens De Erro: Todos os erros irão aparecer nesta página.

Parciais

Os Parciais são arquivos com extensões .liquid que são usadas para elementos que se repetem em mais páginas, por exemplo: Listas de Produtos. Se editar um parcial, as alterações serão feitas em todos os elementos que a estão a usar.

Ficheiros e Arquivos

A maioria dos arquivos CSS e Javascript da sua loja estão listados na seção de Ficheiros e Arquivos no canto esquerdo do editor de código.

Opções De Temas

As Opções De Tema são geridas em um arquivo JSON denominado opções.json, com a seguinte estrutura de exemplo:

A alteração de um elemento aqui terá efeito no seu Painel De Administrador: Temas > Opções De Tema. Use-os para criar maneiras simples de alterar os elementos do seu tema.

{
  "Social Networks": {
    "icon": "archive",
    "options": {
      "enable_facebook": {
        "name": "Enable Facebook Share Button",
        "type": "checkbox",
        "default": "1"
      },
      "facebook_url": {
        "name": "Facebook URL",
        "type": "input",
        "default": "https://www.facebook.com/jumpseller"
      },
      "twitter_url": {
        "name": "Twitter URL",
        "type": "input",
        "default": "https://twitter.com/jumpseller"
      },
      "number_tweets": {
        "name": "Number of Latest Tweets to Display",
        "type": "select",
        "default": "10",
        "options": [
          {
            "5": "5"
          },
          {
            "10": "10"
          },
          {
            "15": "15"
          }
        ]
      }
    }
  }
}
  • icon A classe Font Awesome para o ícone que deseja exibir associado a um grupo de Opções De Tema.
  • name O nome Opções De Tema é exibido no Painel De Administração.
  • type Define o Tipo De Opção. Os valores aceites são: entrada, texto, caixa de seleção, seleção, ficheiro, cor.
  • default O valor Padrão da Opção de Tema.
  • options Identifica o início das Opções De Tema dentro de um grupo. É também usado para mostrar as opções disponíveis exibidas na Lista De Seleção (usada apenas quando o tipo=seleção).