Seções customizadas no Shopify: quando apps não resolvem e Liquid é a única saída técnica real

Quando o Liquid é realmente necessário

A maioria dos lojistas Shopify começa instalando apps. Faz sentido: o ecossistema é robusto, a instalação é simples e, para casos comuns, funciona bem. O problema aparece quando o requisito do negócio não se encaixa no que nenhum app oferece — ou quando a combinação de apps necessária para resolver o problema começa a degradar a performance da loja.

Liquid é a linguagem de template proprietária do Shopify. Ela roda server-side, tem acesso direto a todos os objetos da plataforma (produto, coleção, cliente, carrinho, pedido, metafields, etc.) e é o único jeito de criar seções que se comportam exatamente como você precisa, sem depender de third-party scripts carregados assincronamente.

Os três sinais de que você precisa de desenvolvimento nativo

• Lógica de exibição condicional complexa — ex: mostrar banner diferente para clientes VIP vs. anônimos vs. atacadistas
• Dados que vivem nos metafields — ex: ficha técnica de produto com 30 campos estruturados por categoria
• Integração com sistema externo — ex: exibir estoque em tempo real de um ERP sem iframe

Blocos dinâmicos e seções no Online Store 2.0

O Online Store 2.0 (lançado em 2021) transformou fundamentalmente como seções funcionam no Shopify. Antes, seções eram restritas à homepage. Hoje, qualquer template pode ter seções e blocos configuráveis pelo editor — e isso significa que você pode construir componentes altamente flexíveis sem nenhum app.

Anatomia de uma seção com blocos configuráveis

Uma seção Liquid é composta por três partes: o HTML/Liquid do template, o CSS/JS opcional embutido, e o schema JSON que define as configurações visíveis no editor visual. O schema é o que transforma código estático em componente dinâmico configurável pelo lojista sem tocar em código.

{% comment %} sections/produto-ficha-tecnica.liquid {% endcomment %}
<div class="ficha-tecnica">
  {% for block in section.blocks %}
    {% case block.type %}
      {% when 'especificacao' %}
        <div class="spec-row" {{ block.shopify_attributes }}>
          <span class="spec-label">{{ block.settings.label }}</span>
          <span class="spec-val">{{ block.settings.valor }}</span>
        </div>
      {% when 'destaque' %}
        <div class="spec-highlight" {{ block.shopify_attributes }}>
          {{ block.settings.texto }}
        </div>
    {% endcase %}
  {% endfor %}
</div>

{% schema %}
{
  "name": "Ficha Técnica",
  "blocks": [
    {
      "type": "especificacao",
      "name": "Especificação",
      "settings": [
        {"type": "text", "id": "label", "label": "Campo"},
        {"type": "text", "id": "valor", "label": "Valor"}
      ]
    },
    {
      "type": "destaque",
      "name": "Destaque",
      "settings": [
        {"type": "richtext", "id": "texto", "label": "Texto"}
      ]
    }
  ],
  "presets": [{"name": "Ficha Técnica"}]
}
{% endschema %}

Com esse pattern, o lojista pode adicionar, reordenar e configurar cada especificação diretamente no editor visual do Shopify, sem precisar de um app de "product tabs" que carrega 80KB de JavaScript extra.

Metafields como fonte de dados estruturada

Metafields são o mecanismo nativo do Shopify para armazenar dados extras em qualquer objeto — produto, variante, coleção, cliente, pedido, página, blog. Eles existem desde sempre, mas o suporte nativo no editor visual chegou com o Online Store 2.0.

Acessando metafields no Liquid

A sintaxe para acessar metafields mudou significativamente com a versão 2024-04 da API. A forma moderna usa referência direta ao namespace e chave:

{% comment %} Acesso direto via dot notation {% endcomment %}
{{ product.metafields.especificacoes.material }}
{{ product.metafields.especificacoes.peso_gramas }}

{% comment %} Verificar se existe antes de exibir {% endcomment %}
{% if product.metafields.especificacoes.certificacoes != blank %}
  <div class="certificacoes">
    {% assign certs = product.metafields.especificacoes.certificacoes.value %}
    {% for cert in certs %}
      <span class="badge-cert">{{ cert }}</span>
    {% endfor %}
  </div>
{% endif %}

{% comment %} Metafield do tipo referência (lista de produtos) {% endcomment %}
{% assign produtos_relacionados = product.metafields.editorial.relacionados.value %}
{% for prod in produtos_relacionados limit: 4 %}
  <a href="{{ prod.url }}">{{ prod.title }}</a>
{% endfor %}

Lógica condicional avançada

Um dos maiores diferenciais do Liquid em relação a apps baseados em JavaScript é que a lógica roda server-side — o HTML entregue ao navegador já vem com o conteúdo correto para aquele usuário específico. Isso elimina o "flash of wrong content" comum em soluções baseadas em JS client-side.

Exibição por tipo de cliente

{% if customer %}
  {% assign tier = customer.metafields.programa.tier.value %}
  {% case tier %}
    {% when 'vip' %}
      <div class="banner-vip">
        Acesso antecipado: sale começa amanhã para você 🎉
      </div>
    {% when 'atacado' %}
      <div class="banner-atacado">
        Preços de atacado ativos. Mínimo {{ customer.metafields.programa.minimo_atacado }} unidades.
      </div>
    {% else %}
      <div class="banner-padrao">
        Compre {{ customer.metafields.programa.falta_vip | money }} para VIP.
      </div>
  {% endcase %}
{% else %}
  <div class="banner-anonimo">
    <a href="/account/login">Entre</a> para ver preços especiais.
  </div>
{% endif %}

Variações de layout por coleção

{% comment %} Layout diferente para coleções de moda vs. eletrônicos {% endcomment %}
{% assign layout = collection.metafields.layout.tipo | default: 'padrao' %}

{% if layout == 'lookbook' %}
  {% render 'collection-lookbook', collection: collection %}
{% elsif layout == 'tabela-comparativa' %}
  {% render 'collection-tabela', collection: collection %}
{% else %}
  {% render 'collection-grid', collection: collection %}
{% endif %}

Integração com APIs externas

Aqui está onde o Liquid encontra seus limites naturais — ele é uma linguagem de template server-side, não pode fazer chamadas HTTP diretamente. Mas existem dois padrões nativos que permitem integrar dados externos de forma eficiente sem apps third-party pesados.

Padrão 1: Shopify Functions + Storefront API

Para dados que precisam de atualização em tempo real (estoque externo, preços dinâmicos, disponibilidade de entrega), o padrão correto é um small JavaScript fetch que consulta um endpoint próprio ou a Storefront API. O Liquid renderiza o shell da página, e o JS preenche os dados dinâmicos após o load:

{% comment %} O Liquid renderiza o skeleton {% endcomment %}
<div class="estoque-externo" data-sku="{{ product.selected_or_first_available_variant.sku }}">
  <div class="estoque-loading">Verificando disponibilidade...</div>
</div>

<script>
document.querySelectorAll('.estoque-externo').forEach(el => {
  const sku = el.dataset.sku;
  fetch(`/apps/proxy/estoque?sku=${sku}`)
    .then(r => r.json())
    .then(data => {
      el.innerHTML = data.disponivel
        ? `<span class="em-estoque">✓ ${data.quantidade} em estoque</span>`
        : `<span class="sem-estoque">Consultar prazo</span>`;
    });
});
</script>

Padrão 2: App Proxy para dados externos seguros

O Shopify App Proxy permite criar endpoints no domínio da loja (/apps/nome-do-app/) que fazem proxy para um servidor externo. O HTML retornado é processado pelo Liquid do Shopify, o que permite misturar dados do ERP com objetos nativos da plataforma.

Casos de uso reais resolvidos com Liquid

Caso real: ficha técnica com 40 campos

Um cliente do segmento de ferramentas industriais precisava exibir fichas técnicas com até 40 campos diferentes, variando por subcategoria de produto. A solução com app custaria ~$35/mês e ainda exigiria customização adicional para os campos específicos. Desenvolvemos uma seção nativa com:

• Namespace de metafields por subcategoria (ferramentas_corte, ferramentas_medicao, etc.)
• Seção Liquid que lê dinamicamente os metafields preenchidos e ignora os vazios
• Schema de importação via metafield bulk import para facilitar a carga inicial

Resultado: zero custo recorrente de app, página de produto 340ms mais rápida (sem script de terceiro), e o time de conteúdo passou a gerenciar as fichas direto no admin do Shopify.

Quando Liquid não é a solução

Com tudo isso dito, há cenários onde um app é a escolha certa. Liquid não é a resposta para tudo.

• Funcionalidades que mudam frequentemente — se o requisito muda todo mês, apps com UI de configuração são mais produtivos
• Features de terceiros com manutenção contínua — avaliações (Reviews), recomendações por ML, chat ao vivo — o custo de manutenção do código próprio supera o custo do app
• Integrações complexas de pagamento — use sempre soluções certificadas pelo Shopify, nunca reinvente
• Tempo curto + requisito genérico — se um app padrão resolve 90% do que você precisa em 30 minutos, use o app