Liquid

O Shopify Liquid é uma linguagem de template open-source utilizada pela Shopify para carregar dinamicamente o conteúdo em lojas online. Ela permite que você personalize a aparência e o funcionamento da sua loja, oferecendo uma grande flexibilidade. Liquid é utilizado por desenvolvedores para criar templates de temas, que controlam a estrutura e o design de cada página.

Essa linguagem permite que você acesse e exiba informações como produtos, coleções e carrinho de compras, além de possibilitar a adição de lógica condicional, loops e filtros. Ao aprender a trabalhar com o Liquid, você pode criar experiências únicas para os visitantes da sua loja e adaptar o tema de acordo com suas necessidades.

1. Objetos do Shopify Liquid
2. Variáveis no Shopify Liquid
3. Tags
4. Filtros
5. Trabalhando com coleções e produtos
6. Trabalhando com o Carrinho
7. Seções e Snippets
Conclusão

1. Objetos do Shopify Liquid

No Shopify Liquid, objetos são as variáveis que contêm os dados dinâmicos que você deseja exibir. Eles podem representar qualquer coisa em sua loja, como produtos, coleções, carrinho de compras ou até mesmo informações do cliente.

Exemplos de objetos do Shopify Liquid:

Product: Representa um produto em sua loja.
Collection: Representa uma coleção de produtos.
Cart: Representa o carrinho de compras do cliente.
Shop: Representa informações sobre a loja, como nome e moeda.
Customer: Representa um cliente autenticado.

Exemplo de acesso a um objeto no Liquid:


  {{ product.title }}
  {{ collection.products_count }}
  {{ cart.total_price | money }}

2. Variáveis no Shopify Liquid

No Shopify Liquid, você pode criar suas próprias variáveis para armazenar valores temporários. Essas variáveis podem ser usadas para manipular dados ou até mesmo exibir informações dinâmicas no tema.

Exemplo de declaração de uma variável:


  {% assign product_count = collection.products_count %}

Essa coleção contém {{ product_count }} produtos.

3. Tags

As tags no Shopify Liquid são responsáveis por executar ações, como controlar o fluxo de lógica (condições e loops), exibir conteúdo dinâmico e manipular dados. Elas não geram saída diretamente, mas influenciam como o conteúdo é renderizado na página.

As tags são essenciais para adicionar funcionalidades dinâmicas aos temas. Aqui estão alguns exemplos de tags comumente usadas no Shopify Liquid:

Exemplo de tag if/else:


  {% if product.available %}

Este produto está disponível!


  {% else %}

Este produto não está mais disponível.


  {% endif %}

Exemplo de tag for:


  {% for product in collections.frontpage.products %}


  {% endfor %}

Exemplo de tag include:


  {% include 'header' %}

Exemplo de tag assign:


  {% assign product_count = collection.products_count %}

Essa coleção contém {{ product_count }} produtos.

Exemplo de tag capture:


  {% capture special_message %}
    O produto {{ product.title }} está em promoção!
  {% endcapture %}

4. Filtros

Os filtros no Shopify Liquid permitem que você modifique e formate a saída de objetos, como transformar uma data em um formato legível, alterar o formato de um número ou até mesmo manipular strings.

Exemplos de filtros no Shopify Liquid:

Filtro `date`:


  {{ 'now' | date: "%A, %B %d, %Y" }}

Filtro `money`:


  {{ product.price | money }}

Filtro `upcase` e `downcase`:


  {{ product.title | upcase }}

Filtro `strip_html`:


  {{ product.description | strip_html }}

Filtro `truncatewords`:


  {{ product.description | truncatewords: 20 }}

5. Trabalhando com coleções e produtos

O Shopify Liquid oferece diversas formas de acessar e manipular produtos e coleções em seu site. As coleções são agrupamentos de produtos que você pode exibir nas páginas da sua loja.

Exemplo de como exibir produtos de uma coleção:


  {% for product in collections['frontpage'].products %}


  {% endfor %}

Cada produto possui vários objetos e propriedades que você pode acessar. Alguns dos mais comuns são:

product.title: O título do produto.
product.price: O preço do produto.
product.available: Indica se o produto está disponível para compra.
product.description: A descrição do produto.

6. Trabalhando com o Carrinho

O Shopify Liquid também fornece objetos para manipular e exibir informações sobre o carrinho de compras, permitindo que você mostre os itens no carrinho, calcule totais e aplique descontos.

Exemplo de como exibir os itens no carrinho:


  {% for item in cart.items %}

{{ item.quantity }} x {{ item.product.title }}


  {% endfor %}

Você também pode usar objetos do carrinho para acessar informações como o subtotal do carrinho ou as taxas de envio:

cart.total_price: O preço total do carrinho.
cart.item_count: O número total de itens no carrinho.
cart.shipping_rates: As opções de frete disponíveis para o carrinho.

7. Seções e Snippets

Seções são componentes de página que podem ser configurados e personalizados através do editor de temas do Shopify. Você pode criar seções personalizadas em seu tema Liquid e permitir que os lojistas configurem diferentes partes da página.

Snippets são pequenos blocos de código que você pode reutilizar em diferentes partes do tema. Usando snippets, você pode evitar duplicação de código e tornar seu tema mais organizado e eficiente.

Exemplo de inclusão de um snippet:


  {% include 'snippet-name' %}

Conclusão

O Shopify Liquid é uma linguagem poderosa para personalizar seu tema e criar uma loja online única e dinâmica. Compreender os objetos, tags e filtros do Liquid oferece muita flexibilidade e controle sobre o conteúdo exibido em sua loja. Se você seguir os passos e aproveitar as ferramentas e recursos que o Shopify oferece, pode criar uma experiência de compra ainda mais personalizada e eficiente para seus clientes.

Com a ajuda da documentação do Shopify e o uso do Liquid, você pode desenvolver temas para Shopify e funcionalidades totalmente personalizadas, criando a vitrine ideal para seu negócio. Se você ainda não está familiarizado com a codificação, mas quer personalizar sua loja, o Shopify Liquid pode parecer desafiador no começo, mas é um excelente investimento para quem busca um controle total sobre o design e a funcionalidade do seu site.

Essas são as principais informações sobre o Shopify Liquid, sua utilização e benefícios para personalizar sua loja.

Leia Também: