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.
Nesta página
- Antes de você personalizar seu tema
- Editor de temas
- Acessar o editor de temas
- Inspetor de pré-visualização
- Modos da barra lateral
- Grupos de seções
- Seções e blocos
- Modelos
- Editar dados personalizados inline
- Ver a documentação, mostrar informações de atendimento e verificar a versão do tema
- Obtenha ajuda com personalizações
Antes de você personalizar seu tema
Para se preparar para personalizar seu tema, conclua as seguintes tarefas recomendadas:
- 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 recolhimento ▾ para ocultá-los. Vale lembrar que basta clicar nas seções ou nos blocos para ver as respectivas configurações.
Acessar o editor de temas
- No admin da Shopify, acesse Loja virtual > Temas.
- Ao lado do tema que você quer editar, clique em Personalizar.
- Clique em Seçõ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 ativado por padrão. No entanto, existe a opção de ativar ou desativar o recurso enquanto você edita a sessão.
É muito fácil de usar: quando o inspetor de pré-visualização está ativado, basta clicar no elemento em destaque para abrir a configuração correspondente. Em um dispositivo móvel, clique em qualquer elemento para selecionar a configuração. A planilha inferior pode ser aberta para fazer edições por meio dessa 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 cliente 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 do novo bloco na barra lateral à direita. |
Ferramentas do inspetor de pré-visualização
Com o inspetor de pré-visualização, é possível mover, ocultar, duplicar 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. |
| Duplicar uma seção ou um bloco | Clique no ícone de cópia para duplicar uma seção ou um bloco junto com o conteúdo. |
| 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 editar. 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.
Editar dados personalizados inline
Quando você trabalha com dados personalizados para criar páginas de metaobjetos, é possível editar metacampos e metaobjetos inline sem precisar acessar o admin para fazer alterações. Isso funciona para metacampos de imagem, vídeo, cor, produto, página, coleção e texto.
Etapas:
- Selecione uma configuração compatível no tema que seja referenciada no metaobjeto.
- Selecione e edite o valor do metacampo na entrada do metaobjeto no painel de configurações.
- Salve o trabalho. A página de destino será atualizada automaticamente com as novas informações.
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.