Personalização da sua loja online usando o editor de temas

Use o editor de temas para personalizar as áreas do seu tema, como cores, e gerenciar o conteúdo do seu tema com seções e blocos. O editor de temas tem as seguintes seções:

• A barra de menus exibe ferramentas que permitem explorar mais informações sobre seu tema, navegar entre diferentes modelos, como a página de produto, ajustar o tamanho da tela de visualização e gerenciar suas personalizações.
• No menu da barra lateral, o editor agora exibe uma lista hierarquizada com todos os conteúdos do modelo. É possível gerenciar seções, blocos e configurações no menu da barra lateral.
• A janela de pré-visualização exibe seu tema em tempo real e é atualizada automaticamente à medida que você faz alterações. Na barra de menus, você pode selecionar diferentes opções de exibição do seu tema nos layouts de desktop ou celular. Também é possível ativar o inspetor de pré-visualização para gerenciar o conteúdo de um modelo diretamente na janela de pré-visualização do tema.

Acessar o editor de temas

Você pode acessar o editor de temas no admin da Shopify.

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Ao lado do tema que você quer editar, clique em Personalizar.

Barra de menus

Ela exibe informações sobre seu tema, menus para acessar mais informações e diferentes áreas do tema, além de controles para personalização.

São exibidas as seguintes informações adicionais e opções de navegação:

• Clique no botão para retornar ao admin da Shopify.
• Revise o nome do seu tema.
• Revise o status do seu tema. Seu tema publicado exibe o de status Ao vivo Label. Temas não publicados exibem a legenda de status Rascunho.
• Utilize o para acessar as seguintes opções adicionais: - Use o Editar código para abrir o editor de código. - Use Editar conteúdo do tema padrão para editar o texto padrão no seu tema. - Use para abrir uma pré-visualização do tema. - Use Ver documentação para abrir a documentação do seu tema. - Use para conferir todos os atalhos de teclado disponíveis do editor de temas. - Use o Obter atendimento para atendimento.

Acesse diferentes modelos e layouts de mercado com os seguintes menus:

• O menu mercado.
• O menu modelo.

Use os seguintes controles na barra de menu para personalizar seu tema:

• Ative ou desative o Sidekick.
• Ative ou desative o inspetor de pré-visualização.
• Altere o tamanho da tela com os controles de tamanho da tela.
• Gerencie sua sessão de personalização atual com os controles desfazer e refazer.
• Use o botão salvar para salvar suas alterações.

Ver a documentação, mostrar informações de atendimento e verificar a versão do tema

Dica

Se você usa um tema gratuito da Shopify, pode conferir descrições detalhadas das seções e configurações ao visualizar os Temas da Shopify; basta clicar no nome do tema.

Para saber mais sobre seções e configurações de temas pagos, consulte a respectiva documentação.

Você pode acessar informações disponíveis sobre seu tema, como a versão, informações do desenvolvedor e links para a documentação e o atendimento no menu da barra de menus.

Obtenha ajuda com personalizações

Se precisar de ajuda para fazer alterações no 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.

Usar atalhos de teclado no editor de temas

É possível usar atalhos de teclado para navegar e executar ações no editor de temas.

Lista de atalhos de teclado compatíveis no editor de temas com dispositivos Windows e MacOS.

Categoria	Ação	Atalho no Windows	Atalho no macOS
Geral	Desfazer	CTRL + Z	⌘ + Z
	Refazer	CTRL + Y	⌘ + Y
	Salvar	CTRL + S	⌘ + ⇧ + S
	Ver todos os atalhos	CTRL + /	⌘ + /
Ferramentas	Inspetor de pré-visualização	CTRL + SHIFT + |	⌘ + ⇧ + |
	Modo de pré-visualização	⊞ + CTRL + |	⌘ + ⌃ + |
	Sidekick	CTRL + .	⌘ + .
Navegação	Seções	⊞ + CTRL + Z	⌘ + ⌃ + 1
	Configurações do tema	⊞ + CTRL + Z	⌘ + ⌃ + 2
	Incorporações de apps	⊞ + CTRL + Z	⌘ + ⌃ + 3
Seções e blocos	Ocultar e mostrar	CTRL + SHIFT + H	⌘ + ⇧ + H
	Remover	SHIFT + ⭠	⇧ + ⌫
	Selecionar o anterior	SHIFT + ←	⇧ + ▲
	Selecionar o próximo	SHIFT + →	⇧ + ▼
	Abrir elemento selecionado	SHIFT + ENTER	⇧ + ▼
	Expandir todas as seções	CTRL + SHIFT + O	⌘ + ⇧ + O
	Recolher todas as seções	CTRL + SHIFT + P	⌘ + ⇧ + P

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 qualquer um dos 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.

Ainda é necessário atribuir o modelo ao recurso no admin da Shopify.

Outra maneira de procurar modelos e recursos é usar a barra Pesquisar no seletor de páginas, localizada dentro da ferramenta Adicionar seção, ou então em Adicionar bloco ou Incorporações de app.

Etapas:

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Ao lado do tema que você quer editar, clique em Personalizar.

3. No menu de modelos, selecione o modelo que deseja visualizar.

4. No menu da barra lateral, na seção Pré-visualizar, clique em Alterar.

5. Selecione o recurso desejado no menu Selecionar.

Inspetor de pré-visualização

O inspetor de pré-visualização permite acessar, reorganizar, ocultar ou excluir seções e blocos direto na janela de pré-visualização. Assim, o inspetor de pré-visualização encontra as configurações em questão com mais rapidez e de forma intuitiva na janela de pré-visualização.

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 ao clicar no botão 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 uma das seguintes duas bordas ao redor das seções e dos blocos que foram clicados na janela de pré-visualização:

• A Linha contínua azul indica a seção ativa cuja configuração fica destacada em cinza na barra lateral.
• A Linha pontilhada azul indica 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. Para usá-lo no app da Shopify, mantenha pressionada uma seção para gerenciá-la.

Descrições dos botões Adicionar seções e Adicionar blocos no inspetor de pré-visualização.

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. Mova o cursor sobre o botão 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 ou duplicar as seções e blocos no editor de temas.

Lista das ferramentas do inspetor de pré-visualização disponíveis, incluindo mover, duplicar, ocultar e excluir seções ou blocos.

Ferramenta	Ação	Descrição
	Mover para a posição anterior	Clique neste botão para mover 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 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 neste botão para duplicar uma seção ou um bloco junto com o conteúdo.
	Ocultar seção ou bloco	Clique neste botão para ocultar uma seção ou bloco, mas vale ressaltar que não é possível reexibir os elementos escondidos no inspetor de pré-visualização. Você pode clicar no botão na barra menus ou clicar no botão no menu da barra lateral ao lado da seção ou bloco para exibi-lo.
	Excluir seção ou bloco	Este botão exclui a seção ou bloco selecionado no inspetor de pré-visualização.

Visualizar diferentes tamanhos de tela no editor de temas

É possível visualizar diferentes tamanhos de tela no editor de temas. Você pode alterar o editor de temas para exibir o tamanho desktop, celular ou tela cheia para garantir que suas edições de tema sejam ideais para diferentes tamanhos de tela e para verificar layout alternativo para desktop e celular. Clique no seguinte botão na barra menu para alterar o tamanho da tela:

• Clique no botão para desktop.
• Clique no botão para celular.
• Clique no botão para tela cheia.

Desfazer e refazer ações

Você pode usar os botões e para desfazer ou refazer as personalizações não salvas. Depois de salvar suas alterações, não será mais possível refazer ou desfazer.

Se não houver personalizações não salvas para desfazer, refazer ou ambos, o botão correspondente ficará desativado.

Menu lateral

No menu da barra lateral, o editor agora exibe uma lista hierarquizada com todos os conteúdos do modelo. É possível gerenciar seções, blocos e configurações no menu da barra lateral.

Modos da barra lateral

O editor de temas tem 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.

Para exibir o editor de temas no modo de barra lateral única em uma tela grande, diminua o tamanho da janela do navegador até que o painel de configurações vá para cima da barra de navegação ou desapareça.

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.

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.

s seções que constituem o cabeçalho ou rodapé ficam recolhidas por padrão, mas é possível clicar no botão de ao lado do nome da seção para vê-la.

Grupos de seções

As seções são agrupadas nestas áreas para cada modelo de página no seu tema:

• A área Cabeçalho inclui cabeçalho, barra de comunicados e apps ou Liquid personalizado.
• A área 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.
• A área 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.

Expandir e recolher seções e blocos

Clique no botão de para ampliar o nó de uma seção e ver seus blocos, ou use o botão de para ocultá-los. Vale lembrar que basta clicar nas seções ou nos blocos para ver as respectivas configurações.

Mover seções e blocos

É possível mover seções ou blocos de uma área da página para outra pelo botão , 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.

Remoção de seções e blocos

É possível remover uma seção ou bloco de um modelo de uma das duas maneiras a seguir:

• Mova o cursor para o nome da seção e clique no botão:

  

• Clique no nome da seção e, em seguida, Remover seção nas informações de configuração da seção:

  

Etapas:

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Ao lado do tema que você quer editar, clique em Personalizar.

3. Na barra lateral do editor de temas, clique na seção ou no bloco que você quer remover.

4. Clique em Remover seção ou Remover bloco.

5. 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 seções e blocos

O botão de permite ocultar uma seção ou um bloco: