Personalize o seu tema

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. ___

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.

Links em Banners, Sliders, Botões ou Texto

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.

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:

• 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.

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:

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.

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).