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.

Expandir e recolher seções para visualizar os blocos

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.

Ative ou desative o inspetor de pré-visualização com o botão de alternância na barra superior

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

Inspetor de pré-visualização com a seção

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.

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.

Opção

Opção

Adicionar seções ou blocos
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.

Conjunto de ferramentas do inspetor de pré-visualização

Ferramentas do inspetor de pré-visualização
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.

No modo de barra lateral dupla, o painel de configuração aparece no lado direito da tela.

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.

No modo de barra lateral única, o painel de configuração aparece sobreposto ao painel de navegação.

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.

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.

Usar o botão Remover seção

Etapas:

  1. Na barra lateral do editor de temas, clique na seção ou no bloco que você quer remover.
  2. Clique em Remover seção ou Remover bloco.
  3. 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.

Usar o botão Remover seção

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:

  1. No seletor de páginas do editor de temas, selecione o modelo que você quer pré-visualizar.
  2. Clique em Alterar na seção Pré-visualização do painel de navegação.
  3. 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.

Os botõ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.

Use o botão com símbolo de mais para acessar as informações do tema.

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.

Tudo pronto para começar a vender com a Shopify?

Experimente de graça