Seções e blocos

Os temas criados para a Online Store 2.0 usam seções para gerar o layout ideal. A maioria das seções é composta de blocos que servem a uma função específica, como cabeçalhos, textos, imagens individuais, uma colagem de imagens ou links. O uso de seções e blocos nos modelos proporciona mais flexibilidade para organizar o conteúdo, o que permite controlar a aparência da loja virtual sem editar o código.

Cada seção tem uma variedade específica de blocos que podem ser adicionados, e as seções e os blocos disponíveis dependem do tema. Para saber mais sobre quais opções estão disponíveis, consulte a documentação do tema.

Algumas seções têm um número-limite de blocos que você pode adicionar ou definem o número de blocos de um determinado tipo. Por exemplo, a seção Imagem com texto só pode exibir os blocos especificados pelo designer do tema. No Dawn, o tema gratuito da Shopify, só é possível adicionar um de cada um dos seguintes blocos:

  • Um título
  • Um parágrafo
  • Um botão

Também é possível personalizar a seção, basta editar as Configurações para incluir uma imagem e escolher o alinhamento, o tamanho, a cor do plano de fundo e o que será carregado primeiro quando os clientes visitarem a loja virtual.

Caso as seções adicionadas ao layout da loja não incluam as configurações ou as opções de que você precisa, edite o código do tema ou entre em contato com o desenvolvedor do tema para receber ajuda.

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 ou pesquisar um tipo específico de página. O modelo escolhido é carregado no editor de temas e todas as alterações feitas são pré-visualizadas na ferramenta em tempo real.

Adicionar uma seção

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

Etapas:

  1. Selecione um modelo no menu suspenso. 4. Clique em + Adicionar seção e selecione uma nova seção na lista. 5. Clique na nova seção para editar os blocos. 6. Opcional: clique e arraste o ícone ⋮⋮ ao lado de uma seção para reorganizar as seções na página. 7. Clique em Salvar.

Editar uma seção

  1. No menu suspenso, selecione o modelo com a seção que você quer editar. 4. Clique em uma seção para carregar o conteúdo na janela de pré-visualização e acessar as opções disponíveis. 5. Opcional: clique em cada bloco para editá-lo dentro da seção. 6. Clique em Salvar.

Remover uma seção ou um bloco

  1. No menu suspenso, selecione o modelo com a seção que você quer editar. 4. Clique em uma seção para carregar o conteúdo na janela de pré-visualização e acessar as opções disponíveis. 5. Clique no ícone de olho para ocultar ou mostrar uma seção ou um bloco. 6. Clique em Remover para excluir um bloco ou uma seção.

Algumas seções têm tipos e limites de blocos fixos. Se houver um limite para uma seção ou um bloco específico, a interface informa que você usou X de X blocos disponíveis. Caso você tenha usado o número máximo de blocos, não será possível adicionar outros blocos até a exclusão de um já existente.

Trabalhar com blocos

Os blocos são módulos personalizáveis que formam as seções nos modelos de página e podem ser usados para adicionar texto, imagens, links, botões e muito mais.

Os temas da Online Store 2.0 têm seções e blocos personalizáveis. Algumas seções contam com tipos fixos de bloco, ou seja, só é possível escolher aqueles disponibilizados pelo designer do tema. Já em outras você pode selecionar qualquer bloco, mas há um limite total que pode ser adicionado à seção. Uma mensagem é exibida quando esse número máximo é atingido, e a opção + Adicionar bloco fica esmaecida até um bloco ser removido.

Adicionar um bloco

  1. No menu suspenso, selecione o modelo com a seção que você quer editar. 4. Clique em uma seção para carregar o conteúdo na janela de pré-visualização e acessar as opções disponíveis. 5. Clique em + Adicionar bloco e configure as opções disponíveis. 6. Clique em Salvar.

Usar metacampos e fontes dinâmicas

Com os metacampos, é possível exibir informações dinâmicas na loja virtual. Se você tiver um tema compatível com metacampos, poderá conectá-los a uma seção ou um bloco no editor de temas.

Por exemplo, um vendedor de velas pode querer mostrar o tempo de queima de cada tipo de vela disponível. Após configurar um metacampo para essa informação, o vendedor pode adicionar um bloco ao modelo do produto e conectá-lo ao metacampo em questão.

Para exibir informações dinâmicas na loja virtual, adicione fontes dinâmicas, que podem ser usadas em seções ou blocos no modelo do produto. Em modelos que não são de produtos, use as fontes dinâmicas em seções ou blocos que mostram produtos. Vale lembrar que é necessário adicionar um metacampo antes de conectá-lo aos modelos. Consulte Fontes dinâmicas para saber mais sobre como usar metacampos e fontes dinâmicas no tema.

Após concluir o processo de configuração, siga estas etapas para inserir a fonte dinâmica no modelo:

  1. No menu suspenso, selecione o modelo com a seção que você quer editar. 4. Clique em uma seção para carregar o conteúdo na janela de pré-visualização e acessar as opções disponíveis ou clique em + Adicionar seção. 5. Clique em + Adicionar bloco e conecte a uma fonte dinâmica: * Se o ícone de conexão com a fonte dinâmica for exibido, clique para selecionar um único metacampo:
    Conectar fonte dinâmica
    * Se o ícone de conexão com a fonte dinâmica mostrar um sinal +, clique para selecionar até 20 metacampos e adicionar um de cada vez:
    Inserir ícone de fonte dinâmica
    6. Clique em Salvar.

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

Experimente de graça