Editando seu tema
Edite as configurações do tema para personalizar o conteúdo, o layout, a tipografia e as cores da loja virtual. Cada tema oferece seções e configurações que permitem alterar a aparência da loja sem a edição de código.
Antes de você personalizar seu tema
Antes de personalizar seu tema, recomendamos executar as seguintes tarefas:
- Duplique seu tema para criar uma cópia de backup. Isso facilita o descarte de suas alterações para você iniciar novamente, se for necessário.
- Confira se você entende o nível de atendimento disponível.
- Conheça os requisitos e as práticas recomendadas para o upload de imagens.
Editor de temas
Na barra lateral, o editor de temas exibe uma lista hierarquizada com todos os conteúdos do modelo. Clique no ícone de expansão para ampliar o nó de uma seção ▸ e ver seus blocos, ou use o ícone de colapso para ▾ ocultá-los. Vale lembrar que basta clicar nas seções ou nos blocos para ver as respectivas configurações.
Inspetor de pré-visualização
É um novo recurso no editor de temas que permite acessar, reorganizar, ocultar ou excluir seções e blocos direto na janela de pré-visualização. Assim, o lojista encontra as configurações em questão com mais rapidez e de forma intuitiva.
O inspetor de pré-visualização já está disponível para todos os temas gratuitos da Shopify e fica habilitado por padrão. No entanto, existe a opção de ativar ou desativar o recurso enquanto você edita as páginas da loja.
É muito fácil de usar: quando o inspetor de pré-visualização está habilitado, basta clicar no elemento em destaque para abrir a configuração em questão. Em um dispositivo móvel, quando o inspetor está habilitado, você pode clicar em qualquer elemento para selecionar a configuração correspondente. É possível abrir a planilha inferior para fazer edições por meio da configuração selecionada.
Vale lembrar que o recurso mostra duas bordas diferentes ao redor das seções e dos blocos que foram clicados na janela de pré-visualização:
- Linha contínua azul: a seção ativa cuja configuração fica destacada em cinza na barra lateral.
- Linha pontilhada azul: o bloco associado à seção. Um clique no item dentro da janela de pré-visualização abre as configurações para o bloco ou a seção.
Com esse recurso, basta clicar em uma parte do site na janela de pré-visualização para abrir as configurações relacionadas na barra lateral. Em um dispositivo móvel, toque duas vezes para navegar pelo site como um comprador faria.
Adicionar seções e blocos por meio do inspetor de pré-visualização
Com o inspetor, é possível adicionar seções e blocos ao tema direto na janela de pré-visualização. No dispositivo móvel, você pode adicionar, duplicar, ocultar, mover e excluir seções usando o modo de edição na planilha inferior.
| Ferramenta | Descrição |
|---|---|
| Adicionar seção | O botão Adicionar seção aparece nas partes superior e inferior da seção selecionada. Clique nele se quiser inserir uma nova seção acima ou abaixo da que já está selecionada. |
| Adicionar bloco | O botão Adicionar bloco aparece quando você passa o mouse sobre um bloco. Clique no ícone + para abrir um menu pop-up com os blocos de tema e app disponíveis. Escolha o bloco que você quer adicionar e veja a janela de configurações na barra lateral à direita. |
Ferramentas do inspetor de pré-visualização
Com o inspetor de pré-visualização, é possível mover, ocultar ou excluir seções e blocos no editor de temas.
| Ferramenta | Descrição |
|---|---|
| Mover para a posição seguinte/anterior | Move seções ou blocos para a posição seguinte ou anterior com os ícones de seta no inspetor de pré-visualização. No entanto, vale lembrar que, se a seção selecionada estiver na parte superior da página, o botão Mover para a posição anterior ficará indisponível. Da mesma forma, se a seção estiver na parte inferior da página, não será possível usar o botão Mover para a posição seguinte. |
| Ocultar seção ou bloco | O ícone de olho serve para ocultar seções ou blocos, mas vale ressaltar que não é possível reexibir os elementos escondidos no inspetor de pré-visualização. Nesse caso, existem duas opções: clicar no botão Desfazer na barra superior ou fechar o painel de configurações para voltar à página inicial do editor de temas. Lá, você vê as seções ou blocos ocultos na barra lateral, com o ícone de olho tachado, e basta clicar nele para visualizá-los novamente. |
| Excluir seção ou bloco | Clique no ícone de lixeira para excluir seções ou blocos selecionados no inspetor de pré-visualização. |
Modos da barra lateral
O editor de temas oferece dois modos para aproveitar todo o espaço na tela.
O modo de barra lateral dupla é ideal para navegadores com janelas mais largas e telas maiores, e o modo de barra lateral única é adequado para navegadores com janelas mais estreitas e telas menores. O modo da barra lateral define o local em que o painel de configuração é exibido no editor.
Modo de barra lateral dupla
Se a largura da tela for maior que 1.600 pixels, e a janela do navegador estiver maximizada ou tiver o mesmo tamanho da tela, você terá duas barras laterais. A barra à esquerda contém o painel de navegação, e a barra à direita o painel de configuração.
Modo de barra lateral única
Em navegadores mais estreitos, o painel de configurações abre por cima do painel de navegação da barra lateral quando você clica em uma seção ou bloco para editá-lo. Essa técnica garante espaço suficiente para a pré-visualização do tema.
Grupos de seções
As seções são agrupadas nestas áreas em cada modelo de página:
- Cabeçalho: inclui cabeçalho, barra de comunicados e apps ou Liquid personalizado.
- Modelo: inclui as seções que formam o corpo principal da página; por exemplo, posts do blog, colagens, listas de coleções ou Liquid personalizado.
- Rodapé: inclui rodapé, área para assinatura de e-mail marketing e apps ou Liquid personalizado.
Rodapé e cabeçalho aparecem em todas as páginas da loja virtual. Por exemplo, um bloco de Liquid personalizado no cabeçalho será mostrado em todas as páginas de produto, na página inicial e em outras. Vale lembrar que é possível reordenar as seções conforme necessário.
Seções e blocos
Na lista de seções e blocos, todos os blocos das seções de uma página são exibidos por padrão.
As seções que constituem o cabeçalho ou rodapé ficam recolhidas por padrão. Para vê-las, clique no ícone expandir ▸ ao lado de cada uma.
Mover seções e blocos
É possível mover seções ou blocos de uma área da página para outra pelo ícone ⋮⋮, que permite clicar e arrastar para outro local disponível.
Se esse lugar não for permitido, a seção ou o bloco vão voltar para a posição original.
Remover seções
É possível excluir seções ou blocos de um modelo na tela de configurações de cada item. O botão Remover seção está localizado na parte inferior dessa tela.
Etapas:
- Na barra lateral do editor de temas, clique na seção ou no bloco que você quer remover.
- Clique em Remover seção ou Remover bloco.
- Clique em salvar. Se você estiver editando um tema publicado, clique em publicar para salvar suas alterações e disponibilizá-las em sua loja.
Ocultar blocos
O ícone de olho permite ocultar uma seção ou um bloco.
Modelos
Todos os modelos do tema podem ser acessados pelo seletor de páginas disponível na barra superior do editor de temas.
Se você estiver usando um tema da Online Store 2.0, também poderá criar outro modelo pelo seletor de páginas. Para isso, basta clicar na opção Novo modelo.
Pré-visualizar de modelos com recursos específicos
Use os recursos compatíveis da loja para saber como ficará a aparência do modelo. Selecione um item da loja para testar o visual de um modelo de produto, por exemplo.
Etapas:
- No seletor de páginas do editor de temas, selecione o modelo que você quer pré-visualizar.
- Clique em Alterar na seção Pré-visualização do painel de navegação.
- Selecione o recurso desejado no menu Selecionar.
Desfazer e refazer ações
Os botões Desfazer e Refazer estão localizados no canto superior direito do editor de temas.
Ver a documentação, mostrar informações de atendimento e verificar a versão do tema
Os links para a documentação do tema e as informações de atendimento se encontram no menu Mais ⋯ da barra de menus. Nele também é possível verificar a versão do tema e os dados do criador.
Obtenha ajuda com personalizações
Se você precisar de ajuda para fazer alterações em seu tema, entre em contato com o desenvolvedor dele.
Veja os outros recursos disponíveis para ajudar com personalizações de temas em Recursos adicionais de suporte a temas.