Liquid

Liquid é a linguagem de template da Shopify que permite exibir dados dinâmicos em sua loja online.

Você pode usá-lo no tema Shopify para exibir produtos, coleções, blogs, URLs, imagens e muito mais – tudo personalizado com base no contexto em que o código é executado.

Neste artigo, vamos guiá-lo pelos fundamentos do Liquid. Você aprenderá:

• O que é Liquid?
• Arquivos Liquid vs. Tags Liquid
• Três Tipos de Códigos Liquid
• Exemplo Completo
• Dica Bônus: Comece a Praticar com o Playground do Liquid
• Conclusão

O que é Liquid?

Liquid é uma linguagem de template open-source desenvolvida pela Shopify.

Ela permite que você insira conteúdo dinâmico (como nomes de produtos ou imagens) dentro de arquivos HTML, CSS e JavaScript.

Por exemplo, em vez de escrever código HTML estático como:

<h1>Tênis Vermelho</h1>

Você pode usar Liquid assim:

<h1>{{ product.title }}</h1>

Isso exibe automaticamente o nome do produto correto, dependendo da página em que o cliente estiver.

O Liquid é usado principalmente em arquivos de tema `.liquid` e funciona junto com HTML, CSS e JavaScript para gerar páginas dinâmicas.

Arquivos Liquid vs. Tags Liquid

Uma coisa que você deve ter em mente é que os arquivos Liquid e as tags Liquid são coisas diferentes.

• Um arquivo Liquid é um arquivo que carrega dados de um banco de dados. Ele é um arquivo com a extensão .liquid e atua como um contêiner de layout que instrui o sistema de template da Shopify a carregar e exibir dados específicos.
• Uma tag Liquid é uma linha de código que define a lógica de como os dados devem ser processados ou exibidos.

Um arquivo Liquid pode conter diversas tags Liquid.

Três Tipos de Códigos Liquid

Agora que você conhece a função principal do Liquid, você deve entender que ele funciona com três tipos diferentes de códigos. Aqui estão:

1. Objetos

Os objetos Liquid atuam como marcadores de posição para conteúdo armazenado na sua loja Shopify.

Por exemplo, se você quiser exibir a imagem em destaque de um produto, usaria:

{{ product.featured_image }}

Quando renderizado, o Liquid substitui isso automaticamente pela imagem em destaque daquele produto específico.

Para facilitar a leitura, os objetos Liquid sempre usam colchetes duplos {{ }}.

Aqui estão mais alguns exemplos comuns:

{{ shop.name }}
{{ shop.email }}
{{ product.title }}
{{ collection.description }}

2. Tags

As tags Liquid são instruções de programação que permitem executar lógica condicional, criar loops e controlar o fluxo do seu template.

As tags usam chaves de porcentagem com colchetes {% %} e vêm em três tipos principais:

• Tags de Controle de Fluxo: como if, unless, case, when.
• Tags de Loop: como for e cycle.
• Tags Variadas: como assign, capture, include, render, comment.

Exemplo de uso de if:

{% if product.available %}
  Este produto está disponível.
{% else %}
  Produto esgotado.
{% endif %}

3. Filtros

Os filtros Liquid são modificadores aplicados aos objetos para transformá-los ou formatá-los antes de exibir.

Você os aplica dentro de colchetes duplos, junto com um pipe |.

Por exemplo:

{{ product.title | upcase }}

Isso converteria o título do produto para letras maiúsculas.

Alguns filtros úteis:

• upcase: deixa tudo maiúsculo
• downcase: deixa tudo minúsculo
• capitalize: coloca a primeira letra em maiúscula
• money: formata um número como moeda
• date: formata uma data

Exemplo Completo

Veja um exemplo simples unindo tudo:

<h1>{{ product.title | upcase }}</h1>

{% if product.available %}
  <p>Preço: {{ product.price | money }}</p>
{% else %}
  <p>Produto esgotado</p>
{% endif %}

Aqui:

• Estamos exibindo o título do produto em letras maiúsculas.
• Usamos um if para verificar se o produto está disponível.
• Se sim, mostramos o preço (formatado como dinheiro).
• Caso contrário, mostramos uma mensagem de produto esgotado.

Dica Bônus: Comece a Praticar com o Playground do Liquid

Se você quiser experimentar a programação em Liquid sem afetar sua loja Shopify real, recomendamos usar o Playground do Liquid:

Lá, você pode testar código Liquid com diferentes objetos e ver os resultados renderizados imediatamente. Isso é extremamente útil para aprender e testar ideias de design.

Conclusão

A linguagem de template Shopify Liquid pode parecer complexa no início, mas com o tempo, você verá que ela é lógica, poderosa e flexível.

Saber como usá-la te dá muito mais controle sobre a aparência e o comportamento da sua loja, sem depender de apps ou desenvolvedores externos para cada pequena mudança.