Olá, meus futuros mestres do Shopify! 👋 Que bom ter vocês de volta para mais uma etapa crucial na nossa jornada de desenvolvimento. Até agora, exploramos a estrutura de um tema, aprendemos a navegar pelo editor de temas, e até mesmo a fazer algumas personalizações com HTML e CSS. Mas, o que faz um tema Shopify realmente “vivo”, exibindo informações dos seus produtos, clientes e configurações da loja?

É exatamente isso que vamos descobrir hoje! Preparem-se para conhecer o coração pulsante de cada loja Shopify: Liquid. 💖

—

Aula 29 – Loja Shopify do Zero ao Avançado: Introdução ao Liquid – A linguagem que move o Shopify

📚 O que você vai aprender nesta aula

Nesta aula, vamos desvendar os mistérios do Liquid e entender como ele funciona no ecossistema Shopify. Ao final, você será capaz de:

• Compreender o que é Liquid e por que ele é fundamental para o desenvolvimento de temas Shopify.
• Identificar e utilizar os três pilares do Liquid: Objetos, Tags e Filtros.
• Acessar e exibir dados dinâmicos da sua loja (produtos, coleções, clientes, configurações da loja) usando Liquid.
• Aplicar lógica de controle de fluxo (condicionais e loops) para criar layouts dinâmicos e adaptativos.
• Formatar e manipular dados usando os filtros do Liquid.
• Entender onde o código Liquid vive dentro da estrutura de um tema Shopify.
• Aplicar boas práticas ao trabalhar com Liquid para um código limpo e eficiente.

🔗 Conectando com aulas anteriores

Nas Aulas 27 e 28, mergulhamos na Estrutura de um Tema Shopify e exploramos o Editor de Temas, respectivamente. Vimos que um tema é composto por arquivos HTML (que chamamos de .liquid), CSS e JavaScript. Também observamos que o conteúdo da sua loja (como títulos de produtos, preços, descrições) aparece magicamente nas páginas.

Até agora, nossa personalização se concentrou em modificar o “esqueleto” (HTML) e a “pele” (CSS) do tema. No entanto, o que torna cada página única, exibindo o produto certo com o preço correto, ou a coleção desejada, não é HTML estático, mas sim dados dinâmicos.

É aqui que o Liquid entra em cena! Ele é a ponte entre os dados armazenados no back-end do Shopify (seus produtos, pedidos, clientes, etc.) e o HTML que é renderizado no navegador do seu cliente. Pense nisso: HTML é a carcaça, CSS é o estilo, JavaScript é a interatividade, e Liquid é o cérebro que puxa e organiza as informações para que tudo faça sentido e seja dinâmico. Sem ele, sua loja seria apenas um conjunto de páginas estáticas e sem vida. 🌉

📖 Conteúdo Principal

O que é Liquid? 💧

Liquid é uma linguagem de template open-source criada pelo fundador do Shopify, Tobias Lütke, e escrita em Ruby. Sua principal função é atuar como uma camada de apresentação, permitindo que você exiba dados dinâmicos do seu banco de dados Shopify diretamente no HTML do seu tema.

Em termos mais simples: o Liquid é como um “tradutor” que pega informações do seu painel administrativo (como o nome de um produto que você cadastrou) e as insere no lugar certo do seu código HTML, antes que a página seja enviada para o navegador do cliente.

Por que Liquid é Crucial para o Shopify?

1. Dinamismo: Permite que você crie templates que se adaptam automaticamente ao conteúdo da loja. Não é preciso criar uma página HTML para cada produto; um único template de produto Liquid serve para todos!

2. Segurança: O Liquid é uma linguagem de template “segura” (sandboxed), o que significa que ela não permite a execução de lógica complexa ou acesso direto ao banco de dados, protegendo sua loja de vulnerabilidades.

3. Flexibilidade: Oferece uma gama de ferramentas para exibir, formatar e controlar o fluxo de dados.

4. Separação de Preocupações: Ajuda a separar a lógica de apresentação (o que o usuário vê) da lógica de negócios (como a loja funciona nos bastidores).

Os 3 Pilares do Liquid: Objetos, Tags e Filtros

O Liquid é construído sobre três tipos principais de construtores que trabalham em conjunto para criar conteúdo dinâmico:

1. Objetos (Objects) 📦

Objetos Liquid são contêineres de dados. Eles representam pedaços de informação da sua loja Shopify, como um produto, um cliente, o carrinho de compras ou as configurações da loja. Cada objeto possui propriedades que você pode acessar para exibir informações específicas.

Sintaxe para exibir objetos: {{ object.property }}

• As chaves duplas {{ }} informam ao Liquid que você deseja imprimir o valor de algo.

Exemplos de Objetos Comuns:

• shop: Informações sobre a loja (nome, URL, moedas).
• Ex: {{ shop.name }} (Nome da Loja)
• product: Informações sobre o produto sendo visualizado (título, preço, descrição, imagens, variantes).
• Ex: {{ product.title }} (Título do Produto)
• Ex: {{ product.price }} (Preço do Produto)
• customer: Informações sobre o cliente logado (nome, e-mail).
• Ex: {{ customer.first_name }} (Primeiro Nome do Cliente)
• cart: Informações sobre o carrinho de compras (número de itens, total).
• Ex: {{ cart.item_count }} (Número de Itens no Carrinho)
• page: Informações sobre a página sendo visualizada (título, conteúdo).
• Ex: {{ page.title }} (Título da Página)
• collection: Informações sobre a coleção sendo visualizada.
• Ex: {{ collection.title }} (Título da Coleção)

2. Tags (Tags) 🏷️

Tags Liquid são usadas para adicionar lógica e controle de fluxo aos seus templates. Elas não imprimem nada diretamente na página (a menos que seja uma tag específica para isso), mas sim controlam o que é exibido e como.

Sintaxe para tags: {% tag_name arguments %}

• As chaves com porcentagem {% %} informam ao Liquid que você deseja executar uma operação de lógica.

Tipos Comuns de Tags:

• Flow Control (Controle de Fluxo): Usadas para executar código condicionalmente.
• if, elsif, else, unless: Para criar declarações condicionais.

{% if product.available %}
Produto em estoque!

{% else %}
Produto esgotado.

{% endif %}

• case, when: Para múltiplas condições.

{% case product.type %}
{% when 'T-Shirt' %}
Camiseta de alta qualidade.

{% when 'Mug' %}
Caneca perfeita para seu café.

{% else %}
Confira a descrição do produto.

{% endcase %}

• Iteration (Iteração): Usadas para repetir um bloco de código, geralmente para listar itens de uma coleção.
• for, break, continue: Para iterar sobre arrays ou coleções de objetos.

{% for product in collection.products %}
{{ product.title }}
{{ product.price | money }}

{% endfor %}

• forloop: Um objeto especial dentro de um loop for que oferece propriedades úteis como forloop.first, forloop.last, forloop.index.
• Variable Assignment (Atribuição de Variáveis):
• assign: Para criar e atribuir um valor a uma nova variável.

{% assign my_variable = 'Olá, mundo!' %}
{{ my_variable }}
 {# Saída: Olá, mundo! #}

• capture: Para capturar o resultado de um bloco de HTML/Liquid e armazená-lo em uma variável.

{% capture my_html %}
Título Capturado
 
📚 Informações da Aula
 
Nível: Intermediário
 
Tempo estimado: 15-20 minutos
 

Este é um parágrafo capturado.

{% endcapture %}
{{ my_html }}

• Comments (Comentários):
• comment, {% # comment %}: Para adicionar comentários que não serão renderizados na saída HTML.

{% comment %}
Este é um comentário de várias linhas.
Ele não aparecerá no código fonte final.
{% endcomment %}
{% # Este é um comentário de uma linha, mais compacto. #}

3. Filtros (Filters) ⚙️

Filtros Liquid são usados para transformar e formatar a saída de objetos ou variáveis. Eles são aplicados usando o caractere pipe | e podem ser encadeados.

Sintaxe para filtros: {{ value | filter_name: argument }}

Exemplos de Filtros Comuns:

• Texto:
• upcase: Converte texto para maiúsculas. {{ 'Olá' | upcase }} (Saída: OLÁ)
• downcase: Converte texto para minúsculas. {{ 'MUNDO' | downcase }} (Saída: mundo)
• capitalize: Converte a primeira letra de cada palavra para maiúscula. {{ 'olá mundo' | capitalize }} (Saída: Olá Mundo)
• strip_html: Remove tags HTML. {{ '

  Olá

  ' | strip_html }} (Saída: Olá)

• truncate: Trunca um texto para um número específico de caracteres. {{ 'Um texto muito longo' | truncate: 10 }} (Saída: Um texto…)
• replace: Substitui ocorrências de uma string por outra. {{ 'banana' | replace: 'a', 'o' }} (Saída: bonono)
• Números:
• money: Formata um número como valor monetário (respeita a moeda da loja). {{ product.price | money }}
• plus, minus, times, divided_by: Operações matemáticas básicas.
• Datas:
• date: Formata uma data. {{ 'now' | date: "%Y-%m-%d" }} (Saída: 2023-10-27)
• Arrays:
• size: Retorna o número de itens em um array. {{ cart.items | size }}
• first, last: Retorna o primeiro ou último item de um array.
• join: Junta elementos de um array com uma string. {{ product.tags | join: ', ' }}
• Outros:
• default: Define um valor padrão se a variável for nula ou vazia. {{ product.vendor | default: 'Nenhum fornecedor' }}

Enfileirando Filtros (Chaining Filters):

Você pode aplicar múltiplos filtros a um único objeto ou variável, um após o outro.

{{ product.description | strip_html | truncate: 100 | append: '...' }}

Neste exemplo, a descrição do produto é primeiro limpa de HTML, depois truncada para 100 caracteres e, finalmente, tem “…” adicionado ao final.

Onde o Liquid vive no tema Shopify? 🗺️

Quase todos os arquivos .liquid do seu tema contêm código Liquid. Os locais mais comuns onde você encontrará e trabalhará com Liquid são:

1. layout/theme.liquid: Este é o arquivo principal de layout que envolve a maioria das páginas da sua loja. Ele contém o HTML básico (, , ) e é responsável por incluir o conteúdo de outros templates e seções. É aqui que você encontra tags Liquid como {{ content_for_header }} e {{ content_for_layout }}.

2. templates/: Pasta que contém os templates principais para diferentes tipos de páginas (ex: product.liquid, page.liquid, collection.liquid, cart.liquid, index.liquid). Cada um desses templates define a estrutura e o conteúdo para seu respectivo tipo de página.

3. sections/: Pasta que armazena os blocos de conteúdo reutilizáveis e editáveis através do Shopify Theme Editor (ex: header.liquid, footer.liquid, product-template.liquid). As sections são construídas com Liquid e, muitas vezes, incluem esquemas (schemas) JSON para suas configurações.

4. snippets/: Pasta para pequenos blocos de código Liquid que podem ser reutilizados em diferentes partes do tema (ex: product-card.liquid, icon-star.liquid). Eles ajudam a manter o código organizado e modular. Você os inclui usando a tag {% render 'snippet-name' %} ou {% include 'snippet-name' %} (para temas mais antigos, include pode ser usado, mas render é o recomendado e mais moderno).

5. **locales/*.json**: Embora sejam arquivos JSON para tradução, as strings dentro deles podem conter variáveis Liquid básicas para tornar as traduções mais dinâmicas.

• Ex: "hello": "Olá, {{ customer_name }}!"

Dicas de Boas Práticas e Otimização ao usar Liquid ✨

• Comentários são seus amigos: Use {% comment %} ou {% # # %} para explicar partes complexas do seu código. Isso ajuda muito na manutenção futura.
• Modularize com Snippets e Sections: Divida seu código em pequenos arquivos reutilizáveis. Isso torna seu tema mais organizado, fácil de manter e mais performático.
• Evite lógica excessiva no Liquid: Embora Liquid seja poderoso, ele não é uma linguagem de programação completa. Lógica complexa que envolve muitas operações matemáticas, manipulação de arrays grandes ou interações com APIs externas deve ser delegada ao JavaScript, se possível.
• Cuidado com loops aninhados: Loops dentro de loops podem impactar a performance da sua loja, especialmente se você estiver iterando sobre muitas coleções ou produtos. Otimize-os sempre que possível.
• Use assign com sabedoria: Atribuir valores a variáveis pode tornar o código mais legível e evitar repetições, mas não exagere.
• Conheça a documentação oficial: A documentação do Shopify Liquid é um recurso inestimável. Sempre que tiver dúvidas sobre um objeto, tag ou filtro, consulte-a. (Links nos Recursos Adicionais)
• Teste, teste, teste: Sempre teste suas alterações Liquid em um tema de desenvolvimento antes de publicá-las em sua loja ativa.

💻 Exemplos Práticos

Vamos colocar a mão na massa! Para estes exemplos, você pode editar qualquer arquivo .liquid dentro das pastas templates, sections ou snippets no seu tema de desenvolvimento. Acesse seu código indo em Shopify Admin -> Online Store -> Themes -> Actions -> Edit code.

Exemplo 1: Exibindo Informações Básicas da Loja e de um Produto

Vamos simular a página de um produto.

Local: templates/product.liquid ou dentro de uma seção de produto como sections/main-product.liquid.

{{ product.title }}
Vendida por: {{ product.vendor | default: 'Nosso Fornecedor' | capitalize }}

Preço: {{ product.price | money }}
 {# O filtro money formata o preço corretamente #}

Descrição do Produto

{{ product.description }}

{% if product.description contains '
Este produto possui imagens na descrição.

{% endif %}
Ver mais produtos da coleção {{ product.collections.first.title }}

Tags do produto: {{ product.tags | join: ', ' | downcase }}


Esta loja é: {{ shop.name }}

Nossa URL é: {{ shop.url }}

O que estamos fazendo aqui:

• Exibimos o título, fornecedor, preço e descrição do produto usando product.title, product.vendor, product.price, product.description.
• Usamos o filtro money para formatar o preço e capitalize para o fornecedor.
• A tag if verifica se a descrição contém uma imagem.
• Acessamos a primeira coleção do produto com product.collections.first.title.
• Listamos as tags do produto usando product.tags e join: ', ' para separá-las por vírgula, e downcase para deixá-las minúsculas.
• Exibimos o nome e a URL da loja usando shop.name e shop.url.

Resultado esperado (simulação de screenshot):

[IMAGEM AQUI: Uma captura de tela de uma página de produto Shopify, onde o título do produto, fornecedor, preço, descrição, uma mensagem sobre a imagem na descrição, tags e o nome/URL da loja são visíveis, com os dados dinâmicos preenchidos. Por exemplo: “Título do Produto”, “Vendida por: Marca Incrível”, “Preço: R$99,99”, “Descrição do produto…”, “Este produto possui imagens na descrição.”, “Tags do produto: promocao, verã024”, “Esta loja é: Minha Loja Fantástica”, “Nossa URL é: https://minha-loja-fantastica.myshopify.com”]

—

Exemplo 2: Usando Tags de Controle de Fluxo (Condicionais e Loops)

Vamos criar um pequeno componente para exibir a disponibilidade de um produto e listar suas variantes.

Local: snippets/product-availability.liquid (e depois o incluiríamos em product.liquid ou sections/main-product.liquid).

{% comment %}
Snippet para exibir disponibilidade e variantes de um produto.
Assume que 'product' é passado como um objeto.
{% endcomment %}
{% if product.available %}
✅ Em estoque! Compre agora.

{% if product.has_only_default_variant %}
Este produto não possui opções de variante.

{% else %}
Opções disponíveis:


{% for option in product.options_with_values %}

{{ option.name }}:
{% for value in option.values %}
{{ value }}{% unless forloop.last %}, {% endunless %}
{% endfor %}

{% endfor %}

{% endif %}
{% else %}
❌ Produto esgotado ou indisponível.

{% endif %}
 {# Apenas para separar visualmente #}

{% comment %} Exemplo de como incluir este snippet em outro lugar: {% endcomment %}
{% # {% render 'product-availability', product: product %} # %}

O que estamos fazendo aqui:

• A tag if product.available verifica se o produto está em estoque.
• Dentro dela, outro if product.has_only_default_variant verifica se o produto tem variantes.
• Se tiver variantes, um loop for option in product.options_with_values itera sobre cada opção (ex: “Cor”, “Tamanho”).
• Dentro desse loop, outro loop for value in option.values itera sobre os valores de cada opção (ex: “Vermelho”, “Azul” para “Cor”).
• forloop.last é usado com unless para evitar uma vírgula após o último valor.

Resultado esperado (simulação de screenshot):

[IMAGEM AQUI: Uma captura de tela da página de um produto.

Cenário 1 (Em estoque e com variantes): “✅ Em estoque! Compre agora.” e “Opções disponíveis: Cor: Vermelho, Azul, Verde / Tamanho: P, M, G”.

Cenário 2 (Esgotado): “❌ Produto esgotado ou indisponível.”.

Cenário 3 (Em estoque sem variantes): “✅ Em estoque! Compre agora.” e “Este produto não possui opções de variante.”]

—

Exemplo 3: Usando Filtros para Manipular Texto e Números

Vamos exibir algumas informações do cliente de forma formatada.

Local: templates/customers/account.liquid (página da conta do cliente logado).

{% comment %}
Exibindo informações do cliente logado.
O objeto 'customer' está disponível globalmente.
{% endcomment %}
{% if customer %}
Bem-vindo(a), {{ customer.first_name | capitalize }}!
Seu e-mail é: {{ customer.email | downcase }}

Você é um cliente desde: {{ customer.created_at | date: "%d/%m/%Y" }}

{% assign total_orders = customer.orders_count %}
Você já fez {{ total_orders }} pedido{% if total_orders != 1 %}s{% endif %} conosco.

{% if customer.total_spent > 0 %}
Seu gasto total conosco é: {{ customer.total_spent | money }}

{% else %}
Parece que você ainda não fez nenhuma compra. Que tal explorar nossos produtos?

{% endif %}
{% assign customer_tags = customer.tags | join: ', ' | downcase %}
{% if customer_tags != blank %}
Suas tags de cliente: {{ customer_tags }}

{% endif %}
{% else %}
Por favor, faça login para ver os detalhes da sua conta.

{% endif %}

O que estamos fazendo aqui:

• Verificamos se customer existe (ou seja, se há um cliente logado).
• Exibimos o primeiro nome com capitalize.
• Exibimos o e-mail com downcase.
• Formatamos a data de criação da conta com date: "%d/%m/%Y".
• Usamos assign para armazenar customer.orders_count e depois if para pluralizar a palavra “pedido”.
• Verificamos customer.total_spent para exibir o gasto total formatado com money.
• Exibimos tags do cliente, se existirem, unindo-as e colocando-as em minúsculas.

Resultado esperado (simulação de screenshot):

[IMAGEM AQUI: Uma captura de tela da página de conta de um cliente.

Cenário 1 (Cliente com histórico): “Bem-vindo(a), João!”, “Seu e-mail é: [email protected]”, “Você é um cliente desde: 15/03/2022”, “Você já fez 5 pedidos conosco.”, “Seu gasto total conosco é: R$549,90”, “Suas tags de cliente: vip, newsletter”.

Cenário 2 (Novo cliente): “Bem-vindo(a), Maria!”, “Seu e-mail é: [email protected]”, “Você é um cliente desde: 27/10/2023”, “Você já fez 0 pedidos conosco.”, “Parece que você ainda não fez nenhuma compra. Que tal explorar nossos produtos?”]

—

🎯 Exercícios e Desafios

Hora de praticar o que aprendemos! Acesse o editor de código do seu tema de desenvolvimento.

Exercício 1 (Básico): Adicionar informações ao Card de Produto

1. Encontre o snippet ou section responsável por renderizar um “card de produto” (geralmente algo como snippets/product-card.liquid ou sections/featured-collection.liquid que inclui um card).

2. Dentro deste card, adicione o seguinte:

• Exiba o título da coleção à qual o produto pertence (se houver). Use product.collections.first.title e adicione um default: 'Sem coleção'.
• Exiba o tipo de produto (product.type) em maiúsculas (upcase).
• Exiba a frase “Disponível para compra!” somente se o produto estiver em estoque (product.available).

Exercício 2 (Intermediário): Criar uma lista de produtos em promoção

1. Crie um novo snippet chamado snippets/promo-products.liquid.

2. Dentro deste snippet, escreva um código Liquid que:

• Itere sobre todos os produtos da coleção chamada “Promoções” (assuma que você tem uma). DICA: collection.products onde collection é o objeto da coleção “Promoções”. Você pode obter uma coleção por handle: {% assign promo_collection = collections.promocoes %}.
• Para cada produto na coleção “Promoções”, exiba:
• O título do produto (product.title).
• O preço de comparação (product.compare_at_price | money) se ele for maior que o preço normal (product.price).
• O preço normal (product.price | money).
• Se o produto tiver alguma tag que contenha a palavra “desconto” (use product.tags | join: ',' | downcase | contains: 'desconto'), exiba uma mensagem como “🎉 Grande Desconto!”.

3. Inclua este snippet em templates/index.liquid (sua página inicial) para ver o resultado.

Desafio (Avançado): Mensagem de Boas-Vindas Dinâmica

1. Crie um snippet chamado snippets/welcome-message.liquid.

2. Dentro dele, crie uma mensagem de boas-vindas que mude de acordo com a hora do dia:

• Se for antes das 12:00 (meio-dia): “Bom dia!”
• Se for entre 12:00 e 18:00 (6 da tarde): “Boa tarde!”
• Se for depois das 18:00: “Boa noite!”
• DICA: Use o objeto now e o filtro date com o formato "%H" para obter a hora atual em formato 24h, e depois use tags if/elsif/else.

3. Se um cliente estiver logado (customer), adicione o nome dele à mensagem (ex: “Bom dia, [Nome do Cliente]!”). Se não, use “visitante”.

4. Inclua este snippet no layout/theme.liquid, logo após a tag , para que apareça em todas as páginas.

📝 Resumo da Aula

Ufa! Que aula intensa, não é mesmo? Hoje demos um passo GIGANTE no entendimento do desenvolvimento de temas Shopify.

Revisamos os pontos chave:

• Liquid é a linguagem de template do Shopify que permite exibir dados dinâmicos da sua loja.
• Ela se baseia em três pilares:
• Objetos ({{ }}): Contêm dados da loja (produto, cliente, loja) e suas propriedades.
• Tags ({% %}): Adicionam lógica e controle de fluxo (condicionais, loops, atribuição de variáveis).
• Filtros (|): Transformam e formatam a saída de objetos ou variáveis.
• O Liquid vive em quase todos os arquivos .liquid do seu tema, principalmente em layouts, templates, sections e snippets.
• Seguimos boas práticas para escrever Liquid de forma eficiente e organizada.

Com essa base, você agora entende como os temas Shopify “conversam” com os dados do seu painel administrativo, tornando as páginas interativas e únicas para cada item ou usuário. Parabéns por chegar até aqui! 🚀

🚀 Preparação para próxima aula

Na próxima aula, vamos aprofundar ainda mais no uso do Liquid e começar a construir nossos próprios componentes reutilizáveis.

Prepare-se para:

• Explorar o arquivo theme.liquid em detalhes e entender sua função como orquestrador do tema.
• Criar e utilizar snippets personalizados para modularizar nosso código.
• Introduzir o conceito de Sections e como elas permitem que os usuários da loja editem o conteúdo diretamente pelo Shopify Theme Editor, tudo isso habilitado pelo Liquid e um pouco de JSON Schema.

Será uma aula muito prática, onde aplicaremos o conhecimento de Liquid para construir blocos de conteúdo que realmente fazem a diferença na customização da loja. Mal posso esperar para mostrar a vocês! 😉

📚 Recursos Adicionais

• Documentação Oficial do Shopify Liquid: Sua principal fonte de referência para todos os objetos, tags e filtros. Guarde este link com carinho!
• https://shopify.dev/themes/liquid/reference
• Documentação de Objetos Globais do Shopify: Uma lista completa de todos os objetos disponíveis no ambiente Shopify.
• https://shopify.dev/themes/liquid/objects
• Guia de Design de Temas Shopify (em inglês, mas muito útil): Contém informações valiosas sobre as melhores práticas de desenvolvimento.
• https://shopify.dev/themes/architecture

Até a próxima aula, e continuem codificando com entusiasmo! ✨