Olá, pessoal! 👋 Sejam muito bem-vindos à nossa Aula 26 do curso “Loja Shopify do Zero ao Avançado”! É um prazer tê-los novamente aqui.

Nas últimas aulas, construímos uma base sólida do Shopify, exploramos a estrutura de temas, mergulhamos no Liquid e começamos a personalizar nossas lojas. Hoje, vamos levar essa personalização a um novo nível, explorando o poder das Seções personalizadas e dos blocos dinâmicos avançados. Preparem-se para criar layouts incrivelmente flexíveis e controláveis diretamente do editor de temas!

—

Aula 26 – Loja Shopify do Zero ao Avançado: Seções personalizadas e blocos dinâmicos avançados

📚 O que você vai aprender nesta aula

Nesta aula crucial, vamos desvendar os segredos para criar seções de tema que não são apenas personalizáveis, mas também dinâmicas e modulares. Ao final desta aula, você será capaz de:

• Revisitar e aprofundar o conceito de seções de tema e sua importância para a flexibilidade do design.
• Compreender a estrutura completa de uma seção com a tag {% schema %}.
• Criar configurações avançadas (settings) para a seção como um todo.
• Dominar a criação e configuração de blocos dinâmicos dentro de uma seção.
• Adicionar diferentes tipos de blocos (imagens, texto, produtos, coleções, etc.) e personalizar suas configurações individuais.
• Utilizar os presets para oferecer configurações iniciais prontas para suas seções.
• Aplicar boas práticas para desenvolver seções e blocos limpos, eficientes e de fácil manutenção.
• Renderizar conteúdo de blocos dinamicamente usando Liquid.

🔗 Conectando com aulas anteriores

Lembram-se de quando falamos sobre a estrutura de um tema Shopify na Aula 12? Abordamos os diretórios layout, templates, sections e snippets. Naquela ocasião, mencionamos que o diretório sections guarda arquivos Liquid que representam partes reutilizáveis e configuráveis da sua loja. Também exploramos as settings_schema.json para configurações globais do tema na Aula 22.

Hoje, vamos revisitar as seções, mas com um olhar muito mais aprofundado. Até agora, talvez você tenha lidado com seções mais simples, com algumas configurações básicas. Agora, vamos entender como criar seções que permitem ao lojista adicionar, remover e reordenar componentes internos de forma dinâmica, como uma galeria de imagens, uma lista de depoimentos ou uma seção de perguntas frequentes, tudo isso dentro de uma única seção. É a evolução da personalização que vimos com as settings_schema.json, mas agora específica para cada seção e seus blocos internos.

Seus conhecimentos de HTML, CSS e um pouco de JavaScript (que abordamos brevemente na Aula 24 e Aula 25) serão essenciais para estilizar e dar interatividade às seções que vamos criar. E, claro, o Liquid será nosso principal motor para renderizar todo esse conteúdo dinâmico.

📖 Conteúdo Principal

As seções são, sem dúvida, um dos recursos mais poderosos do Shopify para criar temas flexíveis. Elas permitem que você divida o layout da sua loja em componentes independentes, que podem ser arrastados, soltos, adicionados, removidos e configurados diretamente pelo editor de temas.

🧩 Anatomia de uma Seção Avançada: A Tag {% schema %}

Uma seção é composta por um arquivo Liquid (por exemplo, sections/minha-secao-personalizada.liquid). O que a torna “avançada” e configurável é a tag {% schema %}. Esta tag deve ser colocada no final do seu arquivo Liquid e contém um objeto JSON que define todas as opções de personalização da seção para o editor de temas.

Vamos detalhar os principais atributos dentro do {% schema %}:

1. name (String, obrigatório):

• O nome que aparecerá no editor de temas (ex: “Minha Seção de Destaque”).

2. settings (Array de Objetos, opcional):

Define as configurações da própria seção*. São campos de entrada (textos, cores, imagens, seletores) que o lojista pode ajustar.

• Cada objeto em settings tem as mesmas propriedades que vimos em settings_schema.json (como id, type, label, default, etc.).
• Exemplo: Um título geral para a seção, uma cor de fundo, um espaçamento.

3. blocks (Array de Objetos, opcional):

A estrela da aula! Este array define os tipos de blocos* que o lojista pode adicionar repetidamente dentro desta seção. Pense neles como “mini-seções” dentro da sua seção principal.

• Cada objeto dentro de blocks representa um tipo de bloco e possui suas próprias propriedades:
• type (String, obrigatório): Um identificador único interno para o tipo de bloco (ex: 'text_block', 'image_gallery_item', 'testimonial').
• name (String, obrigatório): O nome que aparecerá no editor de temas quando o lojista for adicionar um novo bloco (ex: “Item de Texto”, “Imagem da Galeria”, “Depoimento”).

limit (Integer, opcional): O número máximo de blocos deste tipo específico* que podem ser adicionados.

settings (Array de Objetos, opcional): Assim como nas settings da seção, este array define os campos de entrada para este tipo de bloco específico*.

• Exemplo: Para um bloco de “Depoimento”, você teria campos para a imagem do autor, o texto do depoimento e o nome do autor.

4. presets (Array de Objetos, opcional):

• Define configurações predefinidas para a seção. Quando um lojista adiciona uma nova seção ao template, ele pode escolher um preset que já vem com alguns blocos e configurações iniciais.
• Cada preset tem:
• name (String, obrigatório): Nome do preset (ex: “Galeria Padrão”).
• settings (Objeto, opcional): Configurações iniciais para a seção.
• blocks (Array de Objetos, opcional): Configurações iniciais para os blocos da seção. Cada objeto de bloco aqui precisa de um type e settings iniciais.

5. max_blocks (Integer, opcional):

O número máximo total* de blocos (de qualquer tipo) que podem ser adicionados à seção.

6. default (Objeto, opcional):

• Similar a um preset, mas é a configuração padrão da seção se nenhum preset for escolhido ou se ela for adicionada sem especificação.

7. locales (Objeto, opcional):

• Permite a tradução dos nomes e rótulos do schema para diferentes idiomas.

8. wrapper (String, opcional):

• A tag HTML que será usada para envolver a seção no editor de temas.

9. class (String, opcional):

Uma classe CSS a ser aplicada ao elemento wrapper* da seção no editor.

10. stylesheet (String, opcional):

• Caminho para um arquivo CSS específico para esta seção.

11. javascript (String, opcional):

• Caminho para um arquivo JavaScript específico para esta seção.

🔄 Trabalhando com Blocos Dinâmicos no Liquid

Depois de definir seus blocos no {% schema %}, você precisa renderizá-los no seu arquivo Liquid da seção. O Shopify expõe uma variável chamada section.blocks que é um array de todos os blocos que o lojista adicionou. Você pode iterar sobre eles e acessar suas configurações.

{% if section.settings.title != blank %}
{{ section.settings.title }}
{% endif %}

{% for block in section.blocks %}
{% case block.type %}
{% when 'testimonial' %}

{% if block.settings.image != blank %}

{% endif %}
{{ block.settings.text }}
{{ block.settings.author }}

{% when 'image_with_text' %}

{% if block.settings.image != blank %}

{% endif %}
{{ block.settings.heading }}
{{ block.settings.description }}


{% else %}

{% endcase %}
{% endfor %}

No exemplo acima:

• section.settings.title acessa uma configuração da seção principal.
• section.blocks itera sobre cada bloco adicionado.
• block.type é usado com {% case %} para renderizar diferentes layouts dependendo do tipo de bloco.

block.settings.image, block.settings.text, block.settings.author acessam as configurações desse bloco específico*.

• {{ block.shopify_attributes }} é muito importante! Ele injeta atributos HTML necessários para que o editor de temas do Shopify possa reconhecer, selecionar e manipular o bloco corretamente (arrastar, soltar, excluir). Nunca se esqueça disso!

💡 Dicas de Boas Práticas e Otimização

• Modularização: Pense em cada bloco como um pequeno componente. Se um bloco se tornar muito complexo, considere movê-lo para um snippet e incluí-lo dentro do {% case %} do bloco.
• Nomes Descritivos: Use nomes claros para suas seções, blocos e configurações. Isso facilita a vida do lojista (e a sua!) no futuro.
• Valores Padrão (default): Sempre que possível, defina valores padrão para as configurações. Isso evita que a seção apareça vazia ou com erros quando é adicionada pela primeira vez.
• CSS e JS Separados: Para seções complexas, use os atributos stylesheet e javascript no schema para carregar arquivos CSS e JS específicos da seção. Isso ajuda a manter o código organizado e a otimizar o carregamento (só carrega o que é necessário).
• Responsividade: Sempre projete suas seções e blocos pensando em dispositivos móveis primeiro.
• Acessibilidade: Garanta que seus campos de entrada no schema tenham rótulos (label) claros e que as imagens tenham alt text configuráveis.

—

💻 Exemplos Práticos

Vamos colocar a mão na massa e criar uma seção de “Depoimentos de Clientes” que permite ao lojista adicionar múltiplos depoimentos, cada um com sua própria imagem, texto e autor.

Exemplo: Seção de “Depoimentos” com Blocos Dinâmicos

Nosso objetivo: Criar uma seção onde o lojista pode adicionar quantos depoimentos quiser, cada um com uma imagem do cliente, o texto do depoimento e o nome do cliente.

1. Crie o arquivo da seção:

No seu tema, dentro da pasta sections, crie um novo arquivo chamado testimonial-section.liquid.

2. Adicione o código Liquid e o Schema:

{% comment %}
sections/testimonial-section.liquid
Seção de depoimentos de clientes com blocos dinâmicos.
{% endcomment %}


{% if section.settings.heading != blank %}
{{ section.settings.heading }}
{% endif %}
{% if section.settings.subheading != blank %}
{{ section.settings.subheading }}

{% endif %}
{% if section.blocks.size > 0 %}

{% for block in section.blocks %}
{% case block.type %}
{% when 'testimonial_item' %}

{% if block.settings.author_image != blank %}


src="{{ block.settings.author_image | img_url: '100x100', crop: 'center' }}"
alt="{{ block.settings.author_name }}"
loading="lazy"
width="100"
height="100"
class="testimonial-item__image"
>

{% endif %}
{{ block.settings.testimonial_text }}
{{ block.settings.author_name }}
{% if block.settings.author_title != blank %}
{{ block.settings.author_title }}
{% endif %}

{% endcase %}
{% endfor %}

{% else %}

Nenhum depoimento adicionado ainda. Adicione um na barra lateral do editor de temas!


{% endif %}


{% schema %}
{
"name": "Depoimentos de Clientes",
"tag": "section",
"class": "shopify-section--testimonials",
"settings": [
{
"type": "text",
"id": "heading",
"default": "O que nossos clientes dizem",
"label": "Título da Seção"
},
{
"type": "richtext",
"id": "subheading",
"default": "
Ouça as histórias de sucesso e veja como ajudamos!
",

"label": "Subtítulo da Seção"
},
{
"type": "color",
"id": "background_color",
"default": "#f8f8f8",
"label": "Cor de Fundo"
},
{
"type": "range",
"id": "testimonials_per_row",
"min": 1,
"max": 4,
"step": 1,
"default": 3,
"label": "Depoimentos por linha"
}
],
"blocks": [
{
"type": "testimonial_item",
"name": "Depoimento",
"settings": [
{
"type": "image_picker",
"id": "author_image",
"label": "Imagem do Autor"
},
{
"type": "textarea",
"id": "testimonial_text",
"label": "Texto do Depoimento",
"default": "Este é um depoimento fantástico sobre a experiência com a loja!"
},
{
"type": "text",
"id": "author_name",
"label": "Nome do Autor",
"default": "Nome do Cliente"
},
{
"type": "text",
"id": "author_title",
"label": "Título do Autor (Opcional)",
"default": "CEO da Empresa X"
}
]
}
],
"presets": [
{
"name": "Depoimentos (Padrão)",
"settings": {
"heading": "Clientes Satisfeitos",
"subheading": "
Veja o que nossos clientes amam em nós.
",

"background_color": "#eef8ff"
},
"blocks": [
{
"type": "testimonial_item",
"settings": {
"testimonial_text": "Experiência incrível! Superou minhas expectativas.",
"author_name": "Maria Silva",
"author_title": "Empreendedora"
}
},
{
"type": "testimonial_item",
"settings": {
"testimonial_text": "Produtos de alta qualidade e entrega rápida. Recomendo!",
"author_name": "João Souza",
"author_title": "Designer"
}
}
]
}
]
}
{% endschema %}

3. Adicione um pouco de CSS (opcional, mas recomendado):

Para dar um visual básico à sua seção, você pode adicionar este CSS ao seu arquivo theme.css ou a um arquivo CSS específico que você vincule no schema (como assets/section-testimonials.css e depois stylesheet: "section-testimonials.css" no schema).

css

/ assets/theme.css ou assets/section-testimonials.css /
.section-testimonials {
padding: 60px 0;
background-color: var(--color-background-secondary); / Exemplo usando uma variável CSS /
text-align: center;
}
.section-testimonials__heading {
font-size: 2.5em;
margin-bottom: 15px;
color: var(--color-heading);
}
.section-testimonials__subheading {
font-size: 1.1em;
color: var(--color-text-light);
max-width: 700px;
margin: 0 auto 40px;
line-height: 1.6;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 40px;
}
.testimonial-item {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.testimonial-item__image-wrapper {
margin-bottom: 20px;
border: 3px solid var(--color-primary); / Exemplo: cor de destaque /
border-radius: 50%;
overflow: hidden;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.testimonial-item__image {
width: 90px;
height: 90px;
object-fit: cover;
border-radius: 50%;
}
.testimonial-item__text {
font-size: 1.1em;
line-height: 1.7;
margin-bottom: 20px;
color: var(--color-text);
font-style: italic;
}
.testimonial-item__author {
font-weight: bold;
color: var(--color-heading);
margin-top: auto; / Empurra o nome para o final se houver espaço /
}
.testimonial-item__title {
font-size: 0.9em;
color: var(--color-text-light);
display: block;
margin-top: 5px;
}
.placeholder-content {
padding: 50px;
border: 1px dashed #ccc;
border-radius: 8px;
color: #666;
font-style: italic;
text-align: center;
}
/ Estilo para a cor de fundo da seção /
.shopify-section--testimonials[data-background-color] {
background-color: var(--section-bg-color);
}

Dica Importante para o CSS: Para que a cor de fundo definida nas settings da seção funcione, você precisa injetar essa cor como uma variável CSS inline na seção Liquid. Modifique a tag section assim:

E no CSS, ajuste para:

css

.section-testimonials {
background-color: var(--section-bg-color); / Usando a variável inline /
/ ... outros estilos ... /
}

Isso permite que a cor de fundo seja dinâmica e controlada pelo editor.

4. Adicione a seção a um template:

Vá para templates/index.liquid (ou qualquer outro template onde você queira a seção) e adicione:

{% section 'testimonial-section' %}

Ou, para uma abordagem mais flexível (se você quiser que o lojista possa adicionar e mover a seção no editor), adicione um {% schema %} ao seu index.liquid (ou page.liquid, etc.) e coloque um tipo de seção lá. Veremos isso melhor em aulas futuras sobre template JSON, mas por enquanto, adicionar diretamente já funcionará para o teste.

5. Visualize e personalize no editor:

Abra o editor de temas (/admin/themes/current/editor). Você deverá ver sua nova seção “Depoimentos de Clientes”.

• Screenshot 1 (Mental): Mostrar o editor de temas com a seção “Depoimentos de Clientes” listada na barra lateral.
• Clique na seção. Você verá os campos de “Título da Seção”, “Subtítulo” e “Cor de Fundo”.
• Role para baixo e clique em “Adicionar bloco”. Você verá a opção “Depoimento”.
• Screenshot 2 (Mental): Mostrar a opção “Adicionar bloco” e a escolha de “Depoimento”.
• Adicione alguns blocos de “Depoimento”. Para cada um, você poderá carregar uma imagem, digitar o texto, o nome do autor e o título.
• Screenshot 3 (Mental): Mostrar as configurações de um bloco de depoimento, com campos para imagem, texto e nome.
• Arraste e solte os blocos para reordená-los. Exclua-os se quiser.
• Screenshot 4 (Mental): Mostrar a seção renderizada no frontend, com os depoimentos exibidos.

Este é um exemplo clássico de como seções com blocos dinâmicos oferecem flexibilidade incrível!

—

🎯 Exercícios e Desafios

Hora de praticar e solidificar esse conhecimento!

Desafio 1: Seção de “FAQ” Dinâmica (Perguntas Frequentes)

Crie uma nova seção chamada faq-section.liquid. Esta seção deve permitir que o lojista adicione múltiplos “itens de FAQ”, onde cada item é um bloco com:

• Um campo de texto para a Pergunta.
• Um campo de richtext (HTML) para a Resposta.

No Liquid da seção, você deve iterar sobre esses blocos. Para a exibição, tente usar as tags HTML