Seções e blocos

Use seções no tema para criar o layout que você quer para a loja virtual. As seções são compostas de diferentes tipos de blocos, cada um com uma função específica, como texto, botões, imagens únicas, uma colagem de imagens ou links.

As seções e os blocos proporcionam flexibilidade na forma como você organiza o conteúdo e permitem controlar a aparência da sua loja virtual sem a necessidade de editar o código, incluindo as seguintes opções de personalização:

Reorganizar seções nos modelos e blocos dentro de seções.
Seções e blocos podem ter configurações de personalização específicas.
É possível conectar seções e blocos compatíveis para exibir informações dinâmicas em sua loja virtual a partir de dados personalizados, como adicionar instruções de cuidado aos produtos. Saiba como conectar fontes dinâmicas.

As seções e os blocos disponíveis no editor de temas dependem do seu tema e da versão dele. Por exemplo, o tema pode ter um bloco Slide que você pode adicionar somente a uma seção Apresentação de slides e um bloco de texto Título que você pode adicionar a todas as seções do seu tema. Para saber mais sobre quais opções estão disponíveis, consulte a documentação do seu tema.

Limites máximos da seção e do bloco

As seções e os blocos têm as seguintes limitações máximas:

Cada modelo pode ter até 25 seções.
Cada seção pode ter até 50 blocos. O número exato de blocos e o número de cada tipo de bloco que você pode adicionar a cada seção dependem das fontes de seção e blocos e são especificados pelo designer do seu tema. Por exemplo, se o tema tiver uma seção Assinante de e-mail, você poderá adicionar apenas um bloco Formulário de e-mail.
Blocos compatíveis com aninhamento podem ter até 8 níveis de blocos aninhados.

Nesta página

Fontes em bloco

Dependendo da estrutura do seu tema e dos apps instalados, o tema pode conter uma variedade de seções que aceitam blocos de diferentes fontes. Quando você adiciona um bloco a uma seção, todos os blocos disponíveis para essa seção são exibidos no seletor de blocos. Dependendo do tema e da versão dele, você pode adicionar os seguintes tipos de blocos às seções do tema:

Os blocos de app adicionam funcionalidades ao tema. Use um bloco de app para reposicionar áreas do tema adicionadas pelos apps instalados em uma área específica de uma página dele.
Os blocos de seção são definidos dentro de uma seção específica.
Os blocos de temas são definidos dentro do tema e podem ter funcionalidades dinâmicas, como aninhamento.

O tema pode conter algumas seções que usam blocos de seção e outras que usam blocos de temas. Vale ressaltar que uma única seção pode aceitar blocos de temas ou de seção, mas não uma mistura de ambos.

A disponibilidade de blocos de apps dentro das seções depende da funcionalidade do app e da aceitação de blocos de apps.

Blocos de seção

Os blocos de seção projetados para uma seção específica, sendo que uma seção pode ter limites quanto aos tipos de bloco e ao número de determinado tipo de bloco que você pode adicionar.

Exemplo de uma seção com blocos de seção

Por exemplo, o tema tem uma seção de Assinante de e-mail. Use essa seção para adicionar um formulário de assinatura da newsletter para que os clientes possam assiná-la. Após adicionar a seção Assinante de e-mail, insira um dos seguintes blocos:

Um bloco Formulário de e-mail
Um bloco Cabeçalho
Um bloco Subcabeçalho

Se adicionar o bloco Formulário de e-mail e clicar em + Adicionar bloco para adicionar outro, o bloco Formulário de e-mail não será mais exibido como uma opção no seletor. Essa limitação ajuda a evitar problemas na captura do e-mail do cliente e garante que o cliente possa inserir o e-mail com facilidade.

Se você adicionou todos os três blocos disponíveis para a seção Assinante de e-mail, o seletor de blocos exibirá uma mensagem informando que todos os blocos disponíveis foram usados.

Blocos de temas

Os blocos de temas são definidos dentro do tema e podem ter funcionalidades dinâmicas, como aninhamento. As seções compatíveis com esses blocos aceitam uma variedade de blocos, dependendo da estrutura da seção. Além disso, podem aceitar todos os blocos de tema disponíveis, um subconjunto específico de blocos ou blocos exclusivos da seção. Os blocos de temas também podem ter os seguintes comportamentos:

Alguns blocos aceitam aninhamento, para que você possa aninhar blocos dentro de outros até 8 níveis.
Algumas seções exigem blocos. É possível personalizar ou ocultar os blocos, mas não é possível reordenar ou excluí-los.
Alguns blocos são exibidos automaticamente em uma seção quando certas condições são atendidas.

Exemplo de uma seção com blocos de temas

Por exemplo, seu tema tem uma seção Apresentação de slides com blocos de temas.

Na seção de apresentação de slides do tema, ao clicar em + Adicionar bloco, selecione um bloco Slide no seletor de blocos. Nenhum outro tipo de bloco está disponível. Se você tentar adicionar um bloco Slide a outra seção do seu tema, como uma seção Banner de imagem, o Slide não estará disponível. Esse é um exemplo de bloco restrito.

Após adicionar um bloco Slide à seção Apresentação de slides, clique em + Adicionar bloco para adicionar mais blocos a qualquer bloco Slide na seção Apresentação de slides, como Título, Imagem ou Botão. Esses blocos estão aninhados no Slide. Esse é um exemplo de bloco aninhado.

Se você adicionar um segundo bloco Slide à seção Apresentação de slides, o tema adicionará automaticamente um bloco Controles de apresentação de slides, que exibe botões em que os visitantes do seu site podem clicar para navegar de um slide a outro. Lembre-se de que é possível personalizar o estilo dos botões ou ocultar os controles, mas não remover ou excluir o bloco. Esse é um exemplo de bloco obrigatório exibido de forma condicional.

Compatibilidade do bloco de temas

Para acessar blocos de temas, o tema precisa ter seções compatíveis com esses blocos. Verifique no código do tema se há essa compatibilidade. Caso haja um diretório de blocos na barra lateral do editor do Liquid, você está usando um tema compatível. Também é possível verificar a documentação do tema.

Etapas:

No admin da Shopify, acesse Loja virtual > Temas.
Ao lado do tema que você deseja verificar, clique no botão ... e em Editar código.
Na barra lateral, procure a pasta de blocos.

Personalizar os modelos de tema com seções e blocos

Quando você abre o editor de temas, a página inicial da loja é carregada por padrão. Use o menu suspenso para selecionar outro modelo, como produtos, coleções, páginas ou blogs, ou use a barra de pesquisa para procurar um modelo específico. Quando você seleciona um modelo, ele é carregado no editor de temas com a pré-visualização de todas as alterações feitas.

Adicionar uma seção

Adicione uma nova seção a uma página da loja virtual.

Etapas:

Desktop

No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que você quer editar e clique em Personalizar.
Personalize a página inicial ou clique no menu suspenso Página inicial e selecione o modelo ao qual você quer adicionar uma seção.
Na barra lateral, clique em + Adicionar seção e realize uma destas etapas:
- Selecione uma seção na lista.
- Use o campo Pesquisar seções para encontrar uma seção específica e, em seguida, selecione-a.
Siga estas etapas para personalizar a nova seção:
- Edite as configurações e o conteúdo da nova seção.
- Edite as configurações e o conteúdo dos blocos-padrão carregados com a seção.
- Clique em + Adicionar bloco para incluir um novo bloco.
Opcional: para reorganizar a ordem das seções da página, passe o mouse sobre o respectivo nome e depois clique no ícone ⋮⋮ e arraste-o.
Clique em Salvar.

iPhone

No app da Shopify, toque no botão ….
Na seção canais de vendas, toque em loja virtual.
Toque em Gerenciar todos os temas.
Encontre o tema que você quer editar e toque em Personalizar.
Personalize a página inicial ou toque no menu suspenso Página inicial e selecione o modelo ao qual você quer adicionar uma seção.
Toque em Seções, depois em Adicionar e siga uma destas etapas:
- Selecione uma seção na lista e toque em Adicionar.
- Toque no ícone de lupa para pesquisar uma seção específica, selecione-a e toque em Adicionar.
Siga estas etapas para personalizar a nova seção:
- Edite as configurações e o conteúdo da nova seção.
- Edite as configurações e o conteúdo dos blocos-padrão carregados com a seção.
- Toque em Adicionar bloco para incluir um novo bloco.
Opcional: para reorganizar a ordem das seções da página, toque na seção e arraste-a.
Toque em Salvar.

Android

No app da Shopify, toque no botão ☰.
Na seção canais de vendas, toque em loja virtual.
Toque em Gerenciar todos os temas.
Encontre o tema que você quer editar e toque em Personalizar.
Personalize a página inicial ou toque no menu suspenso Página inicial e selecione o modelo ao qual você quer adicionar uma seção.
Toque em Seções, depois em Adicionar e siga uma destas etapas:
- Selecione uma seção na lista e toque em Adicionar.
- Toque no ícone de lupa para pesquisar uma seção específica, selecione-a e toque em Adicionar.
Siga estas etapas para personalizar a nova seção:
- Edite as configurações e o conteúdo da nova seção.
- Edite as configurações e o conteúdo dos blocos-padrão carregados com a seção.
- Toque em Adicionar bloco para incluir um novo bloco.
Opcional: para reorganizar a ordem das seções da página, toque na seção e arraste-a.
Toque em ✓.

Editar uma seção

Desktop

No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que você quer editar e clique em Personalizar.
Edite uma seção na página inicial ou clique no menu suspenso Página inicial e selecione o modelo que contém a seção que você quer editar.
Na barra lateral, clique no nome de uma seção para carregar o conteúdo na janela de pré-visualização e acessar as configurações e opções disponíveis para edição.
Opcional: clique em blocos individuais para editá-los dentro da seção.
Clique em Salvar.

iPhone

No app da Shopify, toque no botão ….
Na seção canais de vendas, toque em loja virtual.
Toque em Gerenciar todos os temas.
Encontre o tema que você quer editar e toque em Personalizar.
Edite uma seção na página inicial ou toque no menu suspenso Página inicial e selecione o modelo que contém a seção que você quer editar.
Toque em Seções e depois toque no nome de uma seção para carregar o conteúdo na janela de pré-visualização e acessar as configurações e opções disponíveis para edição.
Opcional: toque em blocos individuais para editá-los dentro da seção.
Toque em Salvar.

Android

No app da Shopify, toque no botão ☰.
Na seção canais de vendas, toque em loja virtual.
Toque em Gerenciar todos os temas.
Encontre o tema que você quer editar e toque em Personalizar.
Edite uma seção na página inicial ou toque no menu suspenso Página inicial e selecione o modelo que contém a seção que você quer editar.
Toque em Seções e depois toque no nome de uma seção para carregar o conteúdo na janela de pré-visualização e acessar as configurações e opções disponíveis para edição.
Opcional: toque em blocos individuais para editá-los dentro da seção.
Toque em ✓.

Duplicar uma seção ou um bloco

Desktop

No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que você quer editar e clique em Personalizar.
Duplique uma seção ou um bloco na página inicial ou clique no menu suspenso Página inicial e selecione o modelo que contém a seção ou o bloco que você quer duplicar.
Clique na seção ou no bloco que você quer duplicar.
Na barra lateral, clique em ... > Duplicar.
Clique em Salvar.

iPhone

No app da Shopify, toque no botão ….
Na seção canais de vendas, toque em loja virtual.
Toque em Gerenciar todos os temas.
Encontre o tema que você quer editar e toque em Personalizar.
Duplique uma seção ou um bloco na página inicial ou toque no menu suspenso Página inicial e selecione o modelo que contém a seção ou o bloco que você quer duplicar.
Toque em Seções e, depois, na seção ou no bloco que você quer duplicar.
Toque em … > Duplicar.
Toque em Salvar.

Android

No app da Shopify, toque no botão ☰.
Na seção canais de vendas, toque em loja virtual.
Toque em Gerenciar todos os temas.
Encontre o tema que você quer editar e toque em Personalizar.
Duplique uma seção ou um bloco na página inicial ou toque no menu suspenso Página inicial e selecione o modelo que contém a seção ou o bloco que você quer duplicar.
Toque em Seções e, depois, na seção ou no bloco que você quer duplicar.
Toque em … > Duplicar.
Toque em ✓.

Ocultar ou excluir uma seção ou um bloco

Desktop

No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que você quer editar e clique em Personalizar.
Oculte ou exclua uma seção ou um bloco na página inicial ou clique no menu suspenso Página inicial e selecione o modelo que contém a seção ou o bloco que você quer ocultar ou excluir.
Opcional: para ocultar uma seção ou um bloco na loja virtual, passe o mouse sobre o nome desse elemento e clique no ícone de olho.
Opcional: para excluir uma seção ou um bloco na loja virtual, passe o mouse sobre o nome desse elemento e clique no ícone da lixeira.
Clique em Salvar.

iPhone

No app da Shopify, toque no botão ….
Na seção canais de vendas, toque em loja virtual.
Toque em Gerenciar todos os temas.
Encontre o tema que você quer editar e toque em Personalizar.
Oculte ou exclua uma seção ou um bloco na página inicial ou toque no menu suspenso Página inicial e selecione o modelo que contém a seção ou o bloco que você quer ocultar ou excluir.
Toque em Seções e, depois, na seção ou no bloco que você quer ocultar ou excluir.
Opcional: para ocultar uma seção ou um bloco da loja virtual, toque em … > Ocultar.
Opcional: para excluir uma seção ou um bloco da loja virtual, toque em … > Remover.
Toque em Salvar.

Android

No app da Shopify, toque no botão ☰.
Na seção canais de vendas, toque em loja virtual.
Toque em Gerenciar todos os temas.
Encontre o tema que você quer editar e toque em Personalizar.
Oculte ou exclua uma seção ou um bloco na página inicial ou toque no menu suspenso Página inicial e selecione o modelo que contém a seção ou o bloco que você quer ocultar ou excluir.
Toque em Seções e, depois, na seção ou no bloco que você quer ocultar ou excluir.
Opcional: para ocultar uma seção ou um bloco da loja virtual, toque em … > Ocultar.
Opcional: para excluir uma seção ou um bloco da loja virtual, toque em … > Remover.
Toque em ✓.

Trabalhar com blocos

Os blocos são módulos personalizáveis usados para adicionar conteúdo às seções nos modelos e podem ser usados para adicionar texto, imagens, links, botões e outros elementos.

Os temas da Shopify têm seções e blocos personalizáveis. No entanto, algumas seções contam com tipos fixos de bloco, ou seja, só é possível escolher aqueles disponibilizados pelo designer do tema.

Já em outras seções é possível selecionar qualquer bloco, mas há um limite total de blocos que podem ser adicionados à seção. Se a seção atingir o número máximo de blocos disponíveis, a opção Adicionar bloco ficará cinza e não será possível clicar ou tocar nela.

Adicionar um bloco

Desktop

No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que você quer editar e clique em Personalizar.
É possível adicionar um bloco a uma seção na página inicial ou clicar no menu suspenso Página inicial e selecionar o modelo em que você quer incluir um bloco.
Encontre a seção à qual você quer adicionar um bloco, clique em Adicionar bloco e siga uma destas etapas:
- Selecione um bloco na lista.
- Use o campo Pesquisar blocos para encontrar um bloco específico e, em seguida, selecione-o.
Clique em Salvar.

iPhone

No app da Shopify, toque no botão ….
Na seção canais de vendas, toque em loja virtual.
Toque em Gerenciar todos os temas.
Encontre o tema que você quer editar e toque em Personalizar.
É possível adicionar um bloco a uma seção na página inicial ou tocar no menu suspenso Página inicial e selecionar o modelo em que você quer incluir um bloco.
Toque em Seções e depois em Adicionar bloco para a seção à qual você quer adicionar um bloco e siga uma destas seguintes etapas:
- Selecione um bloco na lista.
- Toque no ícone de lupa para pesquisar um bloco específico e, em seguida, selecione-o.
Toque em Salvar.

Android

No app da Shopify, toque no botão ☰.
Na seção canais de vendas, toque em loja virtual.
Toque em Gerenciar todos os temas.
Encontre o tema que você quer editar e toque em Personalizar.
É possível adicionar um bloco a uma seção na página inicial ou tocar no menu suspenso Página inicial e selecionar o modelo em que você quer incluir um bloco.
Toque em Seções e depois em Adicionar bloco para a seção à qual você quer adicionar um bloco e siga uma destas seguintes etapas:
- Selecione um bloco na lista.
- Toque no ícone de lupa para pesquisar um bloco específico e, em seguida, selecione-o.
Toque em ✓.

Usar metacampos e metaobjetos com origens dinâmicas

Use metacampos e metaobjetos para exibir informações dinâmicas em sua loja virtual. Se você tiver um tema compatível com metacampos, poderá conectar um metacampo a uma seção compatível ou às configurações do bloco no editor de temas.

Por exemplo, se você vende velas, talvez queira exibir o tempo de queima de cada vela disponível na loja. Após configurar um metacampo de produto para Tempo de queima na seção Dados personalizados das configurações do admin da Shopify, você pode adicionar um bloco de texto à seção principal do modelo de produto. Nesse bloco, clique no ícone Conectar fonte dinâmica na configuração de texto e selecione o metacampo Tempo de queima. Agora, essas informações serão exibidas em seus produtos.

Caso você use um tema da Shopify, será possível conectar a maioria dos metacampos e metaobjetos por meio do editor de temas. Já se você usa outros temas ou quer adicionar tipos de dados personalizados incompatíveis, edite o código ou contrate um Parceiro da Shopify para ajudar. Saiba mais sobre como contratar um Parceiro da Shopify.

Nem todas as seções ou blocos aceitam fontes dinâmicas. Para saber mais, consulte a documentação do tema.

Para exibir informações dinâmicas na loja virtual, adicione origens dinâmicas, que podem ser usadas em modelos, seções ou blocos que exibem recursos compatíveis, como produtos, coleções, páginas, blogs e posts do blog. Vale lembrar que é necessário adicionar um metacampo antes de conectá-lo aos modelos. Consulte Origens dinâmicas para saber mais sobre o uso de metacampos e metaobjetos com origens dinâmicas no tema.

Após concluir o processo de configuração, siga as etapas abaixo para conectar fontes dinâmicas a seções ou blocos em seu tema, usando o botão Conectar fonte dinâmica:

Etapas:

Desktop

No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que você quer editar e clique em Personalizar.
Edite uma seção ou um bloco na página inicial ou clique no menu suspenso Página inicial e selecione o modelo que contém a seção ou o bloco que você quer editar.
Na barra lateral, clique no nome de uma seção ou um bloco para carregar o conteúdo na janela de pré-visualização e acessar as configurações e opções disponíveis para edição.
Clique no botão Conectar origem dinâmica do tipo de conteúdo relevante que você quer editar e conecte sua origem dinâmica.
Clique em Salvar.

iPhone

No app da Shopify, toque no botão ….
Na seção canais de vendas, toque em loja virtual.
Toque em Gerenciar todos os temas.
Encontre o tema que você quer editar e toque em Personalizar.
Edite uma seção ou um bloco na página inicial ou toque no menu suspenso Página inicial e selecione o modelo que contém a seção ou o bloco que você quer editar.
Toque em Seções e depois toque no nome de uma seção ou um bloco para carregar o conteúdo na janela de pré-visualização e acessar as configurações e opções disponíveis para edição.
Toque no botão Conectar origem dinâmica do tipo de conteúdo relevante que você quer editar e conecte sua origem dinâmica.
Toque em Salvar.

Android

No app da Shopify, toque no botão ☰.
Na seção canais de vendas, toque em loja virtual.
Toque em Gerenciar todos os temas.
Encontre o tema que você quer editar e toque em Personalizar.
Edite uma seção ou um bloco na página inicial ou toque no menu suspenso Página inicial e selecione o modelo que contém a seção ou o bloco que você quer editar.
Toque em Seções e depois toque no nome de uma seção ou um bloco para carregar o conteúdo na janela de pré-visualização e acessar as configurações e opções disponíveis para edição.
Toque no botão Conectar origem dinâmica do tipo de conteúdo relevante que você quer editar e conecte sua origem dinâmica.
Toque em ✓.

Saiba mais sobre a exibição de metacampos e metaobjetos em sua loja virtual.

Seletor de origem dinâmica

Use o seletor de origem dinâmica para conectar a fonte dinâmica correta diretamente no editor de temas. Confira estes recursos principais do seletor:

É possível fazer referência a origens dinâmicas de vários recursos, quando necessário. Por exemplo, se você quiser conectar uma configuração a um bloco conectado a um recurso de produto e a um recurso de página, poderá usar o menu suspenso no seletor para especificar se quer pesquisar metacampos associados a um dos recursos.
O seletor de origem dinâmico tem uma funcionalidade de pesquisa e filtro para ajudar você a encontrar o metacampo necessário.
O seletor de origem dinâmica permite escolher metacampos de categoria, que são atributos adicionais disponibilizados quando você atribui uma categoria a um produto. Acesse esses metacampos para conectar origens dinâmicas a campos relevantes no metaobjeto subjacente.