Seu carrinho está vazio no momento!

Olá, turma! Sejam muito bem-vindos à nossa Aula 37! 👋 Que bom ter vocês aqui novamente para darmos um passo gigante em direção à maestria no Shopify.
Nas últimas aulas, construímos a base da nossa loja, personalizamos o visual, otimizamos o SEO e até adicionamos funcionalidades interativas. Vimos como os blocos e seções personalizadas nos dão um bom controle sobre o layout e o conteúdo. Mas e se quisermos ir além do que o tema oferece nativamente? E se precisarmos adicionar dados específicos e complexos aos nossos produtos, coleções ou páginas, sem sobrecarregar o painel administrativo ou o código do tema?
É exatamente para isso que servem os Metafields Avançados! 🚀 Preparem-se para descobrir como esses poderosos recursos podem transformar a flexibilidade da sua loja, permitindo que você gerencie dados customizados de forma estruturada e eficiente.
—
Aula 37 – Loja Shopify do Zero ao Avançado: Metafields avançados para dados customizados
📚 O que você vai aprender nesta aula
Nesta aula, vamos mergulhar fundo no mundo dos Metafields e desvendar seu potencial para criar lojas Shopify verdadeiramente únicas e escaláveis. Ao final, você será capaz de:
- Compreender o conceito de Metafields e por que eles são cruciais para dados customizados e avançados.
- Identificar os diferentes tipos de Metafields disponíveis e escolher o mais adequado para cada cenário.
- Criar e gerenciar definições de Metafields diretamente no painel administrativo da Shopify.
- Preencher dados em Metafields para produtos, coleções, páginas e outros recursos da loja.
- Acessar e exibir dados de Metafields no frontend da loja usando a linguagem Liquid.
- Implementar exemplos práticos de uso de Metafields para adicionar informações técnicas, galerias personalizadas e produtos relacionados.
- Aplicar boas práticas na organização e uso de Metafields para otimização e escalabilidade da loja.
🔗 Conectando com aulas anteriores
Lembram-se de quando estávamos personalizando produtos ou coleções nas aulas sobre customização de tema (Aulas 15-20) e SEO (Aulas 25-28)? Muitas vezes, nos deparamos com a necessidade de adicionar um campo extra, uma informação que não existia nos campos padrão da Shopify. Talvez queríamos adicionar “Material de Fabricação” a um produto ou um “Vídeo de Apresentação” a uma coleção. Na época, talvez tenhamos usado um campo de texto livre ou até mesmo “hardcoded” (codificado diretamente no tema) algumas informações, o que não é escalável nem fácil de gerenciar.
Os Metafields chegam para resolver essa dor! Eles nos permitem estender o modelo de dados padrão da Shopify, adicionando campos personalizados a praticamente qualquer recurso. Pensem neles como campos adicionais que você pode criar para armazenar qualquer tipo de informação que a Shopify não oferece por padrão, mas que é essencial para o seu negócio. É a evolução natural para ir além das seções e blocos, permitindo customizar os dados por trás do conteúdo.
📖 Conteúdo Principal
O que são Metafields? Uma revisão rápida e aprofundada
Metafields são, em sua essência, campos de dados personalizados que você pode anexar a recursos padrão da Shopify, como:
- Produtos 📦
- Coleções 🏷️
- Clientes 🧑🤝🧑
- Pedidos 🛒
- Páginas 📄
- Blogs e Artigos de Blog ✍️
- Variantes de Produto 📏
- A Empresa (informações globais da sua loja) 🌐
- Locais (lojas físicas) 📍
Pense assim: um produto na Shopify tem campos padrão como “Título”, “Descrição”, “Preço”, “SKU”, “Imagens”, etc. Mas e se o seu produto for um vinho e você quiser adicionar “Safra”, “Vinícola”, “País de Origem” e “Temperatura Ideal de Serviço”? Sem os Metafields, você teria que colocar tudo na descrição ou criar opções de variante desnecessárias. Com Metafields, você cria campos específicos para cada uma dessas informações, tornando os dados estruturados, fáceis de gerenciar e de exibir no frontend.
Por que Metafields são “avançados”?
Eles são avançados porque nos permitem:
1. Flexibilidade Extrema: A loja não fica limitada aos campos pré-definidos da Shopify.
2. Conteúdo Dinâmico: Crie conteúdo que pode ser atualizado facilmente pelo painel administrativo, sem tocar no código.
3. Estrutura de Dados Rica: Organize informações complexas de forma lógica e acessível.
4. Integração Poderosa: Essencial para lojas que buscam uma experiência de usuário única, integração com outras plataformas ou até mesmo arquiteturas headless.
Tipos de Metafields: A Escolha Certa para Cada Dado
A Shopify oferece uma vasta gama de tipos de Metafields, garantindo que você possa armazenar seus dados da forma mais adequada. A escolha do tipo correto é fundamental para a integridade dos dados e para facilitar sua manipulação no Liquid.
Aqui estão os principais tipos e suas aplicações:
- Texto:
- Linha única de texto: Perfeito para informações curtas como “Cor principal”, “Marca”, “Código do fornecedor”.
- Lista de linhas únicas de texto: Para múltiplos valores curtos, ex: “Ingredientes chave”.
- Texto de várias linhas: Para descrições mais longas, observações, “História do produto”.
- Texto formatado (Rich text): Permite formatação (negrito, itálico, links, listas) diretamente no admin. Ideal para “Instruções de cuidado” ou “Perguntas Frequentes” numa página de produto.
- Número:
- Inteiro: Para números sem casas decimais, ex: “Quantidade em estoque mínima”, “Número de revisões”.
- Decimal: Para números com casas decimais, ex: “Peso em kg”, “Pontuação média”.
- Booleano: Um simples “verdadeiro” ou “falso”, ideal para flags como “Produto em destaque”, “Disponível para pré-venda”.
- Data: Para datas específicas, ex: “Data de lançamento”, “Data de validade”.
- Data e hora: Para informações que precisam de data e hora, ex: “Horário de agendamento”.
- URL: Para links externos ou internos, ex: “Link para vídeo do produto”, “Link para manual em PDF”.
- Cor: Para selecionar uma cor específica, útil para “Cor da embalagem”.
- Arquivo: Permite fazer upload de arquivos.
- Imagem: Para imagens adicionais que não são da galeria principal, “Certificado de autenticidade”.
- Vídeo: Para vídeos que não sejam do YouTube/Vimeo, “Vídeo de demonstração”.
- Qualquer tipo de arquivo: PDFs, documentos, etc., “Manual do usuário”.
- Lista de arquivos: Para múltiplas imagens ou documentos, “Galeria de detalhes”.
- JSON: Um dos mais poderosos para dados estruturados complexos. Permite armazenar um objeto JSON ou uma lista de objetos JSON. Essencial para “Especificações técnicas” (ex:
[{"atributo": "Material", "valor": "Algodão"}, {"atributo": "Dimensões", "valor": "PPxLL"}]). - Referência: Permite linkar um recurso a outro.
- Página: Para linkar uma página específica, ex: “Página de política de devolução relacionada”.
- Produto: Para “Produtos relacionados”, “Acessórios complementares”.
- Coleção: Para “Coleção principal”.
- Cliente, Pedido, Blog, Artigo de Blog: Para cenários específicos.
- Lista de referências: Para múltiplos produtos, páginas ou coleções relacionadas.
- Medida: Para armazenar valores com unidades específicas (peso, volume, dimensão). Útil para “Dimensões da embalagem” (cm x cm x cm).
Criando Metafields no Admin da Shopify
Vamos para a prática! A criação de Metafields é feita diretamente no seu painel administrativo.
1. Navegue até “Configurações” (Settings) ⚙️ no menu lateral.
2. Clique em “Dados personalizados” (Custom data).
3. Você verá uma lista dos recursos da Shopify que podem ter Metafields (Produtos, Variantes, Coleções, Páginas, etc.).
4. Clique no recurso para o qual você quer criar um Metafield. Por exemplo, vamos clicar em “Produtos”.
5. Clique em “Adicionar definição” (Add definition).
(Placeholder de Screenshot: Página de “Dados personalizados” mostrando a lista de recursos e o botão “Adicionar definição”)
6. Preencha os detalhes da Definição do Metafield:
- Nome (Name): Um nome descritivo que aparecerá no admin para facilitar o preenchimento (ex: “Origem do Tecido”, “Guia de Tamanhos”).
- Namespace e chave (Namespace and key): MUITO IMPORTANTE! Este é o identificador único que você usará no Liquid para acessar o Metafield.
- Namespace: Uma categoria para seus Metafields. Por padrão, a Shopify sugere
custom. É uma boa prática usar um namespace que agrupe Metafields relacionados (ex:theme,app,product_details). - Chave (Key): O nome específico do seu Metafield. Use
snake_case(ex:origem_tecido,peso_gramatura). - Exemplo:
custom.origem_tecidoouproduct_details.garantia.
Dica de Boas Práticas:* Mantenha namespaces e chaves consistentes e significativos.
- Descrição (Description): Opcional, mas útil para explicar o propósito do Metafield para quem for preencher.
- Tipo de conteúdo (Content type): Selecione o tipo de dado que este Metafield armazenará (Texto de linha única, Imagem, Referência de produto, JSON, etc.).
- Ao escolher o tipo, você pode definir regras de validação (ex: mínimo/máximo de caracteres para texto, apenas imagens para arquivos).
- Opções:
- Recursos: Garante que este Metafield apareça no painel de edição de produtos.
- Acesso ao storefront: Permite que o Metafield seja acessado via Liquid no frontend. Sempre marque esta opção se você planeja exibir o dado na sua loja.
(Placeholder de Screenshot: Formulário “Adicionar definição de Metafield” preenchido com um exemplo)
7. Clique em “Salvar” (Save).
Parabéns! Você criou sua primeira definição de Metafield. Agora, vamos preenchê-la.
Preenchendo Dados de Metafields
Depois de criar uma definição, o Metafield aparecerá automaticamente na seção de edição do recurso correspondente.
1. Vá para a página de edição de um Produto (ou Coleção, Página, etc.).
2. Role a página para baixo. Você verá uma seção chamada “Metafields”.
3. Clique no Metafield que você criou (ex: “Origem do Tecido”) e preencha o valor.
(Placeholder de Screenshot: Página de edição de produto mostrando a seção “Metafields” e o campo de preenchimento)
4. Clique em “Salvar” no produto/recurso.
Os dados agora estão armazenados e prontos para serem acessados!
Acessando Metafields no Liquid
Esta é a parte onde a mágica acontece no seu tema! Para exibir um Metafield, você precisa saber como referenciá-lo no Liquid.
A sintaxe geral é: {{ recurso.metafields.namespace.key }}
Onde:
-
recurso: O objeto Liquid que representa o item (ex:product,collection,page,shop). -
metafields: Propriedade que contém todos os Metafields anexados ao recurso. -
namespace: O namespace que você definiu (ex:custom,theme). -
key: A chave do Metafield que você definiu (ex:origem_tecido,guia_tamanhos).
Exemplos Comuns:
- Metafield de Produto:
{{ product.metafields.custom.origem_tecido }} - Metafield de Coleção:
{{ collection.metafields.theme.banner_image }} - Metafield de Página:
{{ page.metafields.info.seo_description }} - Metafield Global (Loja):
{{ shop.metafields.general.telefone_contato }}
Lidando com Diferentes Tipos de Dados no Liquid
Cada tipo de Metafield retorna um valor de uma forma ligeiramente diferente:
- Texto, Número, Booleano, Cor, URL: Retornam o valor diretamente.
- Ex:
{{ product.metafields.custom.fabric_origin }} - Texto Formatado (Rich Text): Retorna HTML.
- Ex:
{{ product.metafields.custom.instructions_html }} - Data e Data e Hora: Retornam objetos de data, que podem ser formatados com o filtro
date. - Ex:
{{ product.metafields.custom.release_date | date: "%d/%m/%Y" }} - Arquivo (Imagem/Vídeo): Retorna um objeto de arquivo. Para exibir, você usará filtros de URL de imagem/vídeo.
- Ex:
- JSON: Retorna um objeto ou lista que você pode iterar ou acessar suas propriedades. MUITO IMPORTANTE: Para acessar os dados internos de um JSON Metafield, use a propriedade
.value. - Ex:
{% for item in product.metafields.custom.json_data.value %} - Referência (Produto/Coleção/Página): Retorna o objeto do recurso referenciado. Você pode então acessar suas propriedades.
- Ex:
{{ product.metafields.custom.related_product.title }} - Lista de Referências ou Lista de Arquivos: Retorna um array/lista de objetos. Você precisará iterar sobre eles com um loop
for. MUITO IMPORTANTE: Para acessar os dados internos de uma lista de referências, use a propriedade.value. - Ex:
{% for item in product.metafields.custom.list_of_images.value %} - Ex:
{% for related_product in product.metafields.custom.list_of_related_products.value %}
Exibindo Metafields no Frontend (Liquid & HTML/CSS/JS)
Agora que sabemos como acessar, vamos integrar no tema! Você modificará os arquivos .liquid relevantes para o recurso que você está customizando.
Onde geralmente você adiciona o código:
- Produtos:
sections/main-product.liquid,templates/product.liquid(se o tema não usar seções para o produto). - Coleções:
sections/main-collection.liquid,templates/collection.liquid. - Páginas:
templates/page.liquid. - Qualquer lugar: Se for um Metafield global (
shop.metafields), pode ir emsections/header.liquid,sections/footer.liquidoulayout/theme.liquid.
Dicas de Implementação:
1. Verificação de Existência: Sempre verifique se o Metafield existe e se tem valor antes de tentar exibi-lo. Isso evita erros e conteúdo vazio na loja. Use {% if recurso.metafields.namespace.key != blank %} ou {% if recurso.metafields.namespace.key %}.
2. Formatação CSS/JS: Envolva os Metafields em elementos HTML (div, p, span) com classes para que você possa estilizá-los com CSS e, se necessário, adicionar interatividade com JavaScript.
3. Localização: Pense bem onde no layout da página essa informação faz mais sentido para o usuário.
💻 Exemplos Práticos
Vamos colocar a mão na massa com alguns cenários comuns e muito úteis!
—
Exemplo 1: Adicionar Especificações Técnicas Detalhadas a um Produto
Imagine que você vende eletrônicos e quer adicionar “Material da Carcaça”, “Tipo de Bateria” e “Observações Adicionais” para cada produto.
Passo a passo:
1. Crie os Metafields no Admin (Configurações > Dados personalizados > Produtos):
- Definição 1:
- Nome:
Material da Carcaça - Namespace e chave:
custom.material_carcaca - Tipo:
Linha única de texto - Acesso ao storefront: Sim
- Definição 2:
- Nome:
Tipo de Bateria - Namespace e chave:
custom.tipo_bateria - Tipo:
Linha única de texto - Acesso ao storefront: Sim
- Definição 3:
- Nome:
Observações Adicionais - Namespace e chave:
custom.observacoes_adicionais - Tipo:
Texto formatado (Rich text) - Acesso ao storefront: Sim
(Placeholder de Screenshot: Três definições de metafields criadas para produtos no admin)
2. Preencha os Metafields em um Produto:
- Vá para a edição de um produto e preencha os novos campos na seção “Metafields”.
(Placeholder de Screenshot: Página de edição de produto com os metafields preenchidos)
3. Adicione o Código Liquid no Tema:
- Edite seu tema (
Online Store > Temas > Ações > Editar código). - Abra o arquivo
sections/main-product.liquid(ou similar, dependendo do seu tema). - Localize um ponto onde faria sentido exibir essas informações, talvez abaixo da descrição do produto ou das variantes.
{% comment %}
Bloco para exibir especificações técnicas do produto usando metafields
{% endcomment %}
{% assign material_carcaca = product.metafields.custom.material_carcaca %}
{% assign tipo_bateria = product.metafields.custom.tipo_bateria %}
{% assign observacoes_adicionais = product.metafields.custom.observacoes_adicionais %}
{% if material_carcaca != blank or tipo_bateria != blank or observacoes_adicionais != blank %}
Detalhes Técnicos
{% if material_carcaca != blank %}
- Material da Carcaça: {{ material_carcaca }}
{% endif %}
{% if tipo_bateria != blank %}
- Tipo de Bateria: {{ tipo_bateria }}
{% endif %}
{% if observacoes_adicionais != blank %}
Observações:
{{ observacoes_adicionais }}
{% endif %}
{% endif %}
.product-specs-detail {
margin-top: 30px;
padding: 20px;
border: 1px solid #e0e0e0;
border-radius: 8px;
background-color: #f9f9f9;
}
.product-specs-title {
font-size: 1.4em;
color: #333;
margin-bottom: 15px;
border-bottom: 2px solid #007bff;
padding-bottom: 5px;
}
.product-specs-list {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.product-specs-list li {
margin-bottom: 8px;
font-size: 1em;
color: #555;
}
.product-additional-notes h4 {
font-size: 1.2em;
color: #444;
margin-bottom: 10px;
}
.product-additional-notes p { / Como rich text pode vir em , estilizar
/
line-height: 1.6;
}
(Placeholder de Screenshot: Página de produto com as novas especificações visíveis)
—
Exemplo 2: Criar uma Galeria de Imagens Adicional para um Produto
Às vezes, as imagens padrão de um produto não são suficientes. Você pode querer uma galeria de “ângulos especiais” ou “detalhes de perto”.
Passo a passo:
1. Crie o Metafield no Admin (Configurações > Dados personalizados > Produtos):
- Definição:
- Nome:
Galeria Adicional do Produto - Namespace e chave:
custom.galeria_adicional - Tipo:
Lista de arquivos(certifique-se de restringir aImagens) - Acesso ao storefront: Sim
(Placeholder de Screenshot: Definição de metafield “Lista de arquivos” para imagens)
2. Preencha o Metafield em um Produto:
- Vá para a edição de um produto e, na seção “Metafields”, adicione várias imagens ao campo
Galeria Adicional do Produto.
(Placeholder de Screenshot: Página de edição de produto com múltiplas imagens adicionadas ao metafield “Galeria Adicional”)
3. Adicione o Código Liquid no Tema:
- Edite
sections/main-product.liquid.
{% comment %}
Bloco para exibir uma galeria de imagens adicional via metafield
{% endcomment %}
{% assign additional_images = product.metafields.custom.galeria_adicional.value %}
{% if additional_images != blank and additional_images.size > 0 %}
Mais Detalhes
{% endif %}
.product-additional-gallery {
margin-top: 30px;
padding: 20px;
border: 1px solid #e0e0e0;
border-radius: 8px;
background-color: #f9f9f9;
}
.product-gallery-title {
font-size: 1.4em;
color: #333;
margin-bottom: 15px;
border-bottom: 2px solid #007bff;
padding-bottom: 5px;
}
.image-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 15px;
}
.image-grid img {
width: 100%;
height: auto;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: transform 0.2s ease-in-out;
}
.image-grid img:hover {
transform: scale(1.03);
}
- Observação: Para uma galeria funcional com “lightbox” ou zoom, você precisaria de JavaScript adicional. O código acima apenas exibe as imagens em um grid, mas o
data-lightboxé um gancho para integrar uma biblioteca JS de lightbox posteriormente.
(Placeholder de Screenshot: Página de produto com a galeria de imagens adicional visível)
—
Exemplo 3: Listar Produtos Relacionados Manuais para um Produto Específico
Você tem produtos que sempre quer sugerir como “complementares” para um item específico, mas as recomendações automáticas da Shopify não são ideais.
Passo a passo:
1. Crie o Metafield no Admin (Configurações > Dados personalizados > Produtos):
- Definição:
- Nome:
Produtos Relacionados Manuais - Namespace e chave:
custom.produtos_relacionados_manual - Tipo:
Lista de referências(e selecioneProdutos) - Acesso ao storefront: Sim
(Placeholder de Screenshot: Definição de metafield “Lista de referências” para produtos)
2. Preencha o Metafield em um Produto:
- Vá para a edição de um produto e adicione alguns produtos relacionados no campo
Produtos Relacionados Manuais.
(Placeholder de Screenshot: Página de edição de produto com vários produtos adicionados ao metafield “Produtos Relacionados”)
3. Adicione o Código Liquid no Tema:
- Edite
sections/main-product.liquid.
{% comment %}
Bloco para exibir produtos relacionados manualmente via metafield
{% endcomment %}
{% assign manual_related_products = product.metafields.custom.produtos_relacionados_manual.value %}
{% if manual_related_products != blank and manual_related_products.size > 0 %}
{% endif %}
.manual-related-products {
margin-top: 30px;
padding: 20px;
border: 1px solid #e0e0e0;
border-radius: 8px;
background-color: #f9f9f9;
}
.related-products-title {
font-size: 1.4em;
color: #333;
margin-bottom: 15px;
border-bottom: 2px solid #007bff;
padding-bottom: 5px;
}
.product-grid-related {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 20px;
}
.related-product-item {
text-align: center;
border: 1px solid #eee;
border-radius: 8px;
padding: 15px;
background-color: #fff;
transition: box-shadow 0.2s ease-in-out;
}
.related-product-item:hover {
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.related-product-link {
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
align-items: center;
}
.related-product-item img {
max-width: 100%;
height: auto;
border-radius: 5px;
margin-bottom: 10px;
}
.related-product-title {
font-weight: bold;
margin-bottom: 5px;
color: #333;
font-size: 1.1em;
}
.related-product-price {
color: #007bff;
font-weight: bold;
}
.placeholder-image {
width: 150px;
height: 150px;
background-color: #e0e0e0;
border-radius: 5px;
margin-bottom: 10px;
display: inline-block; / Para centralizar /
}
(Placeholder de Screenshot: Página de produto com os produtos relacionados adicionados manualmente visíveis)
—
Exemplo 4: Usar um JSON Metafield para Dados Estruturados e Flexíveis
Para informações complexas ou que podem mudar de estrutura, o JSON Metafield é ideal. Imagine “Informações Nutricionais” ou “Tabela de Medidas” com várias linhas e colunas.
Passo a passo:
1. Crie o Metafield no Admin (Configurações > Dados personalizados > Produtos):
- Definição:
- Nome:
Informações Nutricionais - Namespace e chave:
custom.info_nutricional_json - Tipo:
JSON - Acesso ao storefront: Sim
(Placeholder de Screenshot: Definição de metafield do tipo JSON)
2. Preencha o Metafield em um Produto:
- Vá para a edição de um produto e, na seção “Metafields”, cole um JSON válido no campo
Informações Nutricionais.
Exemplo de JSON:
json
[
{"nutriente": "Calorias", "valor": "200 kcal", "porcao": "100g"},
{"nutriente": "Carboidratos", "valor": "25g", "porcao": "100g"},
{"nutriente": "Proteínas", "valor": "10g", "porcao": "100g"},
{"nutriente": "Gorduras", "valor": "8g", "porcao": "100g"}
]
(Placeholder de Screenshot: Página de edição de produto com o JSON preenchido no metafield)
3. Adicione o Código Liquid no Tema:
- Edite
sections/main-product.liquid.
{% comment %}
Bloco para exibir informações nutricionais via JSON metafield
{% endcomment %}
{% assign nutritional_info = product.metafields.custom.info_nutricional_json.value %}
{% if nutritional_info != blank and nutritional_info.size > 0 %}
Informações Nutricionais (por 100g)
Nutriente
Valor
{% for item in nutritional_info %}
{{ item.nutriente }}
{{ item.valor }}
{% endfor %}
{% endif %}
.nutritional-facts {
margin-top: 30px;
padding: 20px;
border: 1px solid #e0e0e0;
border-radius: 8px;
background-color: #f9f9f9;
}
.nutritional-title {
font-size: 1.4em;
color: #333;
margin-bottom: 15px;
border-bottom: 2px solid #007bff;
padding-bottom: 5px;
}
.nutritional-table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
}
.nutritional-table th, .nutritional-table td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
.nutritional-table th {
background-color: #eaf6ff;
font-weight: bold;
color: #007bff;
}
.nutritional-table td {
color: #555;
}
(Placeholder de Screenshot: Página de produto com a tabela de informações nutricionais visível)
—
🎯 Exercícios e Desafios
Chegou a hora de vocês praticarem e solidificarem o conhecimento! Escolham um ou mais desafios:
1. Metafield de Conteúdo Rico para Páginas:
- Crie um metafield do tipo “Texto formatado (Rich text)” para a entidade
Page(Páginas) com o namespace e chavecustom.conteudo_extra_pagina. - Edite uma página existente (ex: “Sobre Nós”) e adicione um bloco de texto formatado neste metafield.
Em seguida, edite o template da página (templates/page.liquid ou em uma seção de main-page) para exibir esse conteúdo abaixo* do conteúdo padrão da página, apenas se ele existir.
2. Metafield de Banner para Coleções:
- Crie um metafield do tipo “Arquivo” (restrinja a
Imagens) para a entidadeCollection(Coleções) com o namespace e chavecustom.banner_colecao. - Atribua uma imagem de banner a uma de suas coleções.
- Modifique o template da coleção (
templates/collection.liquidou em uma seção demain-collection) para exibir essa imagem como um banner no topo da página da coleção, acima do título da coleção.
3. Metafield para Ícones de Benefícios do Produto:
- Para a entidade
Product(Produtos), crie um metafield do tipo “Lista de referências” deArquivos(restrinja aImagens) com o namespace e chavecustom.icones_beneficios. - Faça upload de algumas imagens de ícones (ex: “certificado.png”, “eco.png”) na seção “Arquivos” do admin.
- Em um produto, adicione esses ícones ao metafield
icones_beneficios. - Edite o template do produto (
sections/main-product.liquid) para exibir esses ícones abaixo do botão “Adicionar ao Carrinho”. Tente exibir cada ícone com um pequeno texto que pode ser oaltda imagem.
📝 Resumo da Aula
Ufa! Que mergulho profundo nos Metafields! Hoje, vimos que eles são a chave para estender as capacidades de dados da sua loja Shopify muito além dos campos padrão.
Aprendemos a:
- Definir o que são Metafields e sua importância para a flexibilidade.
- Escolher o tipo de Metafield correto para cada necessidade (texto, imagem, JSON, referências).
- Criar e gerenciar Metafields de forma intuitiva no painel administrativo da Shopify.
- Preencher esses campos personalizados nos recursos da sua loja.
- Acessar e exibir esses dados no frontend usando Liquid, transformando-os em conteúdo dinâmico e relevante.
- Vimos exemplos práticos que demonstram o poder dos Metafields para enriquecer páginas de produtos, coleções e muito mais.
Os Metafields são uma ferramenta indispensável para qualquer desenvolvedor ou proprietário de loja que busca uma personalização profunda e uma estrutura de dados robusta e escalável. Eles permitem que sua loja se adapte a requisitos de negócios únicos sem a necessidade de hacks ou soluções “hardcoded”.
🚀 Preparação para próxima aula
Metafields nos deram o poder de ter dados personalizados. Mas e se quisermos que a lógica de negócio da nossa loja também seja personalizada e poderosa? E se quisermos regras complexas de descontos, validações de carrinho ou lógicas de checkout que vão além dos apps ou configurações padrão?
Na próxima aula (Aula 38), vamos desvendar o que há de mais moderno em personalização de lógica de negócio: “Shopify Functions e o futuro da personalização do checkout”. Vamos explorar como criar funcionalidades personalizadas que rodam diretamente na infraestrutura da Shopify, permitindo um controle sem precedentes sobre a experiência do cliente, especialmente no checkout. Prepararem-se para elevar ainda mais o nível de personalização da sua loja!
📚 Recursos Adicionais
- Documentação Oficial da Shopify sobre Metafields: https://help.shopify.com/pt-BR/manual/custom-data/metafields
- Documentação Oficial da Shopify sobre os Tipos de Conteúdo de Metafields: https://help.shopify.com/pt-BR/manual/custom-data/metafields/metafield-content-types
- Shopify Dev Docs – Liquid Cheatsheet (propriedades de objeto): https://shopify.dev/docs/themes/liquid/reference/objects (Útil para entender quais propriedades estão disponíveis para objetos como
product,image, etc.) - Artigo sobre Headless Commerce e Metafields (conceitual): Embora não seja o foco total do nosso curso, entender como os Metafields são cruciais em arquiteturas headless pode ampliar sua visão: https://shopify.dev/concepts/headless
Até a próxima aula, onde levaremos a personalização da sua loja para o nível da lógica de negócio! Continuem praticando e explorando! 💪