Olá, pessoal! Sejam muito bem-vindos à nossa Aula 18 do curso “Loja Shopify do Zero ao Avançado”! 🚀

Se você chegou até aqui, parabéns! Já construímos uma base sólida para sua loja. Dominamos a estrutura, criamos produtos e coleções incríveis, e até personalizamos o visual com Liquid e CSS.

Nesta aula, vamos subir mais um degrau e explorar estratégias que aumentam diretamente o valor médio do pedido (AOV) e melhoram a experiência de compra dos seus clientes: cross-selling, upselling e produtos relacionados. São técnicas poderosas que todo e-commerce de sucesso utiliza!

Prepare-se para aprender a não só atrair clientes, mas também a incentivá-los a comprar mais e de forma mais inteligente. Vamos transformar a sua loja em uma máquina de vendas otimizada! 💪

—

Aula 18 – Loja Shopify do Zero ao Avançado: Cross-selling, upselling e produtos relacionados

📚 O que você vai aprender nesta aula

Nesta aula, você vai:

• Compreender os conceitos de cross-selling, upselling e produtos relacionados e suas diferenças.
• Identificar a importância dessas estratégias para o aumento do valor médio do pedido (AOV) e a satisfação do cliente.
• Explorar as funcionalidades nativas do seu tema Shopify para exibir produtos relacionados.
• Implementar produtos relacionados de forma manual usando Liquid, baseando-se em tags ou coleções.
• Utilizar Metafields para criar sugestões de cross-selling e upselling altamente personalizadas e específicas para cada produto.
• Entender quando e como usar aplicativos da Shopify App Store para automação e otimização.
• Aplicar dicas de boas práticas para maximizar a eficácia dessas técnicas sem sobrecarregar o cliente.

🔗 Conectando com aulas anteriores

Nas aulas anteriores, construímos as páginas de produto (Aula 11, 12, 13), trabalhamos com coleções (Aula 14) e até já demos os primeiros passos com Metafields (Aula 16) para adicionar informações extras aos produtos. Tudo isso será crucial hoje!

Lembre-se que já sabemos como exibir informações de um produto (product.title, product.images), como iterar sobre coleções (for collection in product.collections) e como acessar dados adicionais via Metafields. Agora, vamos juntar essas peças para criar seções dinâmicas de recomendação, que vão guiar o cliente em sua jornada de compra, oferecendo produtos complementares ou alternativas melhores.

Seu conhecimento em HTML, CSS e um pouco de JavaScript (para interações futuras) será fundamental para estilizar e talvez adicionar alguma funcionalidade extra a essas seções.

📖 Conteúdo Principal

O objetivo principal de qualquer loja online é vender. Mas não é só vender, é vender mais e melhor. E é exatamente aí que entram as estratégias de cross-selling, upselling e produtos relacionados.

1. Entendendo os Conceitos Essenciais

Vamos clarear o que cada um significa:

• Cross-selling (Venda Cruzada): 🤝

Conceito: Oferecer produtos complementares ao que o cliente já está comprando ou pensando em comprar. Pense em “compre isso com* aquilo”.

• Exemplo: Um cliente compra um smartphone. Você sugere uma capa, uma película protetora, fones de ouvido sem fio ou um carregador portátil.
• Onde aparece: Geralmente na página do produto, no carrinho de compras ou até mesmo no checkout.

• Upselling (Venda de Upgrade): ⬆️

Conceito: Convencer o cliente a comprar uma versão mais cara, melhor ou premium* do produto que ele já demonstrou interesse. Pense em “melhore a sua compra”.

• Exemplo: Um cliente está olhando um smartphone com 64GB de armazenamento. Você sugere a versão de 128GB ou 256GB do mesmo modelo, ou um modelo ligeiramente superior com mais recursos.
• Onde aparece: Mais comum na página do produto, antes do cliente adicionar ao carrinho.

• Produtos Relacionados (Recomendação): 🔄

Conceito: Exibir outros produtos que são similares ou que outros clientes compraram* após verem o produto atual. É uma forma mais passiva de recomendação, baseada em afinidade ou comportamento. Pense em “Quem viu este produto também viu…” ou “Você pode gostar de…”.

• Exemplo: O cliente está vendo uma camiseta preta básica. Você mostra outras camisetas de cores ou estilos semelhantes, ou calças que combinam.
• Onde aparece: Tipicamente na parte inferior da página do produto.

A chave para o sucesso dessas estratégias é a relevância. As sugestões precisam fazer sentido para o cliente e para o produto que ele está considerando.

2. Implementação no Shopify – Abordagens

No Shopify, temos várias maneiras de implementar essas estratégias, desde as mais simples e automatizadas até as mais customizadas e poderosas.

2.1. Funcionalidades Nativas do Tema (Produtos Relacionados) 🧩

A maioria dos temas modernos da Shopify já vem com uma seção de “Produtos Relacionados” embutida nas páginas de produto.

• Como funciona: Esses temas geralmente utilizam lógica interna para encontrar produtos que compartilham as mesmas coleções, tags ou até mesmo o mesmo fornecedor (vendor) do produto que está sendo visualizado.
• Vantagem: Fácil de configurar, não exige código.
• Desvantagem: A lógica de “relacionamento” é fixa e pode não ser a mais otimizada ou inteligente para o seu negócio. Você não tem controle total sobre quais produtos serão exibidos.
• Configuração: Você normalmente encontra essa opção no Editor de Tema (Loja Online > Temas > Personalizar), na seção de Páginas de Produto. Lá, você pode ativar/desativar a seção e, às vezes, definir o número de produtos exibidos.

(Screenshot/Vídeo Placeholder: Inserir aqui um print ou vídeo mostrando o editor de tema, navegando até uma página de produto e mostrando a seção de “Produtos Relacionados” e suas opções de configuração.)

2.2. Implementação Manual com Liquid (Produtos Relacionados) 🛠️

Para ter mais controle, podemos adicionar nossa própria lógica Liquid para exibir produtos relacionados. Esta é uma ótima opção quando você quer personalizar os critérios de relevância.

A ideia é:

1. Pegar as tags ou coleções do produto atual.

2. Iterar sobre outras coleções ou produtos.

3. Filtrar produtos que compartilham essas tags/coleções, excluindo o produto atual.

4. Exibir esses produtos.

Dica de Performance: Evite loops muito grandes em all_products diretamente, pois pode impactar a velocidade da sua loja. É mais eficiente iterar pelas product.collections e depois pelos produtos dentro dessas coleções.

2.3. Usando Metafields para Cross-selling e Upselling (Mais Avançado) 🌟

Esta é a abordagem mais poderosa para um controle preciso sobre cross-selling e upselling específicos. Com Metafields, você pode vincular produtos manualmente, garantindo que as sugestões sejam 100% relevantes e estratégicas.

Como funciona:

1. Criamos um Metafield do tipo “Referência de Produto” (ou “Lista de Referências de Produto”) no produto.

2. No painel de administração, editamos cada produto e selecionamos os produtos específicos que queremos sugerir como cross-sell ou upsell.

3. No código Liquid do seu tema, acessamos esse Metafield e exibimos os produtos vinculados.

Vantagem: Controle total, sugestões altamente relevantes.

Desvantagem: Exige configuração manual para cada produto, o que pode ser trabalhoso para catálogos muito grandes.

Relembre a Aula 16 sobre Metafields para criar os seus!

2.4. Apps da Shopify App Store (Automação e Otimização) 🤖

Para lojas com catálogos muito grandes, ou para quem busca otimização baseada em IA, testes A/B e funcionalidades mais sofisticadas, os apps da Shopify App Store são a solução ideal.

• Vantagens:
• Automação: Geram recomendações automaticamente, muitas vezes usando algoritmos inteligentes ou IA baseada no comportamento do cliente.
• Teste A/B: Alguns permitem testar diferentes estratégias e layouts para ver o que funciona melhor.
• Funcionalidades Avançadas: Podem criar pop-ups, bundles (kits de produtos), ofertas “compre um, leve outro”, e integrar com outras plataformas.
• Facilidade de Uso: Geralmente oferecem interfaces intuitivas para configuração sem código.
• Desvantagens:
• Custo: A maioria dos apps robustos tem um custo mensal.
• Performance: Alguns apps mal otimizados podem adicionar carga à sua loja e impactar a velocidade. Escolha com sabedoria!
• Dependência: Você fica dependente de um terceiro.

Quando usar: Quando a abordagem manual se torna inviável devido ao volume de produtos ou quando você precisa de inteligência avançada para as recomendações.

3. Dicas de Otimização e Boas Práticas ✨

• Relevância é Rei: Nunca sugira algo que não faça sentido. Isso frustra o cliente e prejudica a experiência.
• Não Sobrecarregue: Evite exibir muitas opções. Um pequeno número de sugestões (3 a 5) é ideal para não causar paralisia de escolha.
• Posicionamento Estratégico:
• Página de Produto: Ideal para upselling e cross-selling (ex: “Clientes que compraram X também compraram Y”).
• Carrinho de Compras: Ótimo para cross-selling de última hora (ex: “Não esqueça de adicionar…”).
• Checkout: Cuidado aqui, pois pode desviar a atenção. Use com moderação e apenas para ofertas muito irresistíveis. (Lembre-se que o checkout do Shopify tem limitações de personalização, a menos que você esteja no Shopify Plus).
• Testar e Analisar: Monitore as vendas e o comportamento do cliente. Quais sugestões geram mais conversões? Use ferramentas de análise (Google Analytics, Shopify Analytics) para otimizar suas estratégias.
• Clareza na Chamada para Ação (CTA): Use textos como “Complemente sua compra”, “Produtos que combinam”, “Upgrade para…”.

—

💻 Exemplos Práticos

Vamos colocar a mão na massa!

Para os exemplos abaixo, vamos assumir que você tem um snippet chamado product-card.liquid que renderiza um card de produto. Se você não o tem, crie um arquivo em snippets/product-card.liquid com o seguinte conteúdo básico (você pode ter algo mais complexo de aulas anteriores):

{% comment %}
snippets/product-card.liquid
Este snippet recebe um objeto 'product' e o renderiza como um card.
{% endcomment %}


{% if product.featured_image %}

alt="{{ product.featured_image.alt | escape }}"
loading="lazy">
{% else %}
{% comment %} Imagem placeholder se não houver imagem destacada {% endcomment %}

{% endif %}
{{ product.title }}

{% if product.price_varies %}
A partir de {{ product.price | money }}
{% else %}
{{ product.price | money }}
{% endif %}

Agora, vamos aos exemplos de implementação na sua sections/main-product.liquid (ou similar, onde o produto principal é exibido).

Exemplo 1: Produtos Relacionados Baseados em Tags (Liquid Manual)

Vamos adicionar uma seção de produtos relacionados que compartilham tags com o produto atual. Esta lógica tenta encontrar produtos na mesma coleção que o produto atual, e que também compartilham pelo menos uma tag.

1. Abra o arquivo: sections/main-product.liquid (ou o arquivo onde o produto é renderizado).

2. Adicione o código: Cole este código no final do arquivo, ou onde você deseja que a seção de produtos relacionados apareça.

{% comment %}
Seção de Produtos Relacionados (baseada em tags)
Adicione este código em sections/main-product.liquid ou similar
{% endcomment %}
{% assign current_product_tags = product.tags | join: ',' %}
{% assign related_products = '' %}
{% assign related_products_handles = '' %}
{% assign limit = 4 %} {# Limite o número de produtos relacionados a exibir #}
{% comment %}
Itera pelas coleções do produto atual.
Dentro de cada coleção, itera pelos produtos da coleção.
Verifica se o produto tem alguma tag em comum com o produto atual (exceto ele mesmo).
{% endcomment %}
{% for collection in product.collections %}
{% for related_product in collection.products %}
{% unless related_product.handle == product.handle %} {# Exclui o próprio produto #}
{% assign product_already_added = false %}
{% if related_products_handles contains related_product.handle %}
{% assign product_already_added = true %}
{% endif %}
{% unless product_already_added %}
{% for tag in related_product.tags %}
{% if current_product_tags contains tag %}
{% if related_products_handles.size < limit %}
{% assign related_products_handles = related_products_handles | append: related_product.handle | append: ',' %}
{% break %} {# Encontrou uma tag em comum, pode ir para o próximo produto #}
{% endif %}
{% endif %}
{% endfor %}
{% endunless %}
{% endunless %}
{% endfor %}
{% endfor %}
{% assign related_handles_array = related_products_handles | split: ',' %}
{% if related_handles_array.size > 1 %} {# Garante que há produtos para exibir (o split sempre retorna 1 item vazio se a string for vazia) #}

✨ Produtos que podem te interessar ✨

{% for handle in related_handles_array %}
{% if handle != blank %}
{% assign related_product_obj = all_products[handle] %}
{% if related_product_obj %}
{% render 'product-card', product: related_product_obj %}
{% endif %}
{% endif %}
{% endfor %}


{% else %}
Nenhum produto relacionado encontrado. Tente adicionar mais tags aos seus produtos!

{% endif %}

Explicação do Código:

• current_product_tags: Concatena todas as tags do produto atual em uma única string para facilitar a verificação.
• related_products_handles: Uma string que armazenará os handle dos produtos relacionados encontrados, separando-os por vírgula. Isso ajuda a evitar duplicatas e a buscar os produtos reais depois.
• O loop principal itera por todas as coleções que o produto atual pertence.

Dentro de cada coleção, ele itera por todos* os produtos dessa coleção.

• unless related_product.handle == product.handle: Garante que o próprio produto não seja listado como “relacionado”.
• if current_product_tags contains tag: Verifica se alguma tag do produto relacionado está contida na string de tags do produto atual.
• limit: Controla o número máximo de produtos a serem exibidos.
• Finalmente, após coletar os handles, dividimos a string e iteramos sobre all_products[handle] para obter o objeto completo do produto e renderizá-lo com o snippet product-card.

Exemplo 2: Cross-selling/Upselling via Metafields

Esta é a forma mais controlada de sugerir produtos específicos.

Passo 1: Criar o Metafield

1. No seu Admin Shopify, vá para Configurações > Dados personalizados > Produtos.

2. Clique em Adicionar definição.

3. Nome: Sugestões de Compra (ou algo como Cross-sell Products, Upsell Options).

4. Namespace e chave: custom.sugestoes_compra (ou o que você preferir).

5. Tipo de conteúdo: Selecione Produto e marque Lista de produtos.

6. Clique em Salvar.

(Screenshot/Vídeo Placeholder: Inserir aqui um print ou vídeo mostrando a criação do Metafield no admin.)

Passo 2: Atribuir produtos no Admin

1. Vá para a página de edição de um produto no seu Admin Shopify.

2. Role para baixo até a seção Metafields.

3. Você verá o Metafield Sugestões de Compra. Clique para adicionar produtos.

4. Selecione os produtos específicos que você quer sugerir para cross-selling ou upselling para este produto principal.

5. Clique em Salvar.

(Screenshot/Vídeo Placeholder: Inserir aqui um print ou vídeo mostrando a atribuição de produtos ao Metafield em um produto específico.)

Passo 3: Exibir no Código Liquid

Agora, vamos adicionar o código Liquid para exibir esses produtos vinculados via Metafield.

1. Abra o arquivo: sections/main-product.liquid (ou similar).

2. Adicione o código: Cole este código onde você deseja que as sugestões de cross-selling/upselling apareçam. Pode ser abaixo do botão “Adicionar ao Carrinho” ou perto da seção de produtos relacionados.

{% comment %}
Seção de Cross-selling/Upselling (via Metafields)
Adicione este código em sections/main-product.liquid ou similar
{% endcomment %}
{% assign suggested_products = product.metafields.custom.sugestoes_compra.value %}
{% if suggested_products != blank %}

🛒 Complemente sua compra! 🛒

{% for suggested_product in suggested_products %}
{% render 'product-card', product: suggested_product %}
{% endfor %}


{% endif %}

Explicação do Código:

• product.metafields.custom.sugestoes_compra.value: Este é o segredo! Quando o Metafield é do tipo “Lista de Referências de Produto”, .value retorna diretamente uma lista de objetos product completos, o que é extremamente conveniente.
• if suggested_products != blank: Verifica se há produtos atribuídos a este Metafield antes de renderizar a seção.
• O loop for simplesmente itera sobre a lista de produtos e os renderiza usando o nosso snippet product-card.

Exemplo 3: CSS Básico para Estilizar as Seções

Para que as seções fiquem visualmente organizadas, adicione este CSS ao seu arquivo assets/base.css ou assets/theme.css (ou onde você centraliza seus estilos):

css

/ Estilos para as Seções de Produtos Sugeridos /
.section-spacing {
margin-top: 40px;
padding: 20px 0;
border-top: 1px solid #f0f0f0;
}
.section-title {
font-size: 28px;
font-weight: 600;
margin-bottom: 25px;
text-align: center;
color: #333;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); / Responsivo para 220px de largura mínima /
gap: 25px;
justify-content: center;
margin: 0 auto;
max-width: 1200px; / Limita a largura máxima do grid /
}
/ Estilos para o Card de Produto (se você não tiver ainda) /
.product-card {
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 15px;
text-align: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
display: flex; / Para flexbox interno do card /
flex-direction: column;
justify-content: space-between;
height: 100%; / Garante que todos os cards tenham a mesma altura /
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}
.product-card a {
text-decoration: none;
color: inherit;
display: block; / Para o link cobrir todo o conteúdo /
}
.product-card img {
max-width: 100%;
height: auto;
aspect-ratio: 1 / 1; / Mantém a proporção quadrada /
object-fit: contain; / Garante que a imagem se ajuste sem cortar /
margin-bottom: 15px;
border-radius: 4px;
}
.product-card h4 {
font-size: 18px;
font-weight: 500;
margin-bottom: 8px;
color: #333;
line-height: 1.3;
}
.product-card .price {
font-size: 19px;
font-weight: bold;
color: #007bff; / Ou a cor primária da sua loja /
margin-top: 10px;
}
.no-related-products {
text-align: center;
margin-top: 30px;
color: #666;
font-style: italic;
}
/ Responsividade para telas menores /
@media (max-width: 768px) {
.product-grid {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 15px;
}
.section-title {
font-size: 24px;
}
}
@media (max-width: 480px) {
.product-grid {
grid-template-columns: 1fr; / Uma coluna em telas muito pequenas /
padding: 0 10px;
}
.section-title {
font-size: 22px;
}
}

Dica: Sinta-se à vontade para adaptar este CSS para combinar com o estilo visual da sua loja!

—

🎯 Exercícios e Desafios

Hora de praticar!

1. Básico (15-20 minutos):

• No seu tema, habilite e configure a seção de produtos relacionados nativa (se o seu tema a possuir) para alguns de seus produtos.
• Teste diferentes configurações (se disponíveis), como o número de produtos exibidos.

2. Intermediário (30-45 minutos):

• Implemente a seção de produtos relacionados baseada em tags (Exemplo 1) na página de produto do seu tema.
• Certifique-se de que seus produtos de teste têm tags em comum para que a lógica funcione.
• Adicione o CSS fornecido e ajuste-o para se adequar ao seu tema.

3. Avançado (45-60 minutos):

• Crie o Metafield de “Sugestões de Compra” conforme o Exemplo 2, Passo 1.
• Para 3 a 5 produtos da sua loja, atribua manualmente alguns produtos como sugestões de cross-selling/upselling usando este Metafield.
• Implemente o código Liquid para exibir essas sugestões (Exemplo 2, Passo 3) na sua página de produto.

Desafio Extra: Pense em uma forma de combinar as duas abordagens: exibir os produtos de Metafield primeiro* e, se não houver sugestões via Metafield, então exibir os produtos relacionados baseados em tags. (Dica: use um else ou elsif na sua lógica Liquid).

—

📝 Resumo da Aula

Nesta aula super prática, desvendamos o poder do cross-selling, upselling e produtos relacionados. Aprendemos que eles são mais do que meras sugestões; são ferramentas estratégicas para aumentar o AOV e enriquecer a jornada do cliente.

Vimos as diferentes formas de implementar essas táticas no Shopify:

• As funcionalidades nativas do tema para produtos relacionados simples.
• A flexibilidade do Liquid para criar lógicas personalizadas de recomendação baseadas em tags ou coleções.
• A precisão dos Metafields para vincular produtos específicos para cross-selling e upselling.
• E a força dos apps da Shopify App Store para automação e inteligência avançada.

Sempre priorize a relevância e a experiência do usuário. Com essas técnicas, sua loja não só vende, mas também cativa e oferece valor contínuo aos seus clientes.

—

🚀 Preparação para próxima aula

Uau, a sua loja está ficando cada vez mais completa! Na próxima aula, vamos focar em uma parte crucial do funil de vendas: o carrinho de compras e o mini-carrinho.

Vamos aprender a:

• Customizar a página do carrinho para torná-la mais persuasiva e fácil de usar.
• Implementar um mini-carrinho (ou “drawer cart”) para uma experiência de compra mais fluida e sem interrupções.
• Adicionar elementos que incentivem o checkout, como barras de progresso de frete grátis ou sugestões de upsell/cross-sell no próprio carrinho.

Prepare-se para otimizar o momento em que o cliente está prestes a finalizar a compra! 🛒

📚 Recursos Adicionais

• Documentação Shopify Liquid – Objeto product: https://shopify.dev/docs/api/liquid/objects/product (Revise as propriedades do produto que podemos usar)
• Documentação Shopify Liquid – Objeto all_products: https://shopify.dev/docs/api/liquid/objects/all_products (Entenda como acessar todos os produtos da loja)
• Shopify Help Center – Metafields: https://help.shopify.com/pt/manual/custom-data/metafields (Relembre a criação e gestão de Metafields)
• Shopify App Store – Recomendações de Produtos: Explore diferentes apps e suas funcionalidades.
• Exemplo de busca: https://apps.shopify.com/search?q=product+recommendations

Nos vemos na próxima aula! Até lá, pratique e personalize as sugestões na sua loja. Você está no caminho certo para se tornar um verdadeiro mestre Shopify! Professor Fábio aqui, e fico muito feliz com seu progresso! 👋