O que é o Shopify Líquido? Um rápido resumo do básico

Sobre 4.4 milhões sites de comércio eletrônico são construídos usando o Shopify plataforma. É a plataforma de comércio eletrônico tudo-em-um que abalou a web desde o seu início em 2006. Os comerciantes escolhem esta plataforma para hospedar suas lojas online por vários motivos, desde a fácil configuração de pagamento até ferramentas de marketing integradas e muito mais. 

Mas um dos aspectos críticos da Shopify é o seu construtor de sites intuitivo com milhares de temas e Shopify integrações de aplicativos para escolher. 

No entanto, enquanto o construtor sem código permite criar sites impressionantes e exclusivos, existem algumas limitações. Por exemplo, ao começar a construir sua loja online, você deve escolher um tema que defina a disposição e o nível de controle que você terá sobre seu conteúdo. Mesmo se você selecionar um tema vazio, ou seja, sem conteúdo, ainda há uma arquitetura de código subjacente que predefine como o conteúdo é organizado.

Mas há boas notícias. Se você quiser criar o seu próprio Shopify modelo para o seu site ou de outra pessoa, há Shopify Líquido.

Interessado? Junte-se a mim enquanto me esforço para responder à pergunta: o que é Shopify Líquido? Vamos mergulhar!

O que é o Shopify Líquido?

Curiosamente, Shopify O líquido existe desde Shopifyé o início. Quando ShopifyOs criadores da plataforma primeiro projetaram a plataforma, eles construíram um projeto de código aberto para servir como modelo de linguagem para todos Shopify site do produto templates. 

Para os não iniciados, 'linguagem de programação de código aberto' refere-se ao código-fonte de um software que está disponível gratuitamente ao público, permitindo que qualquer pessoa use, modifique e distribua o código para qualquer finalidade. 

Criado usando Ruby, Shopify Líquido serve essencialmente como um espaço reservado para que você possa inserir dados em um formato predefinido (mais sobre isso abaixo).

Então, como isso funciona?

Para entender isso, primeiro você precisa saber que os sites geralmente são estáticos ou dinâmicos. Os armazenamentos estáticos são codificados para mostrar o conteúdo exatamente como está escrito, por exemplo, em HTML. Por outro lado, um site dinâmico pode exibir diferentes conteúdos dependendo de como o usuário interage com ele. 

Agora, digamos que você tenha um site estático; o esqueleto básico do site é predefinido, mas você deseja renderizar conteúdo dinâmico. É aqui que se escreve Shopify Liquid em seu código HTML é útil. Isso se presta como um espaço reservado para conteúdo dinâmico. 

Shopify Liquid atua como um intermediário entre sua loja e Shopifydo servidor, permitindo que o Liquid extraia dados de Shopifydo servidor e entregá-lo em sua loja. A Liquid pode solicitar três tipos principais de dados:

1. objetos
2. Tags
3. Filtros

Abaixo, exploraremos cada tipo de dados por vez:

Objetos Líquidos

Os objetos são semelhantes a uma biblioteca de funções ou conteúdo; dentro de cada objeto, existem várias propriedades. 

Se você não está familiarizado com o conceito de objetos, aqui está uma breve visão geral:

Um objeto é um conceito fundamental na programação. Um objeto consiste em dois componentes: 

1. Propriedades que definem o estado do objeto
2. Funções que definem o comportamento do objeto

Para ilustrar melhor como isso funciona, usaremos um exemplo não relacionado à codificação. Por exemplo, um carro. Aqui, o carro, ou seja, o objeto, poderia ter funções como “acelerar”, “virar” e “frear”. Em contraste, as propriedades podem ser as “janelas”, “portas” etc. 

Simplificando, os objetos são um importante conceito em codificação porque ajudam a organizar sistemas complexos em partes mais gerenciáveis.

Por exemplo, digamos que você esteja criando um Shopify tema e deseja exibir um Título do Blog no seu modelo. Você pode usar o Liquid para trazer essas informações de Shopifydo servidor e exibi-lo em algum lugar da página. Neste exemplo, este é o código Liquid que você usaria para fazer isso:

{{Blog.title}} 

Vamos decompô-lo:

• Aqui, 'blog' é o objeto. 
• A propriedade que queremos dentro deste biblioteca é marcado por 'título. ' 
• A '.' informa ao Liquid como esses dois bits de dados estão relacionados. 
• Os colchetes duplos são a sintaxe do Liquid que define o {{conteúdo/saída que você deseja}} que você deseja do Shopify servidor. 

Etiquetas Líquidas

Ao usar Shopify Líquido, as tags adicionam lógica ao conteúdo que solicitamos do Shopify servidor para ajudar a definir quando o conteúdo deve estar visível na página. Por exemplo, digamos que queremos exibir um gráfico específico em nossas postagens de blog festivas. Ou seja, queremos que este gráfico apareça somente quando uma determinada condição for atendida. 

Veja como isso pode parecer:

{% if blog.title == 'celebration' %}

**imagem HTML**

{% fim se %}

Isso pode parecer complexo, mas se analisarmos, é bem simples de entender:

• As tags usam uma sintaxe ligeiramente diferente dos objetos que se parecem com isso  {%…%}.
• A primeira etiqueta {% if blog.title == 'celebration' %} informa ao Liquid qual condição deve ser atendida antes de solicitar o conteúdo do servidor.
• A condição que pedimos é definida por um declaração 'se'. Se você estiver familiarizado com a codificação, saberá que as instruções 'if' funcionam comparando dois ou mais dados entre si. Se eles corresponderem, ele passará para a próxima linha em nosso código. Aqui,  if blog.title == 'celebração,' estamos pedindo a Liquid para verificar se o título do nosso blog contém a palavra 'celebração'. Se isso acontecer, ele irá para a próxima linha do nosso código. Caso contrário, o Liquid não retornará nenhum conteúdo.
• Neste exemplo, se tivermos um título de blog que contenha a palavra 'celebração', o Liquid extrairá e exibirá nossa imagem HTML.
• Depois de fazer isso, ele vai para a seguinte linha {% fim se %}, que encerra nosso programa.

Este é apenas um exemplo do que você pode fazer com tags. Shopify Liquid tem tags para:

• Controle quando o código é executado
• Iterar/iteração (repetição) um bloco de código
• Ecrã certas marcações HTML
• Criar novas variáveis.

Filtros de Líquido

Filtros são trechos de código que alteram ou modificam a saída de um objeto. Por exemplo, eles podem alterar a cor, a fonte, o tamanho ou a aparência dos elementos do site. 

Mas, além de alterar os aspectos visíveis do objeto, eles podem desempenhar funções em um objeto. Por exemplo, se você quiser mostrar os títulos do seu blog em letras maiúsculas, um filtro pode ajudá-lo a fazer isso sem alterar manualmente todos os títulos do seu blog:

{{ blog.title | uppercase }}

• A sintaxe dos filtros é {{…}}.
• Aqui, a propriedade do objeto que estamos procurando é 'Título do Blog'.
• O filtro que estamos aplicando é maiúsculas.
• A '|' separa a entrada e a saída do nosso código.

Agora, quando um usuário olhar para o título do nosso blog, ele aparecerá em letras maiúsculas.

Benefícios da Shopify Líquido

Suponha que você seja um designer ou desenvolvedor de sites. Nesse caso, um dos benefícios mais significativos da Shopify O líquido é que você não precisa dos dados da loja (ou seja, informações sobre a loja) para criar ou modificar um site. Isso ocorre porque quando um usuário faz um primeiro Shopify armazenar, todas as informações são armazenadas no Shopify servidor, o que significa que você pode usar o Liquid para simplesmente recuperar os dados de que precisa. 

No entanto, se você não é um desenvolvedor da Web, mas apenas um proprietário de loja procurando enfeitar sua loja, também há benefícios para você:

• Fácil de aprender e usar: Liquid tem uma sintaxe simples e é fácil de entender, tornando-o acessível para desenvolvedores e não desenvolvedores.
• Conteúdo dinâmico: Liquid permite a criação de conteúdo dinâmico
• Customizável: Com o Liquid, você pode criar modelos e temas personalizados, oferecendo controle total sobre a aparência da sua loja de comércio eletrônico.
• Performance melhorada: Os modelos líquidos são compilados e armazenados em cache, melhorando desempenho e velocidade do site em comparação com outros mecanismos de modelo.
• Grande comunidade: Shopify tem uma grande comunidade de usuários, fornecendo acesso a uma riqueza de conhecimento e suporte, tornando mais fácil encontrar soluções para problemas comuns relacionados ao Liquid.

Requisitos

Então o que você precisa para começar a usar Shopify Líquido?

Se você já tem um Shopify loja, Shopify Liquid estará disponível para você usar gratuitamente. Discutiremos como você pode encontrar o Liquid abaixo. Mas tudo o que você precisa saber por enquanto é que todo site criado em Shopify é construído com o Liquid, então você pode começar a editar manualmente este código assim que criar um site.

No entanto, se você não tiver um Shopify store, você precisará criar um para começar a brincar com o Liquid. 

1. Primeiro, vá para Shopify e selecione um plano. Preencha seus dados e crie sua conta.
2. De você Shopify admin, clique em temas. Shopify fornece automaticamente um tema padrão. Você pode deixar como está ou escolher outro tema para começar.
3. Shopify tem uma lista de verificação que você pode seguir para concluir sua loja. Você vai querer fazer todo o básico, como adicionar páginas de produtos, projetar sua vitrine, etc.

Agora que você tem o esqueleto básico de sua loja online, pode extrair esses dados do Shopify servidor e personalize-o usando o Liquid (mais sobre isso abaixo). 

Embora você não precise de nenhuma experiência em codificação para começar a usar o Liquid, a familiaridade com os princípios básicos de codificação facilitará sua jornada. Mas, na maioria das vezes, você pode encontrar extensa documentação de autoajuda e tutoriais no Shopify portal de desenvolvedores. Aqui você encontrará uma seção inteira dedicada a Noções básicas de líquidos. 

É aconselhável que você gaste algum tempo olhando esses guias antes de começar. Embora o Liquid seja uma poderosa ferramenta de personalização, ele também tem o potencial de quebrar seu site se você não souber o que está fazendo!

Começando com Shopify Líquido

Então, usando o que aprendemos até agora, vamos ver como podemos editar nosso Shopify tema usando Liquid. 

Para acessar o Liquid, siga estas etapas:

1. Duplique seu tema: Para evitar qualquer contratempo maior, é sensato fazer uma cópia do seu tema antes de começar. Dessa forma, se você cometer algum erro, seu original Shopify tema permanece intacto. Para fazer isso, navegue até a seção de temas no lado direito do seu Shopify painel. Escolha o tema que deseja editar e clique em ações para ver o menu suspenso. Agora, selecione duplicado.
2. Renomeie sua duplicata: Ao duplicar um tema, você o verá em sua lista de temas. Você pode renomear sua cópia para não confundir o original com a duplicata. Basta clicar no botão de ações novamente e clicar em renomear no menu suspenso. 
3. Entrando no editor de código: Agora, selecione ações em sua duplicata novamente e selecione editar código. Você será direcionado para a lista completa de códigos dentro do seu tema. Dê uma olhada nas pastas listadas à sua direita. Você deve ver várias pastas contendo diferentes aspectos do seu tema, como layout, modelos, seções, etc. Abra a pasta de modelos. 
4. Codificação em líquido: Dentro da pasta de modelos, você verá uma lista de arquivos com o tipo de arquivo .liquid. Você também pode criar um novo modelo de arquivo Liquid selecionando o botão de adição na pasta de modelos. Ele perguntará qual modelo você deseja criar, ou seja, página, seção, blog, etc., e nomeará o arquivo. Para editar um arquivo, clique duas vezes em um arquivo de modelo e ele será aberto no editor de código à direita.

Dentro de qualquer arquivo Liquid, você verá um script HTML. Este é o esqueleto do seu site. Você pode usar a linguagem Liquid dentro deste HTML para recuperar informações do Shopify servidor. Contanto que você use a sintaxe correta do Liquid, ou seja, os colchetes, ele deve renderizar seu conteúdo de acordo.

Para ilustrar, vamos executar um exemplo fácil:

Redimensionando Imagens Usando Shopify Líquido

As imagens são um aspecto essencial da maioria Shopify lojas. Mas se você estiver usando várias imagens, pode ser um pesadelo dimensioná-las corretamente, para que apareçam perfeitamente. Para corrigir isso, estamos analisando o img_url filtro. Como outros filtros, img_url é projetado para modificar o conteúdo que leva do Shopify servidor. Você pode usar este filtro para alterar o tamanho, a escala, o formato e o corte das suas imagens. 

Esta é uma técnica excelente porque o filtro apenas modifica temporariamente uma imagem existente; ele não cria uma nova imagem toda vez para renderizar seu modelo, portanto, não diminuirá o tempo de carregamento do seu site. 

Então, como redimensionamos uma imagem?

Primeiro, precisamos decidir onde queremos aplicar as alterações. Você pode aplicar o filtro img_url a qualquer objeto com uma propriedade de imagem, incluindo:

• Produtos
• Variantes do produto
• Itens de linha
• Coleções
• Artigos

Depois de decidir quais imagens você quer editar, você precisa saber qual propriedade você quer atingir. Para descobrir quais propriedades têm um atributo de imagem, veja Shopifylista de objetos de e suas propriedades. 

Neste exemplo, estaremos direcionando nossas imagens de artigo de blog.

Aqui está o código básico:

{{ blog.articles.image | img_url: ‘100×100' }}

Demolir:

• Blog é o objeto que estamos procurando e queremos a propriedade artigos, pois contém todos os artigos do nosso blog. Especificamente, queremos alterar as imagens em nossos artigos de blog, então estamos direcionando o imagem propriedade dentro dos artigos.
• Agora aplicamos o filtro img_url. Se deixássemos isso como está, ele simplesmente exibiria uma imagem extraída da URL fornecida pelo Shopify servidor. No entanto, também daremos um parâmetro extra: o tamanho da imagem '100×100' (Observe que Shopify usa pixels para determinar intervalos de tamanho).
• Por fim, envolvemos nosso código usando a sintaxe de colchetes duplos Liquid, que é usada para filtros. 

E acabamos! Isso deve retornar a saída para todas as imagens do nosso blog, tornando-as de 100 por 100 pixels de tamanho.

Dicas e Takeaways

Espero que, depois de ler este artigo, você tenha uma resposta para a pergunta: O que é Shopify Líquido?

Como você pode ver, Shopify Líquido é uma ferramenta versátil que pode servir a várias funções ao projetar ou editar um Shopify modelo. Embora haja um pouco de curva de aprendizado, uma vez que você se acostuma, é razoavelmente fácil de usar – especialmente em comparação com outras linguagens de codificação mais complexas, como Javascript.

Se você estiver interessado em usar Shopify Liquid, recomendamos que você siga estes tópicos para aproveitar ao máximo:

1. Comece com uma sólida compreensão do Liquid: Uma forte compreensão do Liquid permitirá que você crie temas personalizados mais complexos. Com essa base, novos usuários podem aproveitar todo o potencial de Shopify para criar lojas online exclusivas e envolventes.
2. Teste seu tema completamente: O teste é essencial para garantir que seu tema personalizado funcione conforme o esperado em diferentes navegadores e dispositivos. Ao detectar problemas de compatibilidade com antecedência, você evita possíveis frustrações para seus clientes.
3. Use as ferramentas e recursos disponíveis: Shopify tem muitos recursos disponíveis para ajudar os desenvolvedores de temas, então use-os! Quando utilizado, isso pode tornar o processo de desenvolvimento mais rápido e fácil.

Com todos esses pontos abordados, acho que é seguro dizer que Shopify O Liquid pode ser uma maneira divertida e eficaz de atualizar ou criar um ambiente mais envolvente e dinâmico Shopify armazenar. 

Isso é tudo de mim; para você. Deixe-me saber sobre suas experiências com Shopify Líquido nos comentários abaixo!