Seções e blocos

É possível usar seções no tema para criar o layout desejado para a loja virtual. As seções são compostas por 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 oferecem flexibilidade na organização do conteúdo e permitem controlar o estilo e a aparência da sua loja virtual sem a necessidade de editar o código, incluindo as seguintes opções de personalização:

• É possível reorganizar seções nos modelos e reorganizar blocos dentro das seções.
• As seções e os 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 na loja virtual a partir de dados personalizados, como adicionar instruções de cuidados para os produtos. Saiba mais sobre como conectar fontes dinâmicas.

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

Limites máximos de seções e blocos

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

• Cada modelo pode ter até 25 seções.
• Cada modelo pode ter até 1.250 blocos em todas as seções. 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 da seção e do bloco e são especificados pelo designer do tema. Por exemplo, se o tema tiver uma seção de Assinatura da newsletter, talvez você só possa adicionar um bloco de Formulário de e-mail.
• Blocos compatíveis com aninhamento podem ter até oito níveis de blocos aninhados.

Fontes de blocos

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

• Blocos de apps são blocos que adicionam funcionalidades ao tema. É possível usar um bloco de app para reposicionar na página do tema as áreas adicionadas pelos apps instalados.
• Blocos de seção são blocos definidos em uma seção específica.
• Blocos de temas são blocos definidos no tema que 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. Uma única seção pode aceitar blocos de tema ou blocos de seção, mas não uma mistura de ambos.

A disponibilidade de blocos de apps nas seções depende da funcionalidade do app e da compatibilidade da seção com esse tipo de bloco.

Blocos de seção

Blocos de seção são blocos criados para uma seção específica. Uma seção pode ter limites para os tipos de blocos de seção e limitar o número de um 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 Assinatura da newsletter. É possível usar essa seção para adicionar um formulário de assinatura da newsletter para que os clientes possam assinar sua newsletter. Depois de adicionar a seção Assinatura da newsletter, você pode adicionar um de cada um dos seguintes blocos:

• um bloco de Formulário de e-mail
• um bloco de Título
• um bloco de Subtítulo

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

Se você tiver adicionado todos os três blocos disponíveis para a seção Assinatura da newsletter, o seletor de bloco exibirá uma mensagem informando que todos os blocos disponíveis foram usados.

Blocos de temas

Blocos de temas são blocos definidos no tema que podem ter funcionalidades dinâmicas, como aninhamento. As seções que aceitam blocos de temas podem aceitar uma variedade de blocos diferentes, dependendo da estrutura da seção. Uma seção que aceita blocos de temas pode aceitar todos os blocos de temas disponíveis, um subconjunto específico de blocos ou blocos exclusivos para essa seção. Os blocos de temas também podem ter os seguintes comportamentos:

• Alguns blocos são compatíveis com aninhamento, para que você possa aninhar blocos dentro de outros blocos em até oito níveis.
• Algumas seções têm blocos obrigatórios. É possível personalizar ou ocultar esses blocos, mas não é possível reordená-los nem excluí-los.
• Alguns blocos são exibidos automaticamente em uma seção quando determinadas condições são atendidas.

Exemplo de uma seção com blocos de temas

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

Na seção de apresentação de slides do tema, quando você clica em Adicionar bloco, é possível selecionar um bloco de Slide no seletor de bloco. Nenhum outro tipo de bloco está disponível. Se você tentar adicionar um bloco de Slide a outra seção do tema, como uma seção de Banner de imagem, o bloco Slide não estará disponível. Este é um exemplo de um bloco restrito.

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

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

Compatibilidade de blocos de tema

Para acessar os blocos de tema, o tema precisa ter seções compatíveis com eles. Verifique se o tema é compatível com blocos de tema no código dele. Se houver um diretório blocks na barra lateral do editor do Liquid, você está usando um tema compatível com blocos de tema. Você também pode consultar a documentação do tema.

Etapas:

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

2. Ao lado do tema que você quer verificar, clique no botão e, depois, em Editar código.

3. Na barra lateral, procure a pasta “blocks”.

   

Personalizar modelos de tema com seções e blocos

Ao abrir o editor de temas, a página inicial da sua loja é carregada por padrão. Use o menu suspenso para selecionar um modelo diferente, como produtos, coleções, páginas ou blogs, ou use a barra de pesquisa no menu suspenso de modelos para pesquisar um modelo específico. Ao selecionar um modelo, ele é carregado no editor de temas, e as alterações feitas são pré-visualizadas no editor.

Adicionar uma seção

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

Etapas:

Editar uma seção

Reorganizar uma seção ou um bloco

É possível alterar a ordem das seções nos modelos de página e reorganizar os blocos nessas seções. Além disso, é possível mover blocos compatíveis entre seções diferentes. Por exemplo, se a página inicial tiver duas seções de Apresentação de slides, será possível arrastar um bloco de Slide de uma apresentação de slides para a outra.

Não é possível mover um bloco para outra seção se o tipo de bloco for incompatível ou se a seção já tiver atingido o limite máximo de blocos. Se você tentar mover uma seção ou um bloco para um local inválido, o item retornará à posição original.

Você também pode usar o inspetor de pré-visualização para reorganizar as seções. Saiba mais sobre o uso do inspetor de pré-visualização no editor de temas.

Etapas:

Duplicar uma seção ou um bloco

É possível duplicar uma seção ou um bloco para criar uma cópia idêntica.

Depois de duplicar um bloco, o novo bloco é adicionado à mesma seção. Se você quiser mover o bloco para uma nova seção ou alterar a ordem, reorganize-o. Outra opção é copiar um bloco e colá-lo diretamente em outra seção.

Copiar e colar blocos

Se você quiser usar o mesmo bloco em várias seções, basta copiá-lo e colá-lo em outra seção. Também é possível copiar e colar um bloco na mesma seção ou, se preferir, duplicar o bloco. Um bloco duplicado manterá todas as configurações e o conteúdo do bloco original.

Etapas:

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

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

3. Para copiar e colar um bloco na página inicial, selecione-o diretamente ou use o menu suspenso Página inicial para escolher o modelo específico que contém a seção ou o bloco que você quer editar.

4. Clique com o botão direito do mouse no bloco que você quer duplicar e clique em Copiar.

5. Na mesma seção ou em uma seção diferente, clique com o botão direito do mouse na seção e, em seguida, clique em Colar.

6. Clique em Salvar.

Ocultar ou excluir uma seção ou um bloco

Renomear uma seção ou um bloco

Por padrão, o título de uma seção ou um bloco no menu da barra lateral do editor de temas e nas informações das configurações é definido como o tipo do bloco ou da seção, como “Coleção” ou “Texto”.

No caso dos blocos, se as configurações contiverem um campo de texto (como um cabeçalho ou uma descrição), esse texto também será anexado ao título no menu da barra lateral. Se houver mais de um campo de texto, o primeiro campo com conteúdo será anexado. Quando você altera o texto no campo, o título do bloco muda para incluir o texto atualizado. O nome de uma seção ou de um bloco não pode ficar em branco.

Por exemplo, digamos que você adicione uma seção Multicoluna ao modelo da página com blocos de Coluna. O bloco de coluna inclui uma configuração de Cabeçalho com o texto-padrão Coluna e uma de Descrição com o texto-padrão Combine texto e imagem para dar destaque a um produto, uma coleção ou um post do blog de sua escolha. O título-padrão da seção é Multicoluna, e o do bloco de Coluna é Coluna - Coluna. Se você remover o texto da seção Cabeçalho, o título do bloco será atualizado para Coluna - Combine texto e imagem p....

É possível renomear qualquer seção ou bloco com um nome personalizado nas configurações da seção ou do bloco, que ficam no menu da barra lateral do editor de temas.

Etapas:

Trabalhar com blocos

Blocos são módulos personalizáveis usados para adicionar conteúdo às seções dos modelos. Com eles, é possível adicionar textos, imagens, links, botões e muito mais.

Os temas da Shopify têm seções e blocos que você pode personalizar. Algumas seções têm tipos de bloco fixos, o que significa que só é possível escolher entre os blocos disponibilizados para essa seção pelo designer do tema.

Outras seções permitem selecionar qualquer bloco, mas há um limite para o número total de blocos que podem ser adicionados. Se uma seção atingir o número máximo de blocos disponíveis, a opção Adicionar bloco ficará esmaecida, e não será possível clicar nem tocar nela.

É possível usar a pesquisa para encontrar um bloco específico por nome ou selecionar um no menu suspenso do seletor de bloco. Os blocos do tema podem ser organizados em categorias no seletor de bloco, como Coleção para blocos com um seletor de coleção ou Mídia para blocos de imagem e vídeo.

Uma prévia do bloco é exibida no seletor de bloco para que você possa conferir a aparência dele antes de adicioná-lo.

Adicionar um bloco

Uso de metacampos e metaobjetos com origens dinâmicas

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

Por exemplo, caso venda velas, você talvez queira exibir o tempo de queima de cada uma delas na loja. Depois de configurar um metacampo de produto para Tempo de queima na seção Dados personalizados das configurações do admin da Shopify, é possível adicionar um bloco de texto à seção principal do modelo de produto. No bloco de texto, clique no botão na configuração de texto e selecione o metacampo Tempo de queima. As informações sobre o tempo de queima passarão a ser exibidas nos seus produtos.

Se você tiver um tema da Shopify, poderá conectar a maioria dos metacampos e metaobjetos a ele usando o editor de temas. Caso use outros temas ou queira adicionar tipos de dados personalizados incompatíveis com o seu, será possível editar o código do tema ou contratar um Parceiro da Shopify para ajudar. Saiba mais sobre como contratar um Parceiro da Shopify.

Nem todas as seções ou blocos são compatíveis com origens dinâmicas. Verifique a versão da arquitetura do tema e as opções de personalização disponíveis no editor de temas para determinar se o tema é compatível com origens dinâmicas.

É possível exibir informações dinâmicas na loja virtual adicionando seções ou blocos que podem usar origens dinâmicas. As origens dinâmicas podem ser usadas em qualquer modelo, seção ou bloco que exiba recursos compatíveis (produto, coleção, página, blog e post do blog). É preciso adicionar o metacampo antes de conectá-lo nos modelos. Consulte Origens dinâmicas para saber mais sobre o uso de metacampos e metaobjetos com origens dinâmicas no tema.

Depois de concluir o processo de configuração, siga as etapas abaixo para conectar origens dinâmicas a seções ou blocos no tema usando o botão .

Etapas:

Saiba mais sobre como exibir metacampos na loja virtual e como exibir metaobjetos na loja virtual.

Seletor de origem dinâmica

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

• É possível referenciar origens dinâmicas de vários recursos, quando aplicável. Por exemplo, se você conectar uma configuração a um bloco que esteja conectado a um recurso de produto e a um recurso de página, poderá usar o menu suspenso no seletor de origem dinâmica para especificar se quer pesquisar metacampos associados ao recurso de produto ou ao de página.
• O seletor de origem dinâmica tem uma funcionalidade de pesquisa e filtro para ajudar você a encontrar o metacampo de que precisa.
• O seletor de origem dinâmica permite escolher metacampos de categoria. São características adicionais que ficam disponíveis quando você atribui uma categoria de produto a um produto. O acesso a esses metacampos permite conectar origens dinâmicas a quaisquer campos relevantes no metaobjeto de característica subjacente.