Visão geral dos recursos do editor de temas

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

Acessar o editor de temas

É possível 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.

Seções de layout do editor de temas

O editor de temas tem as seguintes seções:

• A barra de menu apresenta botões de navegação à esquerda para alternar entre seções, configurações do tema e incorporações de app; os menus de nome do tema, mercado e modelo ficam no centro; e os controles de personalização, à direita.
• A barra lateral exibe uma visualização em árvore de todo o conteúdo do modelo que está sendo visto no momento. É possível gerenciar seções e blocos, incorporações de app e configurações na barra lateral, que pode ser recolhida.
• A janela de visualização exibe o tema e é atualizada automaticamente quando alterações são feitas. É possível ativar a visualização em dispositivos móveis ou usar o inspetor de visualização para gerenciar o conteúdo de um modelo de tema nessa janela.

Barra de menus

A barra de menu exibe a navegação, as informações do tema e os controles de personalização.

Navegação da barra lateral

No lado esquerdo da barra de menu, é possível alternar entre as seguintes visualizações da barra lateral:

• para gerenciar as seções e os blocos no modelo em uso.
• para gerenciar as configurações globais do tema, como cores, tipografia e layout.
• para gerenciar os apps incorporados ao tema.

Para ocultar a barra lateral e ter uma pré-visualização do tema em largura total, clique novamente no botão ativo para desmarcá-lo. Se os dois painéis estiverem visíveis, clicar no botão ativo recolhe ambos simultaneamente.

Detalhes do tema e menus de mercado e modelo

No centro da barra de menu, você encontra as seguintes opções:

• O nome do tema e o respectivo status. O tema publicado exibe o rótulo de status Ativo . Temas não publicados exibem o rótulo de status Rascunho . Clique no nome do tema para acessar as seguintes opções:
  • Use Editar código para abrir o editor de código.
  • Use Editar conteúdo do tema-padrão para editar o texto-padrão do tema.
  • Use para abrir uma visualização do tema.
  • Use Ver documentação para abrir a documentação do tema.
  • Use para consultar todos os atalhos do teclado disponíveis para o editor de temas.
  • Use Buscar atendimento para receber atendimento.
• O menu mercado permite visualizar e personalizar o tema para diferentes mercados.
• O menu modelo permite navegar entre os diferentes modelos de página do tema.

Atalhos de personalização

É possível usar os seguintes controles na barra de menus para personalizar o tema e gerenciar as alterações:

• Ative ou desative o Sidekick para receber ajuda com as personalizações do tema.
• Ative ou desative o inspetor de pré-visualização.
• Alterne o botão de pré-visualização para visualizar o tema em uma tela de dispositivo móvel.
• Gerencie a sessão de personalização atual com os controles de desfazer e refazer.
• Use o botão Salvar para salvar as alterações.

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

Barra lateral

A barra lateral exibe uma visualização em árvore de todo o conteúdo do modelo que você está visualizando no momento. É possível gerenciar seções e blocos e configurações do tema a partir da barra lateral. Para recolher a barra lateral, clique novamente no botão de navegação ativo na barra de menus para desativá-lo.

O tema pode ter ajustes condicionais que aparecem na barra lateral a depender de outras configurações ativas. Por exemplo, se o tema tiver um bloco com uma configuração para adicionar vídeo ou imagem, o seletor de imagens ou o link do vídeo poderão ser um ajuste condicional que só será exibido depois de selecionar Imagem como o tipo de mídia.

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 é para janelas de navegador mais largas e telas maiores, e o modo de barra lateral única é para janelas de navegador mais estreitas e telas menores. O modo da barra lateral determina onde o painel de configurações é exibido no editor de temas.

Modo de barra lateral dupla

Se a janela do navegador tiver pelo menos 1.600 pixels de largura, você terá dois painéis. O painel esquerdo contém a estrutura da página com as seções e os blocos, e o painel direito contém as configurações da seção ou do bloco selecionado. É possível recolher o painel direito ao desmarcar seções.

Para ver o editor de temas no modo de barra lateral única em uma tela grande, diminua a largura da janela do navegador até o editor mudar para o layout empilhado.

Modo de barra lateral única

Em telas mais estreitas, o editor usa um layout empilhado. Ao clicar em uma seção ou um bloco, o painel de configurações desliza da parte inferior da tela para cima em vez de cobrir a estrutura da página. É possível arrastar o divisor para ajustar a divisão entre a estrutura da página e as configurações, assim ambas se mantêm sempre visíveis.

Visualizar o tema

É possível pré-visualizar o layout do tema para dispositivos móveis ao clicar no botão na barra de menus. Para voltar à pré-visualização no desktop, clique novamente no botão para dispositivos móveis.

Para pré-visualizar o tema em largura total, clique no botão de navegação da barra lateral ativo para recolher a barra lateral. Se os dois painéis estiverem visíveis, essa ação recolhe ambos simultaneamente e exibe a vitrine virtual em largura total.

Desfazer e refazer alterações não salvas

Use os botões e para desfazer ou refazer personalizações não salvas. Depois de salvar as alterações, não é mais possível refazer nem desfazer.

Uso de atalhos de teclado no editor de temas

Use atalhos de teclado para navegar e realizar ações no editor de temas.