Quando queremos criar uma loja online na plataforma Shopify, começamos escolhendo o template certo para nossa loja. O template determina a aparência, as funções e o layout da loja. Um template bem selecionado tem um impacto significativo na percepção da nossa loja pelos clientes. Os temas shopify são construídos utilizando tecnologias web como HTML, CSS, JavaScript e, mais importante, utilizando a linguagem de template Shopify Liquid.
A Shopify oferece quase 100 templates diferentes em sua coleção. Cada template pode ser adaptado às necessidades da sua loja, configurando as opções no painel de administração. No entanto, essas configurações geralmente têm algumas limitações. Quando o painel de administração não nos dá a possibilidade de fazer as alterações que queremos, podemos editar o código do template Shopify Liquid. Antes de fazermos isso, é bom conhecer o que é o Shopify Liquid e como ele funciona para evitar mudanças indesejadas ou quebrar o nosso template.
Os usuários não conseguem diferenciar entre conteúdo estático e dinâmico ao navegar em um site. O conteúdo estático é codificado diretamente na página, enquanto o conteúdo dinâmico é carregado do banco de dados. Os desenvolvedores web utilizam uma linguagem de template para combinar conteúdo estático e dinâmico. A linguagem de template, em combinação com o HTML, permite criar elementos do site e inserir conteúdo dinâmico neles, dependendo de onde tal elemento é renderizado na página. Por exemplo, temos uma página de produto na nossa loja. Podemos exibir informações sobre o produto, como nome, foto ou descrição. Essas informações são renderizadas dinamicamente, dependendo do produto que estamos visualizando. A linguagem de template é responsável por isso, e na plataforma Shopify, ela é o Shopify Liquid.
Liquid é uma linguagem de template criada pela Shopify. Ela é usada desde 2006 em lojas Shopify e muitas outras aplicações web, como o Jekyll. Foi escrita na linguagem de programação Ruby e é a base de todos os templates criados para o Shopify. Ela usa uma combinação de objetos, tags e filtros para renderizar conteúdo dinâmico. Também possui muitos operadores lógicos e comparativos que, em combinação com tags, definem a lógica indicando aos templates qual trecho de código deve ser executado. Com o tempo, a Shopify e o Jekyll estenderam o Liquid com seus próprios objetos, tags e filtros, criando os três tipos mais populares de linguagem Liquid: Liquid, Shopify Liquid e Jekyll Liquid. O Shopify Liquid está disponível no GitHub como um projeto open-source e inclui objetos que representam informações sobre a loja, produtos, clientes e filtros. Se você possui uma loja Shopify ou está planejando criar uma, certamente encontrará arquivos .liquid no seu template, que conterão trechos de código semelhantes a este:
Este é um trecho de código HTML e Shopify Liquid. A sintaxe do Shopify Liquid não é complicada. As chaves `{ { } }` são responsáveis pela saída, enquanto as chaves combinadas com sinais de porcentagem `{ % % }` são responsáveis pela lógica. Vamos discutir essas sintaxes com mais detalhes mais adiante neste artigo.
Os templates Shopify Liquid são criados de forma simples, para que seus usuários possam editá-los sozinhos. Tudo o que você precisa para fazer isso é aprender o básico da linguagem Shopify Liquid, que é fácil de entender e ler. Compreender a sintaxe e o funcionamento da linguagem Shopify Liquid ajudará a entender como seu template funciona. Mesmo que você não seja programador, entender o código Shopify Liquid não será um grande desafio para você. Como proprietário da loja, isso lhe dará a capacidade de resolver alguns problemas e permitir editar o código do template, de acordo com suas preferências. Graças a isso, você poderá economizar muito tempo e dinheiro no futuro.
O Liquid e o Shopify Liquid possuem uma documentação clara com exemplos de soluções prontas. Mesmo que você encontre problemas no início do seu aprendizado com o Shopify Liquid, pode facilmente encontrar lugares onde poderá obter ajuda. Você poderá usar a documentação técnica ou pedir ajuda à enorme comunidade Shopify. Escrevemos sobre como fazer isso em nosso blog da agência Shopify, aqui: Shopify Support.
O melhor é começar aprendendo Shopify Liquid percebendo onde nosso código Liquid é processado. Como motor de template, o Liquid, por sua natureza, só é executado uma vez no lado do servidor. Portanto, todas as alterações que fazemos nele serão processadas antes que o código chegue aos navegadores de nossos clientes. Portanto, a partir do momento que o destinatário vê nossa loja no navegador, qualquer alteração no site exigirá o uso de JavaScript.
Usar o Liquid e editar nosso template diretamente no painel de administração do Shopify não requer instalação. Só precisamos encontrar o template que queremos editar e, após clicar em "AÇÕES" ao lado do nome, selecionar a opção "Editar código". Seremos redirecionados para o editor, onde agora podemos fazer e salvar as alterações.
O uso mais avançado do Liquid pode nos levar a usar um conjunto conveniente de comandos de terminal e ferramentas - Shopify CLI. Isso nos permitirá editar o código localmente em nosso próprio editor de código de forma mais conveniente e eficiente.
ATENÇÃO! Para usar o Shopify CLI, você deve ter pelo menos conhecimento básico de programação (suporte ao terminal) e um editor de código instalado localmente. Será também necessário instalar a versão correta da linguagem Ruby em nosso computador. Consulte a documentação do Shopify CLI para obter instruções detalhadas sobre como iniciar o ambiente local em diferentes sistemas operacionais.
Os arquivos em que escrevemos o código Liquid são divididos em 3 pastas: “templates”, “sections” e “snippets”. A hierarquia que elas criam permite que certos tipos de arquivos sejam usados apenas nos locais corretos.
Os arquivos na pasta “templates” correspondem aos tipos individuais de subpáginas em nossa loja. Nesse ponto, podemos usar arquivos existentes definidos nas pastas “sections” e “snippets”. Um exemplo de template pode ser um arquivo chamado “product.liquid” definido na pasta “templates”, que pode esboçar como as seções individuais funcionarão juntas em uma página de produto.
O conteúdo da pasta “sections” geralmente corresponde a arquivos que representam seções inteiras em subpáginas individuais, como uma seção com os produtos mais recentes ou uma seção contendo a descrição de um produto. As sections só podem ser usadas em arquivos definidos como “templates” – usá-las em snippets ou em outras sections causará um erro.
Os arquivos na pasta “snippets” geralmente representam elementos pequenos ou frequentemente repetitivos na página. Um bom exemplo é o tile de produto que aparece várias vezes na página em diferentes seções e mostra produtos diferentes. Outro exemplo minimalista pode ser um ícone gráfico simples que desejamos usar repetidamente em diferentes lugares. Podemos usar arquivos desse tipo em qualquer lugar.
A primeira vista, o Liquid se parece com HTML, com a adição de estruturas fáceis de reconhecer que representam lógica ou valores inseridos dinamicamente. Essas estruturas incluem dois tipos de parênteses, operadores lógicos, objetos, tags e filtros.
Existem dois tipos de parênteses no código:
No exemplo anterior, podemos ver o uso do operador lógico “==”. Existem vários operadores desse tipo no Liquid, que nos ajudam a controlar o comportamento do nosso código:
Observe que, ao contrário da maioria das linguagens de programação, alguns operadores foram alterados para valores de palavras. Em vez do operador “||” usamos “or” e, em vez de “&&” usamos “and”. Essa sintaxe é uma conveniência para pessoas não técnicas, mas pode ser um pouco confusa para programadores experientes.
Podemos salvar as informações que usamos no código em variáveis. No Liquid, temos a opção de usar dois tipos de variáveis:
Esses são apenas alguns dos conceitos básicos. Há muito mais a aprender e entender ao usar o Shopify Liquid em detalhes.