Crie um tema Shopify com o motor Liquid

Autor: Peter Berry

Data De Criação: 14 Julho 2021

Data De Atualização: 13 Poderia 2024

Vídeo: 5 MELHORES TEMAS DA SHOPIFY - ATUALIZADO 2022

Contente

Arquivos e pastas de temas
Mapeamento de URLs para modelos
Líquido: o básico
Compreendendo product.liquid
Resultado
Lógica
Filtros
Qual é o próximo?
Mais recursos e inspiração

Nas últimas semanas, tenho criado o tema do Shopify para a Viewport Industries, a empresa que Elliot Jay Stocks e eu formamos no ano passado. Escolhemos o Shopify por vários motivos:

Permite-nos vender produtos digitais e físicos
É totalmente hospedado, o que significa que não há servidores com que se preocupar
Ele suporta uma série de gateways de pagamento que se integram perfeitamente com nosso banco
É baseado em tema, o que significa que podemos facilmente reutilizar o HTML, CSS e JavaScript de nosso site existente

O Shopify usa um mecanismo de template chamado Liquid para enviar dados de sua loja para seus templates. O líquido é talvez o único ingrediente de um tema do Shopify que você nunca usou antes e pode ser desconcertante. Mas a boa notícia é que não é tão difícil começar.

Se você já usou o Smarty, ERB ou Twig, o que segue será familiar para você. Caso contrário, não se preocupe: é apenas uma questão de aprender algumas regras simples. Depois de adicionar as habilidades do Liquid ao seu kit de ferramentas de desenvolvimento web, você poderá começar a criar temas para os clientes em um piscar de olhos.

Arquivos e pastas de temas

Os temas do Shopify nada mais são do que uma série de arquivos (arquivos HTML com extensão .liquid, CSS, JS, imagens e assim por diante) e pastas. Os temas podem ter a aparência e funcionar como você quiser: realmente não há restrições. Esta é a estrutura básica de um tema:

ativos
config
layouts
theme.liquid
trechos
modelos
404.líquido
article.liquid
blog.liquid
cart.liquid
coleção.líquido
index.liquid
page.liquid
product.liquid
search.liquid

Com esses arquivos, você pode criar os temas mais básicos. Claro, você provavelmente gostaria de adicionar algum CSS, JavaScript e algumas imagens. Você os colocaria na pasta de ativos. (É importante notar que atualmente você não tem permissão para subpastas em sua pasta de ativos.)

Para mais informações sobre como os temas funcionam e para saber mais sobre as pastas config e snippets, eu recomendaria a leitura de Theme from Scratch e Theme Settings no Shopify Wiki.

Como alternativa, você pode se inscrever no programa de Parceiro gratuito, criar uma loja de teste e inspecionar um dos muitos temas gratuitos disponíveis na área de administração da loja de teste - basta ir ao editor de tema localizado no menu Temas.

Mapeamento de URLs para modelos

Os temas do Shopify funcionam mapeando o URL atual para um modelo específico. Por exemplo, se estivermos vendo um produto que tem o seguinte URL ...

http://www.unitedpixelworkers.com/products/indianapolis

... então o Shopify saberá como usar seu product.liquid modelo. É por esse motivo que você só deve usar os nomes de arquivo listados acima para seus modelos.

Além de o Shopify saber qual template exibir em relação ao URL atual, ele disponibiliza uma série de variáveis muito específicas para nós. Elas são conhecidas como 'variáveis de modelo' e nos permitem exibir dados em nossos modelos.

Por exemplo, em nosso modelo product.liquid, temos acesso ao apropriadamente nomeado produtos variável. Isso significa que podemos imprimir o nome, a descrição, o preço e a disponibilidade de nosso produto em nosso modelo. Usaremos a combinação de variáveis Liquid e template para preencher nossos templates com dados relacionados aos nossos produtos.

Para obter uma lista completa das variáveis de modelo disponíveis, visite a folha de referências do Shopify de Mark Dunkley.

Líquido: o básico

O Liquid está aqui para facilitar nossas vidas como designers de temas. Uma das principais maneiras de fazer isso é com o uso de layouts. Os layouts são ideais para incluir elementos de página comuns, como cabeçalho, navegação principal, rodapé e assim por diante.

Na minha estrutura de pastas acima, você notará um arquivo chamado theme.liquid na pasta de layouts. Você pode pensar em theme.liquid como nosso modelo mestre. Todos os nossos outros modelos, como product.liquid, são renderizados dentro deste modelo mestre. Você pode ter mais de um layout se desejar, mas o padrão deve sempre ser chamado de theme.liquid.

Eu não vi o arquivo theme.liquid do United Pixelworkers, mas você pode imaginá-lo contendo a marca para as áreas destacadas em vermelho abaixo.

Esta é a aparência de um layout básico theme.liquid:

! DOCTYPE html>
html>
cabeça>
{{content_for_header}}
título> Título da página vai aqui / título>
/ head>
corpo>
{{content_for_layout}}
/ body>
/ html>

Você notará duas frases entre chaves duplas: {{content_for_header}} e {{content_for_layout}}. Estes são os nossos primeiros exemplos de Liquid em ação.

O Shopify costuma usar {{content_for_header}} para adicionar arquivos específicos à seção head> de um documento: por exemplo, adicionando o código de rastreamento. {{content_for_layout}} é onde o conteúdo do nosso modelo mapeado por URL aparecerá. Por exemplo, se estivermos visualizando uma página de produto, nosso arquivo product.liquid substituirá {{content_for_layout}} em nosso arquivo de layout.

Compreendendo product.liquid

Agora que já passamos pelos conceitos básicos de layouts, é hora de examinar um modelo.As lojas têm tudo a ver com os produtos, então vamos dar uma olhada product.liquid.

Aqui está um exemplo muito simples, mas funcional de um modelo product.liquid.

h2> {{product.title}} / h2>
{{ Descrição do produto }}
{% if product.available%}
form action = "/ cart / add" method = "post">
select id = "product-select" name = ’id’>
{% para a variante em product.variants%}
valor da opção = "{{variant.id}}"> {{variant.title}} - {variant.price} / opção>
{% endfor%}
/ select>
input type = "submit" name = "add" value = "Add to cart" id = "purchase" />
/ form>
{% senão %}
p> Este produto não está disponível / p>
{% fim se %}

Existem vários conceitos-chave do Liquid em ação aqui. Vamos examiná-los em ordem.

Resultado

A primeira linha do código contém a frase {{product.title}}. Quando renderizado, isso gerará o título do produto, que como você sabe agora, é determinado pela URL. No exemplo do United Pixelworkers abaixo, o título do produto é simplesmente 'Indianápolis'.

O Liquid usa o formato de sintaxe de pontos. Neste caso, {{product.title}} é igual à variável do modelo do produto e seu atributo title. Podemos produzir a descrição do produto da mesma maneira usando {{ Descrição do produto }}.

Isso é conhecido em termos líquidos como resultado. Toda a saída é denotada por chaves duplas, da seguinte maneira: {{sua_ saída}}.

Lógica

Na próxima linha do código, você notará uma instrução entre chaves seguida por um%: neste caso, {% if product.available%}. Este é outro conceito importante no Liquid conhecido como lógica. Mais abaixo, você notará {% else%} e, finalmente, as instruções {% endif%}.

Esta declaração if permite-nos ditar o que o nosso modelo exibe, com base em uma ou mais condições: neste caso, se o nosso produto está ou não disponível. Efetivamente, isso significa: “se nosso produto estiver disponível, mostre as informações relacionadas a ele; caso contrário, mostre uma mensagem informando ao usuário que está em falta ”.

Todas as instruções lógicas em Liquid usam a notação de porcentagem de chaves, ou seja, {% if…%}. Apenas lembre-se de fechar suas declarações de maneira adequada ou você terá problemas. Por exemplo:

{% if product.available%}
Mostrar botão Adicionar ao carrinho aqui
{% senão %}
Exibir mensagem sobre quando o produto estará disponível na próxima vez
{% fim se %}

Filtros

O líquido nos permite manipular nossa produção de várias maneiras. Uma delas é usar filtros. O conteúdo que vai para o filtro sairá do outro lado alterado de maneira específica.

Olhando para o exemplo product.liquid acima, você notará { dinheiro }. Uma variante é um termo usado para descrever uma variação de um produto: por exemplo, cores e tamanhos diferentes. O que é interessante aqui é que usamos um filtro para alterar a produção de preço - neste caso, usando o filtro de dinheiro. Isso fará com que o símbolo da moeda da loja seja adicionado à frente do preço.

Outros filtros incluem strip_html, que removerá quaisquer tags HTML de um determinado trecho de texto e ucase, que irá convertê-lo para maiúsculas.

Você também pode juntar filtros. Por exemplo:

{article.content}

Neste caso, estamos pegando o atributo content da variável do template do artigo e passando para o filtro strip_html e finalmente para o filtro truncate. Você notará que o filtro de truncamento nos permite especificar quanto tempo queremos que a saída final seja: neste caso, 20 caracteres.

Os filtros também nos permitem fazer um trabalho rápido de criação de elementos de script e imagem em modelos. Esta é uma maneira muito rápida de usar um filtro para gerar uma imagem com uma tag alt associada:

{asset_url}

Usar isso em nosso tema Shopify resultará no seguinte elemento img sendo renderizado em nosso modelo:

img src = "/ files / shops / your_shop_number / assets / logo.png" alt = "Site Logo" />

O asset_url filtro é muito útil, pois retorna o caminho completo para o tema atual ativos pasta. O uso desse filtro permite que você aplique seu tema em várias lojas e não precise se preocupar com caminhos.

Qual é o próximo?

Felizmente, esses poucos exemplos mostraram que o Liquid não é tão complicado. Claro, há muito mais que você pode fazer com isso, mas ao dominar a saída, a lógica e os filtros, você está prestes a entender a maior parte do que será necessário para construir um tema do Shopify.