Seu carrinho está vazio no momento!

Olá, pessoal! Sejam muito bem-vindos à nossa Aula 12 do curso “Loja Shopify do Zero ao Avançado”! 👋
Nas aulas anteriores, mergulhamos fundo na criação dos produtos, aprendendo não só a cadastrá-los, mas também a gerenciar suas variantes e detalhes importantes. Agora que temos nossos produtos cadastrados e prontos, surge uma pergunta crucial: Como vamos organizar tudo isso para que nossos clientes encontrem exatamente o que procuram de forma fácil e intuitiva? 🤔
É aí que entram as Coleções estratégicas! Elas são o coração da organização da sua loja e um pilar fundamental para a experiência do usuário e para o SEO. Preparem-se para dar um salto na estrutura da sua loja!
—
Aula 12 – Loja Shopify do Zero ao Avançado: Organizando produtos com coleções estratégicas
📚 O que você vai aprender nesta aula
Nesta aula, você vai dominar a arte de organizar seus produtos na Shopify usando coleções. Especificamente, vamos cobrir:
- Compreender o papel das coleções na navegação da loja, experiência do usuário (UX) e otimização para motores de busca (SEO).
- Identificar e aplicar os dois tipos principais de coleções: Manuais e Automatizadas.
- Criar coleções na Shopify passo a passo, configurando títulos, descrições, imagens e visibilidade.
- Dominar as condições para coleções automatizadas, utilizando tags, tipos de produtos, preços e outros critérios.
- Aplicar as melhores práticas na criação e gestão de coleções para uma loja eficiente e fácil de navegar.
- Integrar coleções com a visualização do tema usando conceitos básicos de Liquid.
🔗 Conectando com aulas anteriores
Lembram da Aula 10, onde criamos nossos primeiros produtos, e da Aula 11, onde aprimoramos esses produtos com variantes e metacampos? Pois bem, agora temos vários produtos em nosso estoque digital. Imagine ter centenas ou milhares de produtos e seu cliente ter que rolar uma página infinita para encontrar o que quer. Impossível, certo? 😫
As coleções entram em cena exatamente neste ponto. Elas são as categorias e subcategorias que agruparão seus produtos de forma lógica e navegável. É como organizar um supermercado: você não coloca todos os itens em uma única prateleira; você tem a seção de bebidas, a seção de alimentos frescos, a seção de limpeza, etc. As coleções farão o mesmo pela sua loja online, transformando um mar de produtos em ilhas bem sinalizadas! 🏝️
📖 Conteúdo Principal
O que são Coleções na Shopify?
Uma Coleção na Shopify é, essencialmente, um grupo de produtos. Pense nelas como as “categorias” da sua loja. Elas servem para:
1. Melhorar a Navegação: Permitem que os clientes filtrem e encontrem produtos específicos rapidamente (ex: “Camisetas Masculinas”, “Sapatos Femininos”, “Promoções de Verão”).
2. Otimizar a Experiência do Usuário (UX): Uma loja bem organizada é mais agradável e fácil de usar, aumentando as chances de compra.
3. Impulsionar o SEO: As páginas de coleção podem ser indexadas pelos motores de busca, atraindo tráfego orgânico para sua loja por termos de busca relacionados às categorias de produtos.
4. Facilitar Campanhas e Promoções: Crie coleções específicas para promoções, lançamentos ou produtos em destaque.
Tipos de Coleções: Manual x Automatizada
A Shopify oferece dois tipos poderosos de coleções, cada um com suas vantagens:
1. Coleções Manuais (ou Personalizadas) 🖐️
- Como funcionam: Você adiciona produtos a essa coleção manualmente, um por um.
- Quando usar: Perfeitas para coleções menores, produtos em destaque na página inicial, promoções sazonais específicas, ou quando você precisa de controle total sobre quais produtos aparecem.
- Prós: Controle total sobre os produtos incluídos.
- Contras: Requer manutenção constante se os produtos da coleção mudarem frequentemente.
2. Coleções Automatizadas (ou Inteligentes) 🤖
- Como funcionam: Você define condições baseadas em atributos dos produtos (como tag, tipo, preço, título, estoque, etc.). Qualquer produto que atenda a essas condições é automaticamente adicionado à coleção. Se um produto deixar de atender às condições, ele é removido automaticamente.
- Quando usar: Ideal para coleções maiores e dinâmicas, onde você não quer ter o trabalho de adicionar ou remover produtos manualmente. Exemplos: “Todas as Camisetas”, “Produtos Abaixo de R$50”, “Eletrônicos”.
- Prós: Economia de tempo, atualizações automáticas, menos erros humanos.
- Contras: Menos controle sobre produtos específicos; um produto pode aparecer em uma coleção se atender às condições, mesmo que você não quisesse.
Criando Coleções na Shopify: Passo a Passo Detalhado
Vamos ao painel administrativo e criar algumas coleções!
1. Acesse a Seção de Coleções:
- No seu painel admin da Shopify, vá em “Produtos” e clique em “Coleções”.
- Você verá uma lista das coleções existentes (provavelmente apenas “Homepage” e “All products” por enquanto).
- Clique no botão verde “Criar coleção” no canto superior direito.
(Screenshot textual: Painel Admin > Produtos > Coleções. Botão “Criar coleção” em destaque.)
2. Informações Básicas da Coleção:
- Título: Escolha um nome claro e descritivo para sua coleção (ex: “Roupas Femininas”, “Acessórios para Casa”, “Lançamentos”). Este será o nome que seus clientes verão.
- Descrição: Adicione uma descrição detalhada da coleção. Isso é super importante para o SEO! Use palavras-chave relevantes para o tipo de produtos da coleção. Os motores de busca amam descrições ricas.
- Imagem da coleção: Faça upload de uma imagem que represente a coleção. Alguns temas exibem essa imagem em páginas de coleção ou na homepage. Uma imagem atraente melhora a UX.
(Screenshot textual: Campos “Título”, “Descrição” e área para “Fazer upload de imagem” em destaque na página de criação de coleção.)
3. Tipo de Coleção: Manual ou Automatizada?
Logo abaixo das informações básicas, você encontrará a opção “Tipo de coleção”. É aqui que você define se ela será manual ou automatizada.
- Selecione “Manual”:
- Após salvar a coleção, você precisará ir na página da coleção e usar a caixa de pesquisa para “Pesquisar produtos” e adicioná-los um a um.
- Você também pode adicionar produtos a uma coleção manual diretamente da página de edição do produto.
(Screenshot textual: Opção “Manual” selecionada. Depois de salvar, uma seção “Produtos” aparece com um botão “Pesquisar produtos”.)
- Selecione “Automático”:
- Esta é a parte divertida! Agora você define as condições.
- “Produtos devem corresponder a:”
“todas as condições” (AND): O produto precisa atender a todas* as condições que você definir para ser incluído na coleção. Ex: Tipo de produto é igual a 'Camiseta' E Preço é menor que '50.00'.
“qualquer condição” (OR): O produto precisa atender a pelo menos uma* das condições que você definir. Ex: Tag do produto é igual a 'promoção' OU Tag do produto é igual a 'liquidacao'.
- Adicione as condições: Clique em “Adicionar condição” e escolha o critério:
- Título do produto: “é igual a”, “contém”, “começa com”, etc.
- Tipo de produto: (Ex: “Camiseta”, “Calça”, “Bolsa” – que definimos na Aula 10!)
- Tag do produto: (Ex: “verao2024”, “promocao”, “algodao” – que também definimos na Aula 10!)
- Preço do produto: “é igual a”, “é maior que”, “é menor que”.
- Peso do produto:
- Estoque do produto: (Para criar uma coleção “Últimas Unidades”!)
- Comparar ao preço: Preço de venda em relação ao preço original.
- Metafield: (Um tópico mais avançado, mas saiba que é possível usar metacampos!)
(Screenshot textual: Opção “Automático” selecionada. Dropdown “Produtos devem corresponder a:” mostrando “todas as condições” e “qualquer condição”. Seção “Condições” com um botão “Adicionar condição” e exemplos de condições configuradas.)
4. Organização dos Produtos na Coleção:
- Uma vez criada a coleção, você pode definir a ordem dos produtos dentro dela. No admin da coleção, na seção “Produtos”, use o dropdown “Ordenar”.
- Opções: Manualmente, Melhor Vendido, Título (A-Z ou Z-A), Preço (menor para maior ou maior para menor), Data de Criação (mais novo ou mais antigo).
- Dica: Para coleções manuais, “Manualmente” dá o controle total. Para automatizadas, pense na UX – geralmente, “Melhor Vendido” ou “Mais Novo” são boas opções.
5. Visibilidade da Coleção:
- Na seção “Status”, você pode definir a visibilidade da coleção. Por padrão, ela é “Ativa”.
- Você também pode definir uma “Data de publicação” futura se quiser que a coleção só apareça a partir de um certo dia.
6. Otimização para motores de busca (SEO da Coleção):
- Na seção “Edição de SEO do site”, você pode e deve personalizar o título da página (
) e a meta descrição da coleção. - A URL e handle (
/collections/nome-da-colecao) são gerados automaticamente, mas você pode editar se precisar. Use um handle curto, descritivo e com palavras-chave relevantes.
(Screenshot textual: Seção “Edição de SEO do site” com campos “Título da página”, “Meta descrição” e “URL e handle”.)
Dicas de Boas Práticas e Estratégias
- Planeje suas Coleções: Antes de sair criando, mapeie mentalmente (ou em um papel) como você gostaria que sua loja fosse organizada. Pense na jornada do cliente.
- Use Tags de Produto de Forma Inteligente: As tags são incrivelmente poderosas para coleções automatizadas. Pense em tags que representem características, estilos, materiais ou promoções (ex: “algodao”, “floral”, “verao”, “promocao-50”).
- Não Tenha Medo de Coleções Pequenas: Uma coleção não precisa ter dezenas de produtos. Às vezes, uma coleção de 3-5 produtos muito específicos é mais eficaz.
- Coleção “Todos os Produtos”: A Shopify cria automaticamente uma coleção
All products. Você pode personalizá-la, mas evite excluí-la, pois muitos temas dependem dela. - Evite Nomes de Coleção Genéricos Demais: “Produtos” é muito vago. “Vestidos Femininos de Verão” é muito mais descritivo.
- SEO é seu Amigo: Sempre preencha a descrição da coleção e personalize o SEO. Isso ajuda os motores de busca a entenderem e ranquearem suas páginas de coleção.
- Revise Regularmente: Especialmente coleções manuais. Certifique-se de que os produtos ainda são relevantes.
💻 Exemplos Práticos
Vamos criar algumas coleções e ver como elas funcionam, inclusive um pequeno toque de Liquid para ver como o tema “enxerga” isso!
Exemplo Prático 1: Criando uma Coleção Manual “Destaques da Página Inicial”
Cenário: Você quer uma coleção de 6 produtos específicos para exibir na sua homepage, mudando-os semanalmente.
1. No Admin Shopify:
- Vá em
Produtos > Coleções. - Clique em
Criar coleção. - Título:
Destaques da Semana - Descrição:
Confira os produtos mais comentados e desejados desta semana em nossa loja! - Tipo de coleção: Selecione
Manual. - Salve a coleção.
2. Adicionar Produtos:
- Na página da coleção
Destaques da Semana, role até a seçãoProdutos. - Clique em
Procurar produtos. - Pesquise e selecione 6 produtos que você criou nas aulas anteriores.
- Clique em
Adicionar.
3. Ordenar:
- Na seção
Produtos, selecioneManualmenteno dropdownOrdenar. - Arraste e solte os produtos para definir a ordem que aparecerão na sua loja.
- Dica: Você pode voltar aqui toda semana e mudar os produtos para manter sua homepage fresca!
(Screenshot textual: Página da coleção “Destaques da Semana” com “Manual” selecionado, 6 produtos adicionados e a opção “Manualmente” para ordenar os produtos.)
Exemplo Prático 2: Criando uma Coleção Automatizada “Camisetas Masculinas”
Cenário: Você quer uma coleção que agrupe automaticamente todas as camisetas para homens.
1. No Admin Shopify:
- Vá em
Produtos > Coleções. - Clique em
Criar coleção. - Título:
Camisetas Masculinas - Descrição:
Explore nossa coleção de camisetas masculinas, de diversos estilos e tamanhos. - Tipo de coleção: Selecione
Automático. - Condições:
Produtos devem corresponder a: todas as condições (pois queremos que sejam camisetas e* masculinas).
- Condição 1:
Tipo de produtoé igual aCamiseta(assumindo que você usa “Camiseta” como tipo de produto). - Condição 2:
Tag do produtoé igual amasculino(assumindo que você tagou seus produtos masculinos). - Salve a coleção.
2. Verificação:
- Observe que a coleção será preenchida automaticamente com todos os produtos que atendem a essas duas condições. Se você adicionar uma nova camiseta masculina com a tag “masculino”, ela aparecerá aqui automaticamente! ✨
(Screenshot textual: Página da coleção “Camisetas Masculinas” com “Automático” selecionado, e duas condições configuradas: “Tipo de produto é igual a Camiseta” e “Tag do produto é igual a masculino”. Uma lista de produtos é exibida automaticamente abaixo.)
Exemplo Prático 3: Exibindo Coleções e Produtos no Frontend (Liquid)
Agora, vamos ver como um tema Shopify (usando Liquid) acessa e exibe essas coleções e seus produtos. Embora a integração total com o tema seja assunto para aulas futuras, é importante entender a lógica.
Imagine que você quer listar suas coleções principais na página inicial ou em uma página de categorias.
Código Liquid para listar todas as coleções (simplificado):
Nossas Categorias
{% for collection in collections %}
{% unless collection.handle == 'all' %} {# Ignora a coleção "All Products" #}
{% if collection.image %}

{% else %}
{# Exibe uma imagem padrão se a coleção não tiver uma #}

{% endif %}
{{ collection.title }} ({{ collection.products_count }} produtos)
{{ collection.description | strip_html | truncate: 100 }}
{% endunless %}
{% endfor %}
.collection-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}
.collection-item {
border: 1px solid #ddd;
padding: 15px;
text-align: center;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.collection-item img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
.collection-item h3 {
margin: 10px 0;
}
.collection-item a {
text-decoration: none;
color: #333;
font-weight: bold;
}
Explicação do Código:
-
{% for collection in collections %}: Itera sobre todas as coleções da sua loja. -
{% unless collection.handle == 'all' %}: Uma boa prática para não exibir a coleção “All Products” que a Shopify cria por padrão, a menos que você queira. -
collection.image | img_url: 'medium': Pega a imagem da coleção e redimensiona para um tamanho “medium” (Liquid tem filtros para isso!). -
collection.title: O título que você deu à coleção. -
collection.url: O link para a página da coleção (ex:/collections/camisetas-masculinas). -
collection.products_count: Mostra quantos produtos estão nessa coleção. -
collection.description | strip_html | truncate: 100: Pega a descrição, remove qualquer tag HTML e limita a 100 caracteres.
Este bloco de código, se inserido em um arquivo como index.liquid (página inicial) ou em um section de tema, listaria suas coleções com suas respectivas imagens e títulos. É assim que o Shopify “conversa” com seus dados para exibi-los ao cliente!
Código Liquid para listar produtos de uma coleção específica (Ex: Destaques da Semana):
Nossos Destaques
{% assign destaques = collections['destaques-da-semana'] %} {# Pega a coleção pelo seu handle #}
{% if destaques.products.size > 0 %}
{% for product in destaques.products %}
{% if product.featured_image %}

{% else %}

{% endif %}
{{ product.title }}
{{ product.price | money }}
{% endfor %}
{% else %}
Nenhum destaque para exibir no momento.
{% endif %}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
padding: 20px;
}
.product-item {
border: 1px solid #eee;
padding: 10px;
text-align: center;
background-color: #f9f9f9;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.product-item img {
max-width: 100%;
height: 200px; / Altura fixa para consistência /
object-fit: contain; / Garante que a imagem se encaixe sem cortar /
margin-bottom: 10px;
}
.product-item h3 {
font-size: 1.1em;
margin: 5px 0;
}
.product-item p {
font-weight: bold;
color: #007bff;
}
.product-item a {
text-decoration: none;
color: inherit;
}
Explicação do Código:
-
{% assign destaques = collections['destaques-da-semana'] %}: Esta linha é crucial! Ela atribui a coleção com ohandle'destaques-da-semana'(que é gerado automaticamente a partir do título, mas você pode editar no SEO) a uma variável Liquid chamadadestaques. -
{% if destaques.products.size > 0 %}: Verifica se a coleção tem produtos antes de tentar exibi-los. -
{% for product in destaques.products %}: Itera sobre cada produto dentro da coleçãodestaques. -
product.url: O link para a página individual do produto. -
product.featured_image: A imagem principal do produto. -
product.title: O título do produto. -
product.price | money: O preço do produto formatado para a moeda da loja.
Estes exemplos mostram a base de como as coleções são usadas na parte de código do Shopify, o Liquid. Não se preocupem se parecer um pouco complexo agora; teremos aulas específicas sobre edição de tema e Liquid mais adiante! O importante é entender que os dados que você insere no admin se tornam acessíveis via Liquid.
🎯 Exercícios e Desafios
Hora de colocar a mão na massa!
1. Crie uma Coleção Manual “Novidades da Semana”:
- Crie uma nova coleção manual.
- Adicione 5 produtos que você gostaria de destacar como “novidades”.
- Defina uma imagem de coleção que seja chamativa.
2. Crie uma Coleção Automatizada “Ofertas Imperdíveis”:
- Crie uma coleção automatizada.
- Defina as condições para incluir produtos com a tag
promocaoOU produtos cujoPreço é menor que R$ 40.00. - Certifique-se de que você tem produtos com essas características, ou crie alguns!
3. Crie uma Coleção Automatizada “Livros” (ou um tipo de produto relevante para sua loja):
- Crie uma coleção automatizada baseada no
Tipo de produto(ex: “Livro”, “Eletrônico”, “Roupa”). - Certifique-se de que todos os produtos com esse tipo sejam incluídos automaticamente.
4. Desafio EXTRA (para quem gosta de código!):
- No admin, vá em
Loja Online > Temas. Clique em...eEditar código. - Procure por um arquivo como
index.liquid(que geralmente é o template da homepage). - Tente adicionar o primeiro bloco de código Liquid (
) em algum lugar na
Nossas Categorias
...
index.liquidpara ver suas coleções listadas. Atenção: Faça um backup do seu tema antes de editar, ou edite uma cópia do tema!
📝 Resumo da Aula
Nesta aula, desvendamos o poder das coleções na Shopify. Aprendemos que elas são essenciais para a organização, navegação, UX e SEO da sua loja. Exploramos os dois tipos fundamentais: Manuais (para controle total) e Automatizadas (para automação com base em condições).
Passamos pelo processo de criação no painel administrativo, configurando títulos, descrições, imagens e, crucialmente, as condições para as coleções automatizadas usando tags, tipos de produtos e preços. Finalizamos com exemplos práticos e um vislumbre de como o Liquid acessa e exibe esses dados no seu tema. Com as coleções, sua loja deixa de ser um amontoado de produtos e se transforma em um catálogo bem estruturado e fácil de explorar! 🗺️
🚀 Preparação para próxima aula
Agora que nossos produtos estão organizados em coleções lógicas, o próximo passo é garantir que seus clientes possam encontrá-las e navegar por elas facilmente!
Na Aula 13, mergulharemos no mundo da Navegação e Menus da Shopify. Veremos como criar menus de navegação eficazes, vincular suas coleções (e páginas, blogs, etc.) a esses menus e entender como a estrutura do menu impacta diretamente a usabilidade da sua loja. Prepare-se para construir os caminhos que levarão seus clientes aos seus produtos! 🧭
📚 Recursos Adicionais
- Documentação Oficial Shopify: Sobre coleções
- Documentação Oficial Shopify: Condições de coleção automatizadas
- Documentação Liquid: Objeto
collection - Documentação Liquid: Objeto
collections(global)
Até a próxima, pessoal! Continuem praticando e explorando! 🚀