Olá, turma! 👋 Sejam muito bem-vindos à nossa Aula 33 do curso “Loja Shopify do Zero ao Avançado”!

Estou super animado com o que vamos explorar hoje. Nas últimas aulas, mergulhamos fundo na estrutura do tema, personalização com HTML, CSS e JavaScript, e começamos a criar nossos primeiros blocos dinâmicos. Vocês já estão desenvolvendo um olhar de “engenheiro” para a arquitetura de uma loja online.

Hoje, vamos elevar o nível da nossa organização e eficiência. Sabe aquela sensação de repetir o mesmo código várias vezes em lugares diferentes da loja? Aquela imagem de produto, um botão estilizado, ou até mesmo um bloco de texto que aparece em diversas páginas? Chegou a hora de dar um basta na repetição!

Nesta aula, vamos aprender a criar snippets reutilizáveis e a utilizar includes inteligentes no Shopify. Isso não só vai deixar seu código muito mais limpo e organizado, como também vai otimizar o tempo de desenvolvimento e a manutenção da sua loja. Preparem-se para dar um salto na qualidade do seu código! 💪

—

Aula 33 – Loja Shopify do Zero ao Avançado: Criando snippets reutilizáveis e includes inteligentes

📚 O que você vai aprender nesta aula

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

• Compreender o conceito e a importância dos snippets no desenvolvimento de temas Shopify.
• Identificar cenários onde a criação de snippets é benéfica para a reutilização de código.
• Criar seus próprios arquivos de snippet no painel administrativo do Shopify.
• Utilizar a tag Liquid render para incluir snippets em diferentes partes do seu tema.
• Passar parâmetros dinâmicos para seus snippets, tornando-os flexíveis e adaptáveis.
• Diferenciar o uso de render e include (legado) e entender suas implicações.
• Aplicar boas práticas na organização e nomeação de snippets para um código mais limpo e manutenível.
• Otimizar seu fluxo de trabalho e a performance do tema através da modularização do código.

🔗 Conectando com aulas anteriores

Nas aulas anteriores, especialmente quando trabalhamos com a personalização de páginas de produto e coleção, vocês devem ter notado que certas partes do código se repetiam. Lembram-se de quando estávamos estilizando o card de produto, ou talvez um botão de “Adicionar ao Carrinho” que queríamos usar em várias seções? 🤔

Vimos a estrutura básica de pastas como sections/, templates/, layout/ e como cada uma delas serve a um propósito específico. Até agora, se precisássemos de um elemento repetitivo, talvez tivéssemos que copiar e colar o código em diferentes arquivos. Isso funciona, mas é a receita para dores de cabeça no futuro:

• Dificuldade de manutenção: Se você precisar mudar algo nesse elemento, terá que fazer a alteração em todos os lugares onde ele foi copiado.
• Código inchado: Muita repetição torna o código mais longo e difícil de ler.
• Risco de erros: Maior chance de esquecer uma alteração em algum lugar ou introduzir inconsistências.

Hoje, vamos resolver esses problemas de uma vez por todas, aplicando o princípio DRY (Don’t Repeat Yourself). Vamos transformar esses blocos de código repetitivos em componentes inteligentes e reutilizáveis, usando os famosos snippets do Shopify. Preparados para deixar nosso código elegante e profissional? ✨

📖 Conteúdo Principal

O que são Snippets no Shopify?

Em termos simples, snippets são pequenos arquivos .liquid que contêm blocos de código HTML, CSS (inline ou referenciado), e Liquid que podem ser reutilizados em várias partes do seu tema Shopify. Pense neles como “funções” ou “componentes” do seu tema.

Eles vivem na pasta snippets/ do seu tema e são uma ferramenta poderosa para modularizar e organizar seu código.

Por que usar Snippets?

1. Reutilização de Código (DRY): O principal benefício. Você escreve o código uma vez e o usa quantas vezes quiser.

2. Organização e Modularidade: Divide o seu tema em partes menores e mais gerenciáveis, tornando-o mais fácil de entender e navegar.

3. Manutenção Facilitada: Se um elemento precisa ser atualizado, você muda apenas o snippet correspondente, e a alteração se reflete em todos os lugares onde ele é usado. Menos trabalho, menos chance de erros!

4. Legibilidade do Código: Seus arquivos section e template ficam mais limpos e focados em sua lógica principal, pois os detalhes de componentes menores são encapsulados nos snippets.

5. Desenvolvimento Mais Rápido: Uma vez que você tem uma biblioteca de snippets, pode montar novas seções ou páginas rapidamente, como blocos de LEGO.

Como criar um Snippet

Criar um snippet é um processo simples:

1. Acesse o Editor de Código do Tema:

• No admin da Shopify, vá em Loja Virtual > Temas.
• Ao lado do seu tema ativo, clique em Ações > Editar código.

2. Crie um Novo Snippet:

• Na barra lateral esquerda, na seção Snippets, clique em Adicionar um novo snippet.
• Dê um nome descritivo ao seu snippet (ex: product-card, custom-button, social-icon). Nomes de snippets geralmente usam hífens (-) para separar palavras.
• O nome completo do arquivo será nome-do-snippet.liquid.

Exemplo: Se você criar um snippet chamado product-card, o arquivo será snippets/product-card.liquid.

Como incluir um Snippet: A tag render

Para usar um snippet que você criou, você precisa “incluí-lo” em outro arquivo Liquid (como uma seção, um template ou até mesmo outro snippet). A maneira moderna e recomendada de fazer isso é com a tag render:

{% render 'nome-do-snippet' %}

Exemplo: Se você criou snippets/product-card.liquid, para exibi-lo em uma seção, você usaria:

{% render 'product-card' %}

O Shopify vai procurar por product-card.liquid dentro da pasta snippets/ e inserir o conteúdo desse arquivo no local onde a tag render foi chamada.

Passando Parâmetros para Snippets (with e for)

Aqui é onde a mágica dos snippets realmente acontece! Raramente um snippet será um pedaço de código estático. Na maioria das vezes, você vai querer que ele exiba informações diferentes dependendo de onde e como ele é chamado. Para isso, precisamos passar dados (parâmetros) para o snippet.

A tag render oferece o argumento with para passar um objeto ou um hash de variáveis para o snippet:

{% render 'nome-do-snippet', with objeto %}
{% render 'nome-do-snippet', with variavel_local as variavel_no_snippet %}
{% render 'nome-do-snippet', param1: 'valor1', param2: 'valor2' %}

Detalhe importante sobre render:

Ao usar render, o snippet é executado em um escopo isolado. Isso significa que as variáveis do arquivo que está chamando o snippet NÃO estão automaticamente disponíveis dentro do snippet. Você precisa passá-las explicitamente. Essa é uma das principais vantagens do render sobre o include (que veremos logo), pois evita conflitos de nomes de variáveis e torna o snippet mais previsível e independente.

Exemplo Prático: Card de Produto Dinâmico

Vamos supor que temos um snippet product-card.liquid e queremos que ele exiba um produto específico.

1. Conteúdo do snippet snippets/product-card.liquid:

{# snippets/product-card.liquid #}
{% comment %}
Este snippet exibe um card de produto.
Ele espera uma variável 'card_product' contendo um objeto produto.
{% endcomment %}
{% assign current_product = card_product | default: product %} {# Fallback para 'product' caso não seja passado #}
{% if current_product %}


{% if current_product.featured_image %}

alt="{{ current_product.featured_image.alt | escape }}"
loading="lazy">
{% else %}

{% endif %}
{{ current_product.title }}

{% if current_product.compare_at_price > current_product.price %}
{{ current_product.price | money }}
{{ current_product.compare_at_price | money }}
{% else %}
{{ current_product.price | money }}
{% endif %}


Ver Detalhes

{% endif %}

Neste snippet, estamos esperando uma variável chamada card_product. Se ela não for passada, usamos product como fallback (útil em contextos onde product já está disponível).

2. Chamando o snippet em uma seção (ex: sections/featured-collection.liquid):

Para exibir uma lista de produtos de uma coleção destacada, você iteraria sobre collection.products e chamaria o snippet para cada um:

{# sections/featured-collection.liquid #}

{{ section.settings.title }}

{% for product in collection.products limit: section.settings.limit %}
{% render 'product-card', card_product: product %}
{% endfor %}


{% schema %}
{
"name": "Coleção Destacada",
"settings": [
{
"type": "text",
"id": "title",
"label": "Título",
"default": "Nossos Produtos"
},
{
"type": "collection",
"id": "collection",
"label": "Coleção"
},
{
"type": "range",
"id": "limit",
"min": 1,
"max": 12,
"step": 1,
"label": "Produtos para exibir",
"default": 4
}
],
"presets": [
{
"name": "Coleção Destacada",
"category": "Produtos"
}
]
}
{% endschema %}

Observe a linha: {% render 'product-card', card_product: product %}. Aqui estamos passando o objeto product da iteração atual para o snippet product-card, mas renomeando-o para card_product dentro do escopo do snippet. Isso garante clareza e evita conflitos.

Diferença entre render e include (Legado)

Você pode encontrar a tag include em temas mais antigos ou em documentações mais antigas. Embora ainda funcione, render é a abordagem recomendada para novos desenvolvimentos e para refatorar código existente.

| Característica | {% render 'snippet-name', param: value %} | {% include 'snippet-name', param: value %} |

| :————— | :————————————————————————- | :——————————————————————————– |

| Escopo | Isolado. As variáveis do arquivo chamador não estão disponíveis no snippet, a menos que sejam passadas explicitamente. | Compartilhado. As variáveis do arquivo chamador estão disponíveis no snippet, o que pode levar a efeitos colaterais inesperados. |

| Parâmetros | Usa with ou key: value. O snippet acessa os parâmetros via {{ snippet_param_name }}. | Acessa variáveis passadas diretamente. Variáveis globais/locais do chamador também são acessíveis. |

| Performance | Geralmente melhor, pois o escopo isolado permite otimizações internas. | Pode ser ligeiramente mais lento devido à necessidade de gerenciar o escopo compartilhado. |

| Melhores Práticas | Recomendado para modularidade e evitar conflitos. | Legado, não recomendado para novos desenvolvimentos. Usar apenas se necessário em temas antigos. |

Minha recomendação como professor: Sempre que possível, use render. Ele força você a pensar sobre as entradas e saídas do seu componente, levando a um código mais robusto e fácil de depurar. include é uma armadilha que pode levar a bugs difíceis de rastrear.

Boas Práticas e Dicas de Otimização

• Nomes Descritivos: Nomeie seus snippets de forma clara e concisa (ex: product-card, section-header, icon-svg).
• Foco Único: Cada snippet deve ter uma responsabilidade única. Se um snippet começar a fazer muitas coisas, considere dividi-lo em snippets menores.
• Comentários: Adicione comentários no início do seu snippet explicando o que ele faz e quais parâmetros ele espera.
• Estrutura de Pastas (Convenção): Embora o Shopify não permita subpastas dentro de snippets/ via admin, você pode usar convenções de nomeação para simular uma estrutura, como product-card-info.liquid, product-card-image.liquid. Ou, para elementos maiores e mais complexos, considere criar uma section em vez de um snippet.
• Quando usar Snippets vs. Sections:
• Snippets: Para componentes pequenos, reutilizáveis e que não precisam de configurações de arrastar e soltar no Customizer (ex: card de produto, ícone, botão, bloco de texto simples).
• Sections: Para blocos maiores de conteúdo que o lojista pode adicionar, reordenar e configurar diretamente no Customizer (ex: banner principal, grade de produtos, carrossel de depoimentos). **Você pode e deve usar snippets dentro de sections!**
• CSS e JS nos Snippets: Você pode incluir
  

  Explicação do snippet:

  • Ele recebe icon_name, icon_url e icon_class como parâmetros.
  • Usa um case/when para determinar qual SVG exibir com base em icon_name.
  • Aplica classes CSS para estilização e permite classes adicionais.
  • Inclui um
    

    Screenshot Simulado (Admin Shopify):

    Imagine que você está na tela de "Editar código" do seu tema.

    Passo 1: Criando o Snippet social-icon

    
    📁 layout/
    📁 sections/
    📁 templates/
    📁 assets/
    📁 config/
    📁 locales/
    📁 snippets/
    └─ + Adicionar um novo snippet
    (Caixa de texto para nomear o snippet)
    Nome do snippet: social-icon
    [ Criar snippet ]
    

    Após criar, o arquivo snippets/social-icon.liquid abrirá para você colar o código.

    Passo 2: Editando sections/footer.liquid

    
    📁 layout/
    📁 sections/
    └─ footer.liquid  <-- Clicar aqui para editar
    📁 templates/
    📁 assets/
    📁 config/
    📁 locales/
    📁 snippets/
    └─ social-icon.liquid
    

    Então, dentro do editor de footer.liquid, você colaria o código de chamada do snippet.

    Resultado Esperado:

    No frontend da sua loja, o rodapé agora exibiria os ícones do Facebook, Instagram, Twitter e a palavra "Youtube" (como fallback, pois não definimos um SVG para ele), todos estilizados e clicáveis, utilizando o mesmo bloco de código do snippet social-icon.liquid. Se você quisesse mudar o estilo de todos os ícones, bastaria editar o CSS dentro do social-icon.liquid ou no seu arquivo CSS principal. Mágico, não é? ✨

    🎯 Exercícios e Desafios

    Chegou a hora de colocar a mão na massa e solidificar esse conhecimento!

    1. Desafio Fácil: Botão Reutilizável

    • Crie um snippet chamado custom-button.liquid.
    • Ele deve aceitar dois parâmetros: button_text (o texto do botão) e button_url (o link para onde o botão leva).
    • Adicione um estilo básico ao botão (fundo, cor do texto, padding, border-radius).
    • Chame este snippet em duas seções diferentes do seu tema (ex: na sections/header.liquid e em uma nova sections/promo-banner.liquid que você pode criar).

    2. Desafio Médio: Item de Lista de Informações

    • Muitas vezes, no rodapé, temos listas de links (ex: "Sobre Nós", "Contato", "Política de Privacidade").
    • Crie um snippet chamado footer-link-item.liquid.
    • Este snippet deve aceitar link_text e link_url como parâmetros e renderizar um
    • ...

    .

    • No seu sections/footer.liquid, substitua uma das listas de links por chamadas a este novo snippet.

    3. Desafio Avançado: Bloco de Destaque com Ícone e Texto

    • Imagine uma seção na sua homepage que mostra 3 "características" da sua loja (ex: "Frete Grátis", "Atendimento Premium", "Devolução Fácil").
    • Crie um snippet chamado feature-block.liquid.
    • Este snippet deve aceitar feature_icon (pode ser o nome de um SVG, como no exemplo dos sociais), feature_title e feature_description.
    • Crie uma nova seção chamada sections/features-grid.liquid.
    • Nesta seção, crie as settings para 3 blocos de características, onde cada bloco terá campos para o ícone (texto), título e descrição.
    • Dentro da sections/features-grid.liquid, use um for loop para iterar sobre os blocos configurados e, para cada bloco, renderize seu feature-block.liquid passando os dados do bloco.
    • Adicione um CSS responsivo para que os 3 blocos se organizem bem em diferentes telas.

    Não se preocupem em fazer tudo perfeito de primeira. O importante é praticar a identificação de código repetitivo e a passagem de parâmetros. Se tiverem dúvidas, revisitem o conteúdo ou pesquisem na documentação oficial do Shopify! 📚

    📝 Resumo da Aula

    Ufa! Que aula produtiva, não é mesmo? Hoje, fizemos um upgrade significativo na forma como abordamos a estrutura do nosso código Shopify:

    • Descobrimos que snippets são blocos de código Liquid reutilizáveis que vivem na pasta snippets/.
    • Aprendemos que eles são essenciais para manter nosso código DRY (Don't Repeat Yourself), tornando-o mais organizado, fácil de manter e depurar.
    • Dominamos a tag {% render 'nome-do-snippet', parametro: valor %}, a forma moderna e preferida de incluir snippets e passar dados para eles.
    • Entendemos a importância de passar parâmetros explicitamente para snippets usando with (ou key: value), aproveitando o escopo isolado que render proporciona.
    • Diferenciamos render de include, optando pelo primeiro para evitar efeitos colaterais e garantir a modularidade.
    • Reforçamos boas práticas como nomear snippets de forma descritiva e focar em uma única responsabilidade por snippet.

    Com o uso inteligente de snippets, sua loja Shopify não só terá um código mais limpo e elegante, mas você também será um desenvolvedor muito mais eficiente. Parabéns por essa conquista! 👏

    🚀 Preparação para próxima aula

    Agora que já sabemos como criar componentes reutilizáveis, o próximo passo lógico é torná-los ainda mais poderosos e configuráveis para o lojista!

    Na próxima aula, vamos mergulhar no mundo dos Metafields e Propriedades do Tema (Theme Settings). Aprenderemos:

    • O que são Metafields e como eles permitem armazenar informações adicionais para produtos, coleções, páginas, etc., que o Shopify não cobre por padrão.
    • Como criar e gerenciar Metafields diretamente no admin.
    • Como acessar e exibir dados de Metafields no seu tema usando Liquid.
    • Como usar Theme Settings para criar opções de configuração globais ou por seção que o lojista pode ajustar sem tocar no código (como cores, fontes, links de redes sociais, etc.).

    Combinando snippets com Metafields e Theme Settings, você terá a capacidade de construir temas extremamente flexíveis e poderosos, onde quase tudo pode ser configurado sem a necessidade de intervenção do desenvolvedor. Vai ser uma aula prática e super útil! Fiquem ligados! 💡

    📚 Recursos Adicionais

    • Documentação Oficial Shopify - render tag:
    • Shopify Developer Docs - render
    • Documentação Oficial Shopify - include tag (para referência):
    • Shopify Developer Docs - include
    • Artigo sobre boas práticas com Liquid e Snippets:
    • Procure por "Shopify Liquid best practices snippets" no Google para diversos artigos de blogs e comunidades.

    Lembrem-se, a prática leva à perfeição. Experimentem, refatorem seu próprio código e explorem como os temas padrão do Shopify usam snippets! Até a próxima! 👋

    🚀 Pronto para a próxima aula?

    Continue sua jornada Shopify!

    Ver todas as aulas

    Related Posts

    • Aula 33 - Loja Shopify do Zero ao Avançado: Criando snippets reutilizáveis e includes inteligentes

      Aula 33 - Loja Shopify do Zero ao Avançado: Criando snippets reutilizáveis e includes inteligentes…

    • Aula 58 - Loja Shopify do Zero ao Avançado: Pop-ups inteligentes e captura de leads eficaz

      Aula 58 - Loja Shopify do Zero ao Avançado: Pop-ups inteligentes e captura de leads…

    • Aula 76 - Loja Shopify do Zero ao Avançado: Shopify CLI e ferramentas de desenvolvimento

      Aula 76 - Loja Shopify do Zero ao Avançado: Shopify CLI e ferramentas de desenvolvimento…

    • Aula 77 - Loja Shopify do Zero ao Avançado: Shopify Functions e extensibilidade avançada

      Aula 77 - Loja Shopify do Zero ao Avançado: Shopify Functions e extensibilidade avançada 🚀…

    • Aula 72 - Loja Shopify do Zero ao Avançado: Desenvolvendo apps privados para sua loja

      Aula 72 - Loja Shopify do Zero ao Avançado: Desenvolvendo apps privados para sua loja…