Olá, pessoal! 👋 Sou seu professor de Shopify e estou empolgado para mergulhar com vocês em mais uma aula avançada do nosso curso. Com mais de 10 anos de experiência construindo lojas incríveis, sei que esta aula é um divisor de águas para quem busca levar a personalização do Shopify a um outro nível.

Hoje, vamos desvendar o poder dos templates personalizados para produtos e coleções. Esqueça a ideia de que todo produto ou toda coleção precisa ter a mesma cara! Com esta técnica, você terá a flexibilidade para criar experiências de compra únicas e altamente otimizadas para diferentes tipos de produtos ou estratégias de coleção.

Preparem-se para sujar as mãos com um pouco de código Liquid e HTML, e ver como podemos criar designs verdadeiramente diferenciados! 🚀

Aula 34 – Loja Shopify do Zero ao Avançado: Templates personalizados para produtos e coleções

📚 O que você vai aprender nesta aula

Ao final desta aula, você será capaz de:

• Entender a necessidade e os benefícios dos templates personalizados para produtos e coleções.

Criar templates personalizados de product..liquid e collection.*.liquid no painel de controle do Shopify.

• Estruturar o conteúdo de templates personalizados utilizando seções existentes e novas.
• Atribuir templates personalizados a produtos e coleções específicos.
• Aplicar boas práticas ao desenvolver e gerenciar templates personalizados.
• Compreender a relação entre templates Liquid personalizados e os templates JSON do Online Store 2.0.

🔗 Conectando com aulas anteriores

Nas últimas aulas, exploramos profundamente a arquitetura de temas do Shopify (especialmente a do Online Store 2.0), criando e personalizando sections e blocks, e entendendo como o editor de temas funciona. Vimos como adicionar configurações (schema) a essas seções para torná-las flexíveis e editáveis pelo comerciante.

Até agora, nossas customizações focaram em modificar as seções padrão (main-product.liquid, main-collection.liquid) ou em adicionar seções globais que podem ser incluídas em qualquer lugar.

A aula de hoje é a evolução natural disso! Agora que vocês sabem construir blocos de conteúdo robustos (seções), vamos aprender a montar layouts completamente diferentes para produtos ou coleções específicas, combinando essas seções de maneiras únicas. Em vez de ter um modelo de página de produto, teremos vários, cada um com seu propósito e design. 💡

📖 Conteúdo Principal

Por que templates personalizados são essenciais?

Imagine que você vende eletrônicos e também joias. A página de um smartphone pode precisar de muitas especificações técnicas, vídeos de review, comparações. Já a página de um anel pode focar mais em fotos de alta qualidade, um guia de tamanhos específico, e informações sobre materiais e certificações.

Se você tentar encaixar tudo isso em um único main-product.liquid, o template ficaria sobrecarregado, difícil de gerenciar e pouco otimizado para ambos os tipos de produto. Templates personalizados resolvem isso, permitindo que você:

• Otimize a experiência do usuário: Crie layouts que se encaixem perfeitamente no tipo de produto ou coleção.
• Melhore a conversão: Destaque informações importantes e chame a atenção para elementos cruciais para a decisão de compra.
• Gerencie o conteúdo de forma mais eficiente: Mantenha o código limpo e organizado, dedicando seções específicas a cada template.
• Diferencie sua loja: Ofereça uma experiência de navegação e compra mais rica e profissional.

Entendendo os templates no Shopify (Online Store 2.0)

No Shopify Online Store 2.0, a abordagem padrão para templates de produto e coleção mudou significativamente, movendo muito do controle para arquivos JSON editáveis diretamente no personalizador de tema.

• Templates Padrão JSON:
• templates/product.json
• templates/collection.json

Estes arquivos JSON definem a ordem e as configurações das seções que aparecem na página. Eles são o que você edita ao arrastar e soltar seções no personalizador de tema. Por exemplo, product.json pode ter uma seção main-product, seguida por uma image-with-text, etc.

• Templates Liquid personalizados:

Apesar da ascensão dos templates JSON, os arquivos product..liquid e collection..liquid ainda são extremamente relevantes e poderosos, especialmente quando você precisa de um controle mais granular ou de lógicas complexas que não são facilmente alcançáveis apenas com o JSON.

Quando você cria um product..liquid ou collection..liquid, você está criando um arquivo Liquid que pode:

1. Chamar seções diretamente: Você define quais seções Liquid (como main-product, image-with-text, ou suas seções customizadas) serão renderizadas e em que ordem.

2. Incluir lógica Liquid complexa: Você pode adicionar condicionais, loops e outras lógicas Liquid diretamente no template, o que é mais difícil ou impossível de fazer com um template JSON puro.

3. Ter um controle total sobre a estrutura da página: Em vez de apenas reordenar seções, você pode alterar completamente o “esqueleto” da página.

Quando você cria um novo template personalizado, o Shopify geralmente o inicializa com uma estrutura básica que chama uma seção principal (e.g., {% section 'main-product' %}). A partir daí, a personalização é ilimitada!

Criando seu primeiro template personalizado product.*.liquid

Vamos criar um template de produto chamado product.video.liquid, que terá uma seção de vídeo em destaque abaixo da descrição do produto.

Passo 1: Acessar o editor de código do tema

1. No seu admin Shopify, vá em Loja Virtual > Temas.

2. No tema ativo (ou no tema que você está desenvolvendo), clique em Ações > Editar código.

Passo 2: Criar um novo template

1. Na barra lateral esquerda, na seção Templates, clique em Adicionar novo template.

2. Uma janela pop-up aparecerá:

• Tipo de template: Selecione Product.
• Nome do arquivo: Digite video.
• (Opcional) Baseado em: Você pode escolher um template existente para começar. Por padrão, ele geralmente copia o product.json (que por sua vez chama main-product). Para esta aula, vamos começar do zero com uma estrutura Liquid.

Clique em Criar template.

Você verá um novo arquivo templates/product.video.liquid na lista.

Passo 3: Estruturar o template product.video.liquid

Ao abrir o arquivo product.video.liquid, ele pode vir com um conteúdo padrão como:

{% comment %}
The contents of the product.video.liquid template can be found in /sections/main-product.liquid
{% endcomment %}
{% section 'main-product' %}

Este código significa que seu template product.video.liquid está simplesmente chamando a seção main-product. Para personalizá-lo, vamos adicionar uma nova seção de vídeo abaixo da seção principal do produto.

Para isso, vamos primeiro criar a seção product-video-section.liquid.

Passo 4: Criar uma nova seção product-video-section.liquid

1. Na seção Sections da barra lateral, clique em Adicionar nova seção.

2. Dê o nome product-video-section. Clique em Done.

3. Edite o conteúdo de sections/product-video-section.liquid:

{% if section.settings.video_url != blank %}
{{ section.settings.heading }}

{{ section.settings.video_url | video_tag: class: 'lazyload' }}

{% if section.settings.description != blank %}

{{ section.settings.description }}

{% endif %}
{% else %}
Nenhum vídeo configurado para esta seção.

{% endif %}


{% schema %}
{
"name": "Seção de Vídeo do Produto",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Título da Seção",
"default": "Assista ao Vídeo do Produto"
},
{
"type": "video_url",
"id": "video_url",
"label": "URL do Vídeo",
"accepts": [
"youtube",
"vimeo"
],
"info": "Cole o link de um vídeo do YouTube ou Vimeo."
},
{
"type": "richtext",
"id": "description",
"label": "Descrição do Vídeo"
}
],
"presets": [
{
"name": "Seção de Vídeo do Produto"
}
]
}
{% endschema %}

Salvo? Ótimo! Agora temos a seção de vídeo que queremos incluir.

Passo 5: Incluir a nova seção no template product.video.liquid

Volte para o arquivo templates/product.video.liquid e edite-o para incluir sua nova seção:

{% comment %}
Template personalizado para produtos com destaque para vídeo.
Chama a seção principal do produto e, em seguida, uma seção dedicada a vídeos.
{% endcomment %}
{% section 'main-product' %} {# Renderiza o conteúdo principal do produto #}
{% section 'product-video-section' %} {# Renderiza a nova seção de vídeo #}

Dica: Você também pode passar settings para a seção diretamente do template, por exemplo:

{% section 'product-video-section', heading: 'Vídeo Exclusivo!' %}

No entanto, para video_url e description, é melhor que sejam configuráveis no personalizador.

Criando seu primeiro template personalizado collection.*.liquid

Agora, vamos criar um template de coleção chamado collection.full-width.liquid que terá um layout de grade de produtos que ocupa a largura total da tela, sem barra lateral.

Passo 1: Adicionar novo template de coleção

1. No editor de código do tema, na seção Templates, clique em Adicionar novo template.

2. Tipo de template: Selecione Collection.

3. Nome do arquivo: Digite full-width.

4. Clique em Criar template.

Você terá um novo arquivo templates/collection.full-width.liquid.

Passo 2: Estruturar o template collection.full-width.liquid

Por padrão, ele pode vir com:

{% comment %}
The contents of the collection.full-width.liquid template can be found in /sections/main-collection.liquid
{% endcomment %}
{% section 'main-collection' %}

Vamos criar uma nova seção main-collection-full-width.liquid que renderizará a grade de produtos de uma forma diferente.

Passo 3: Criar uma nova seção main-collection-full-width.liquid

Vamos simplificar e criar uma seção que não terá barra lateral e ajustará as classes CSS para que os produtos ocupem toda a largura. Para isso, podemos copiar a main-collection.liquid e remover a barra lateral e fazer alguns ajustes CSS.

1. Na seção Sections, clique em Adicionar nova seção.

2. Dê o nome main-collection-full-width. Clique em Done.

3. Copie o conteúdo do seu tema de sections/main-collection.liquid e cole em sections/main-collection-full-width.liquid. (Os temas variam, então copie o seu!).

• Exemplo simplificado de alterações a serem feitas:
• Procure por elementos de barra lateral (sidebar, filters, facets). Remova-os ou envolva-os em um if false para desativá-los.
• Ajuste as classes CSS que controlam a largura da grade principal de produtos (e.g., de grid__item medium-up:one-half para grid__item one-whole).

Para fins didáticos, vamos fazer uma versão bem simplificada, focando em chamar a grade de produtos e omitindo a barra lateral:

{{ collection.title }}
 
📚 Informações da Aula
 
Nível: Intermediário
 
Tempo estimado: 15-20 minutos
 

{% if collection.description != blank %}
{{ collection.description }}
{% endif %}

{% comment %}
Aqui você renderizaria os produtos.
Em um tema real, esta parte seria muito mais complexa,
incluindo paginação, ordenação, etc., e provavelmente
seria um snippet ou um include.
{% endcomment %}
{% paginate collection.products by 12 %}

{% for product in collection.products %}
{% render 'product-card', product: product, show_vendor: section.settings.show_vendor %}
{% else %}
Nenhum produto encontrado nesta coleção.

{% endfor %}

{% if paginate.pages > 1 %}
{% render 'pagination', paginate: paginate %}
{% endif %}
{% endpaginate %}


{% schema %}
{
"name": "Coleção Largura Total",
"settings": [
{
"type": "checkbox",
"id": "show_vendor",
"label": "Mostrar Fornecedor",
"default": false
}
],
"presets": [
{
"name": "Coleção Largura Total"
}
]
}
{% endschema %}

Nota: O snippet product-card e pagination são assumidos como existentes no seu tema. Se não existirem, você precisaria criá-los ou adaptar o código.

Passo 4: Incluir a nova seção no template collection.full-width.liquid

Volte para o arquivo templates/collection.full-width.liquid e edite-o:

{% comment %}
Template personalizado para coleções com layout de largura total, sem barra lateral.
{% endcomment %}
{% section 'main-collection-full-width' %} {# Renderiza a nova seção de coleção full-width #}

Atribuindo o template a um produto/coleção

Esta é a parte onde o “mágico” acontece no admin do Shopify!

Para um Produto:

1. No seu admin Shopify, vá em Produtos.

2. Selecione o produto ao qual você deseja aplicar o template product.video.liquid.

3. Na página de edição do produto, no canto inferior direito, você verá uma caixa de seleção chamada Tema (Theme).

4. No dropdown Template de tema (Theme template), selecione product.video.

5. Clique em Salvar.

6. Agora, visualize o produto na loja e você verá a seção de vídeo (que estará vazia por enquanto, mas já visível no personalizador!).

Para uma Coleção:

1. No seu admin Shopify, vá em Produtos > Coleções.

2. Selecione a coleção à qual você deseja aplicar o template collection.full-width.liquid.

3. Na página de edição da coleção, no canto inferior direito, você verá uma caixa de seleção chamada Tema (Theme).

4. No dropdown Template de tema (Theme template), selecione collection.full-width.

5. Clique em Salvar.

6. Visualize a coleção na loja e veja a diferença no layout (sem barra lateral, largura total).

Boas Práticas e Otimização 🧑‍🏫

• Reutilize Seções: Não crie uma seção nova para cada template se você puder adaptar uma existente. Por exemplo, uma seção de “texto com imagem” pode ser usada em vários templates.
• Nomeclatura Clara: Use nomes descritivos para seus templates (e.g., product.pre-order.liquid, collection.lookbook.liquid). Isso facilita a identificação no admin.
• Modularização: Quebre templates complexos em seções menores e gerenciáveis.
• Performance: Cuidado com a adição excessiva de seções ou lógica complexa que possa impactar o tempo de carregamento da página. Use o lazyload para imagens e vídeos quando possível.
• Comentários no Código: Sempre adicione comentários ao seu código Liquid e CSS para explicar o propósito e a funcionalidade.
• Testes: Teste exaustivamente seus templates em diferentes dispositivos e navegadores.
• Documentação: Se você estiver trabalhando em um projeto maior ou para um cliente, documente a finalidade de cada template personalizado.
• Considerar Metafields: Para dados específicos de produtos/coleções que variam (como um link de vídeo diferente para cada produto), use Metafields em vez de criar dezenas de templates. A aula sobre Metafields está chegando e complementará perfeitamente este conhecimento!

💻 Exemplos Práticos

Vamos revisitar os exemplos acima e mostrar como ficaria no editor de tema para configurar as seções.

Exemplo 1: Configurando o Template de Produto com Vídeo (product.video.liquid)

1. Crie o Template e a Seção (conforme passos anteriores).

2. Atribua o template product.video a um produto.

3. Vá para o Personalizador de Tema:

• No admin, vá em Loja Virtual > Temas > Personalizar.
• No menu superior, selecione Produtos > [Seu Produto com Template “video”].
• No painel esquerdo, você verá as seções do seu template. Clique em Seção de Vídeo do Produto.
• Adicione um Título da Seção, cole a URL do Vídeo (YouTube/Vimeo) e adicione uma Descrição do Vídeo.
• Clique em Salvar.

Screenshot Conceitual (você pode imaginar isso no personalizador):

[Screenshot imaginário do personalizador de tema]
Painel esquerdo:
-> Template de Produto (product.video)
-> Header
-> Main Product
-> Seção de Vídeo do Produto (Custom)
[ Campo: Título da Seção: "Assista nossa review!" ]
[ Campo: URL do Vídeo: "https://www.youtube.com/watch?v=..." ]
[ Campo: Descrição do Vídeo: "Conheça todos os detalhes..." ]
-> Footer
Visualização da página de produto com o vídeo incorporado abaixo da descrição.

Exemplo 2: Configurando o Template de Coleção Full-Width (collection.full-width.liquid)

1. Crie o Template e a Seção (conforme passos anteriores).

2. Atribua o template collection.full-width a uma coleção.

3. Vá para o Personalizador de Tema:

• No admin, vá em Loja Virtual > Temas > Personalizar.
• No menu superior, selecione Coleções > [Sua Coleção com Template “full-width”].
• No painel esquerdo, você verá as seções do seu template. Clique em Coleção Largura Total.
• Você terá a opção Mostrar Fornecedor. Ative-a ou desative-a.
• Clique em Salvar.

Screenshot Conceitual (você pode imaginar isso no personalizador):

[Screenshot imaginário do personalizador de tema]
Painel esquerdo:
-> Template de Coleção (collection.full-width)
-> Header
-> Coleção Largura Total (Custom)
[ Checkbox: Mostrar Fornecedor: [ ] ]
-> Footer
Visualização da página de coleção com os produtos em uma grade de largura total, sem barra lateral.

🎯 Exercícios e Desafios

Para solidificar o que aprendemos hoje, aqui estão alguns desafios:

1. Template de Produto para Pré-Venda:

• Crie um template product.pre-order.liquid.
• Neste template, substitua o botão “Adicionar ao Carrinho” padrão por um botão “Pré-Venda” ou “Notifique-me”.
• Adicione uma seção personalizada ao template que exiba uma contagem regressiva para o lançamento do produto e um campo de e-mail para notificação. (Dica: A contagem regressiva e o formulário podem ser um desafio de JavaScript, mas o foco é a estrutura do template e da seção).
• Atribua este template a um produto fictício de “pré-venda”.

2. Template de Coleção para Lançamento:

• Crie um template collection.new-arrival.liquid.
• Neste template, o layout dos produtos deve ser diferente: talvez um card maior para os 3 primeiros produtos, e os demais em um grid menor.
• Adicione uma seção no topo que mostre um banner de “Novos Lançamentos” com um texto impactante e um link para uma categoria especial.
• Atribua este template a uma coleção de “Novidades”.

📝 Resumo da Aula

Ufa! Que aula produtiva, não é mesmo? Hoje, aprendemos a ir além das customizações básicas do tema:

• Compreendemos a importância de templates personalizados para diferentes necessidades de produtos e coleções.

Dominamos a criação de arquivos product..liquid e collection.*.liquid.

• Aprendemos a estruturar esses templates, chamando seções existentes ou criando novas para atender a propósitos específicos.
• Vimos como atribuir esses templates aos produtos e coleções no painel do Shopify.
• Revisamos as boas práticas para manter nosso código limpo, eficiente e de fácil manutenção.

Os templates personalizados são ferramentas poderosas que oferecem flexibilidade sem precedentes no design da sua loja, permitindo que você crie experiências de usuário altamente segmentadas e otimizadas.

🚀 Preparação para próxima aula

Na próxima aula, vamos levar a personalização ainda mais longe, combinando o que aprendemos hoje com o poder dos Metafields e Metaobjects. Vocês verão como armazenar dados dinâmicos e específicos para cada produto ou coleção (como vídeos exclusivos, guias de tamanho complexos ou informações adicionais de entrega) e, em seguida, como exibir esses dados em seus templates personalizados.

Este conhecimento é fundamental para criar lojas verdadeiramente robustas e escaláveis, reduzindo a necessidade de templates excessivamente complexos ou de apps de terceiros para cada pedacinho de informação.

📚 Recursos Adicionais

• Documentação Oficial do Shopify sobre Templates: https://shopify.dev/docs/themes/architecture/templates
• Documentação sobre o objeto product no Liquid: https://shopify.dev/docs/api/liquid/objects/product
• Documentação sobre o objeto collection no Liquid: https://shopify.dev/docs/api/liquid/objects/collection
• Tutoriais sobre como adicionar seções a temas Shopify: (Você pode procurar por “Shopify add custom section OS 2.0” no YouTube ou Google para mais exemplos visuais).

Até a próxima, pessoal! Continuem praticando e explorando as infinitas possibilidades do Shopify! 💪