Você olha para o código dos temas Shopify como se fosse uma língua estrangeira e tem medo de estragar tudo se tocar em alguma coisa? O Liquid é fácil de aprender quando ele é explicado de forma clara.
Liquid é uma linguagem de template criada pela Shopify e foi projetada especificamente para funcionar com a plataforma de e-commerce da Shopify (embora hoje também seja usada em outros projetos). O Liquid permite que os donos de lojas modifiquem o conteúdo do site e personalizem a aparência e funcionalidade da loja online sem precisar escrever código. O Liquid é a espinha dorsal de qualquer tema da Shopify.
O Liquid é considerado uma linguagem de template porque foi desenvolvido principalmente para criar templates que podem ser usados para gerar conteúdo dinâmico em páginas da web. Um template é uma estrutura ou layout pré-projetado que contém espaços reservados para conteúdo dinâmico, como informações de produtos, dados de clientes e configurações da loja.
Esses templates em HTML contêm código Liquid que exibe o conteúdo dinâmico da loja e manipula dados para criar diferentes estruturas de página. Ele faz isso de duas formas principais: exibindo informações da loja e usando lógica para lidar com diferentes cenários. Você pode identificar o código Liquid pelas chaves duplas {{ assim }} ou chaves simples com sinal de porcentagem {% assim %}.
O Liquid {{ output }} permite que usemos espaços reservados no código, como {{ product.title }}, que serão substituídos por conteúdo dinâmico da loja.
Exemplo:
<h2>{{ product.title }}</h2>
<span>{{ product.price }}</span>
<img src="{{ product.image.src }}" alt="{{ product.title }}">#section--{{ section.id }} {
background: {{ section.settings.bg_color }};
}
#section--{{ section.id }} .column-size {
width: calc(100 / {{ section.settings.num_col }})%;
}{% if collection.title == "Sale" %}
Esta coleção está em promoção!
{% endif %}
{% if collection.title == "New Arrivals" %}
<h2>Confira nossos lançamentos:</h2>
{% elsif collection.title == "Sale" %}
<h2>Não perca nossos itens em promoção:</h2>
{% else %}
<h2>Veja todos os produtos:</h2>
{% endif %}{% assign total = 0 %}
{% for item in cart.items %}
{% assign total = total | plus: item.price %}
{% endfor %}
<p>Total: {{ total | money }}</p>{% for product in collection.products %}
{{ product.title }}
{% endfor %}O código Liquid é uma ferramenta poderosa que permite aos donos de lojas Shopify personalizar a aparência e funcionalidade da loja. Com o uso do Liquid, os desenvolvedores podem criar uma loja virtual dinâmica que oferece uma ótima experiência ao usuário.
Há muito mais para aprender sobre o Liquid, como usar tags, objetos e filtros para criar templates personalizados.
Depois que você aprende HTML e CSS, aprender Liquid é bem direto. O Liquid tem uma sintaxe simples e intuitiva, projetada para ser fácil de ler e entender.
A Shopify oferece uma extensa documentação e recursos para desenvolvedores. Em nosso curso da Shopify, Design Freedom on Shopify, abordamos os Fundamentos do Liquid para que você possa navegar e editar qualquer arquivo de tema. Você também aprende a transformar código HTML e CSS comum em uma seção da Shopify usando Liquid.
Se você é designer web e quer aprender mais sobre como criar lojas Shopify personalizadas, confira nosso Treinamento Gratuito da Shopify. A Shopify também oferece bastante documentação gratuita sobre o uso do Liquid.
O código Liquid cria uma ponte entre os dados da loja (como informações de produtos ou personalizações de tema) e o HTML de qualquer página.
O código Liquid usa uma sintaxe muito simples. Depois que você conhece HTML e CSS, aprender Liquid é direto e parece uma progressão natural dessas linguagens.
Sim, a Shopify utiliza código Liquid em todos os seus temas. Ele também é usado nos templates de e-mail de notificação para os clientes.