Aula 10 - Loja Shopify do Zero ao Avançado: Dominando variações de produtos (tamanho, cor, material)

Olá, futuros mestres do Shopify! Sejam muito bem-vindos à nossa décima aula. 🚀

Na jornada de construção da sua loja virtual dos sonhos, um dos recursos mais poderosos e essenciais é a capacidade de oferecer produtos com diferentes opções e variações. Imagine vender uma camiseta que vem em vários tamanhos e cores, ou um anel disponível em diferentes materiais e tamanhos. Sem as variações, você teria que criar um produto separado para cada combinação, o que seria um pesadelo para você e para seu cliente!

Hoje, vamos desvendar tudo sobre as variações de produtos no Shopify, do painel de administração ao código Liquid, garantindo que você possa criar experiências de compra ricas e flexíveis. Vamos lá!

—

Aula 10 – Loja Shopify do Zero ao Avançado: Dominando variações de produtos (tamanho, cor, material)

📚 O que você vai aprender nesta aula

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

Entender o conceito e a importância das variações de produtos para uma loja Shopify.
Adicionar e gerenciar variações (opções e valores) para seus produtos diretamente no painel de administração do Shopify.
Configurar preços, SKUs, códigos de barras e estoque específicos para cada variação.
Atribuir imagens diferentes para variações específicas, melhorando a experiência visual do cliente.
Acessar e exibir dados de variações usando o Liquid em seus templates de tema.
Compreender como o formulário de “adicionar ao carrinho” funciona com as variações.
Introduzir a ideia de seletores de variação customizados, conectando com seu conhecimento de HTML/CSS/JS.
Aplicar boas práticas para organizar suas variações de forma eficiente.

🔗 Conectando com aulas anteriores

Nas aulas anteriores, especialmente na Aula 8: Adicionando seus primeiros produtos à loja, nós aprendemos a criar produtos básicos, configurar seus títulos, descrições, preços e imagens principais. Discutimos a importância de uma boa estrutura de dados para seus produtos.

Agora, vamos levar isso para o próximo nível! Os produtos que criamos eram “simples”, ou seja, sem opções de escolha para o cliente. Nesta aula, você aprenderá a transformar esses produtos em ofertas completas, com opções de personalização, como tamanho, cor ou material, que são cruciais para a maioria das lojas de e-commerce e que se integram perfeitamente com a estrutura de sections e blocks que veremos na próxima aula.

📖 Conteúdo Principal

1. O que são Variações de Produtos e por que são cruciais?

Imagine que você está vendendo uma camiseta. Ela não está disponível apenas em um modelo. Ela pode ter:

Tamanho: P, M, G, GG
Cor: Azul, Vermelho, Verde
Material: Algodão, Poliéster

Cada combinação dessas opções (ex: “Camiseta Azul, Tamanho M, Algodão”) é o que chamamos de uma variação (variant). As variações permitem que um único produto listado no seu painel de administração represente múltiplos itens físicos com características diferentes.

Por que são cruciais?

Melhora a Experiência do Usuário (UX): Clientes podem escolher facilmente as opções desejadas na mesma página do produto.
Gerenciamento Simplificado: Você gerencia um único produto no painel de administração, em vez de dezenas de produtos separados.
Controle de Estoque e Preço: Cada variação pode ter seu próprio estoque, preço, SKU e até mesmo seu próprio código de barras.
SEO: Manter todas as opções sob uma única URL de produto ajuda na otimização para motores de busca.
Relatórios: Facilita a análise de quais variações são mais populares.

2. Criando e Gerenciando Variações no Painel de Administração do Shopify

O processo de adicionar variações é bastante intuitivo no admin do Shopify. Vamos seguir um passo a passo.

Passo a passo:

1. Navegue até o Produto:

No seu painel de administração Shopify, vá para Produtos > Todos os produtos.
Clique no produto que você deseja adicionar variações (ou crie um novo).

2. Ative a Opção de Variações:

Role a página do produto para baixo até encontrar a seção “Variations” (ou “Variações”).
Marque a caixa “This product has multiple options, like size or color” (Este produto tem múltiplas opções, como tamanho ou cor).

(Simulação de Screenshot: Você verá uma caixa de seleção e, ao marcá-la, uma nova seção para configurar as opções e seus valores aparecerá abaixo.)

3. Adicione Suas Opções (Options):

Você verá campos para adicionar opções como “Tamanho”, “Cor”, “Material”. O Shopify permite até 3 opções diferentes por produto.
No primeiro campo, digite o nome da opção (ex: “Tamanho”).
No campo “Option values” (Valores da opção), digite os valores separados por vírgula (ex: P, M, G, GG).
Para adicionar outra opção (ex: “Cor”), clique em “Add another option” (Adicionar outra opção) e repita o processo (ex: “Cor” e valores Azul, Vermelho, Verde).

(Simulação de Screenshot: Campos de texto para “Option name” e “Option values” com sugestões. Botão “+ Add another option”.)

Dica importante: O Shopify irá gerar automaticamente todas as combinações possíveis entre as opções que você adicionou. Por exemplo, se você tem 3 tamanhos e 2 cores, ele criará 3 * 2 = 6 variações. O limite total é de 100 variações por produto.

4. Gerencie as Variações Geradas:

Após adicionar suas opções e valores, role para baixo e você verá uma tabela com todas as variações geradas.
Para cada variação, você pode configurar individualmente:
Price (Preço): Pode ser diferente para cada variação (ex: GG pode ser mais caro).
Compare at price (Preço de comparação): Para mostrar descontos.
Cost per item (Custo por item): Para seus relatórios internos.
SKU (Stock Keeping Unit): Um código único para cada variação, crucial para controle de estoque e integração com sistemas.
Barcode (Código de Barras): UPC, EAN, GTIN.
Quantity (Quantidade): O estoque disponível para aquela variação específica.
Weight (Peso): Para cálculo de frete.
Harmonized System (HS) code: Para envios internacionais.

(Simulação de Screenshot: Tabela listando cada variação (ex: “Camiseta / P / Azul”) com campos editáveis para Preço, SKU, Quantidade, etc. Opção de edição em massa.)

5. Atribuindo Imagens a Variações:

Uma funcionalidade fantástica é poder mostrar uma imagem diferente quando o cliente seleciona uma variação específica (ex: ao selecionar “Vermelho”, a imagem da camiseta vermelha aparece).
Na seção de variações, ao lado de cada variação, você encontrará um ícone de imagem (ou um quadrado para “Add image”).
Clique neste ícone e associe uma das imagens já carregadas para o produto a essa variação.

(Simulação de Screenshot: Coluna na tabela de variações com um ícone de imagem. Ao clicar, abre uma lightbox para selecionar a imagem do produto.)

6. Salve suas Alterações: Não se esqueça de clicar em Salvar no canto superior direito da página do produto.

3. Acessando Dados de Variações com Liquid no Frontend

Agora que configuramos as variações no admin, precisamos exibi-las na nossa loja. Isso é feito usando o Liquid nos arquivos do seu tema (geralmente em sections/main-product.liquid, snippets/product-card.liquid, ou templates/product.liquid).

O objeto product no Liquid contém todas as informações sobre o produto, incluindo suas opções e variações.

Principais Objetos Liquid para Variações:

product.options: Uma lista dos nomes das opções (ex: “Tamanho”, “Cor”).
product.options_with_values: Um array de objetos, onde cada objeto representa uma opção e seus valores (ex: { name: "Tamanho", values: ["P", "M", "G"] }). Útil para construir seletores.
product.variants: Um array de objetos, onde cada objeto representa uma variação específica (ex: { title: "P / Azul", price: 19.90, sku: "CAM001-P-AZ", inventory_quantity: 10, id: 123456789 }).
product.selected_or_first_available_variant: Retorna a variação selecionada atualmente pelo cliente (se houver), ou a primeira variação disponível se nenhuma for selecionada.
variant (dentro de um loop product.variants): O objeto de variação individual, com propriedades como variant.id, variant.title, variant.price, variant.sku, variant.available, etc.

Exemplo básico de como iterar sobre opções e variações:


{% comment %} Este código pode ir em sections/main-product.liquid ou product-template.liquid {% endcomment %}
{{ product.title }}
 📚 Informações da Aula
 Nível: Intermediário
 Tempo estimado: 15-20 minutos
 

{{ product.description }}

{% comment %} Exibir as opções disponíveis {% endcomment %}
{% if product.has_only_default_variant == false %} {# Verifica se o produto tem variações além da padrão #}
Opções disponíveis:
{% for option in product.options_with_values %}
{{ option.name }}:
{% for value in option.values %}
{{ value }}
{% unless forloop.last %}, {% endunless %}
{% endfor %}

{% endfor %}
{% endif %}
{% comment %} Exibir todas as variações para debug (não para o frontend final) {% endcomment %}
Todas as Variações (para fins de desenvolvimento):

{% for variant in product.variants %}

ID: {{ variant.id }} |
Título: {{ variant.title }} |
Preço: {{ variant.price | money }} |
SKU: {{ variant.sku }} |
Estoque: {% if variant.inventory_quantity > 0 %}{{ variant.inventory_quantity }} disponível{% else %}Esgotado{% endif %}
{% if variant.image %}

{% endif %}

{% endfor %}

4. Entendendo o Seletor de Variações Padrão do Shopify

O Shopify automaticamente renderiza um seletor de variações no seu template de produto, geralmente um elemento é crucial porque ele se comunica com o formulário de “Adicionar ao Carrinho”.

A Estrutura essencial do formulário “Adicionar ao Carrinho”:

Para que um produto com variações seja adicionado corretamente ao carrinho, você precisa de um formulário HTML que envie o ID da variação selecionada.

{% comment %} O seletor principal de variações. É CRUCIAL que o atributo 'name' seja "id" para que o Shopify identifique a variação. {% endcomment %}

Observações importantes:

O name="id" no padrão funcione, ele nem sempre é o mais bonito ou amigável. Para lojas mais sofisticadas, é comum transformar esses seletores em botões visuais, amostras de cor (swatches) ou outras interações.

Como isso funciona (visão geral, conectando com seu JS):

1. Mantenha o oculto para o ID da variação correspondente.
Atualizar outras informações na página (preço, SKU, imagem do produto, status de estoque) com base na variação selecionada.
Acionar a função change() no {# ... opções de variações geradas via Liquid ... #}

Dica de Ouro: O Shopify armazena os dados das variações em um objeto JavaScript global chamado product.variants (se o tema for moderno, pode estar dentro de window.Shopify.variants ou algo similar). Você pode usar esses dados para mapear as opções selecionadas pelo usuário para o ID da variação correta. Isso é um tópico mais avançado, mas é o caminho para criar seletores realmente personalizados.

6. Boas Práticas e Otimização
- Nomes de Opções Claros: Use “Tamanho”, “Cor”, “Material”, não “Opção 1”, “Opção 2”.
- Imagens por Variação: Sempre que possível, associe imagens específicas às variações (especialmente cores) para uma UX superior.
- SKUs Únicos: Garanta que cada variação tenha um SKU único e descritivo. Isso é vital para controle de estoque e relatórios.
- Limite de Variações: Cuidado para não exceder 100 variações, pois isso pode dificultar o gerenciamento e impactar o desempenho da página. Se você tem mais de 100 combinações, considere dividir o produto em vários produtos ou usar apps de personalização.
- Valores Consistentemente: Se uma opção é “Tamanho”, use “P”, “M”, “G”, e não “Pequeno”, “Médio”, “Large” misturados.
💻 Exemplos Práticos

Vamos aplicar o que aprendemos em um cenário real.

Exemplo 1: Adicionando Variações de uma Camiseta no Admin

Vamos criar uma “Camiseta Vintage” com opções de “Tamanho” e “Cor”.

1. Vá para Produtos > Todos os produtos e clique em Adicionar produto.

2. Preencha os dados básicos:
- Título: Camiseta Vintage Conforto
- Descrição: Uma camiseta super macia, perfeita para o dia a dia. Disponível em várias cores e tamanhos.
- Imagens: Carregue imagens da camiseta nas cores azul, vermelha e cinza.
3. Na seção “Variations”, marque a caixa “This product has multiple options…”

4. Adicione a primeira opção:
- Option name: Tamanho
- Option values: P, M, G, GG
5. Clique em “Add another option” e adicione a segunda:
- Option name: Cor
- Option values: Azul, Vermelho, Cinza
(Simulação de Screenshot: Tela do admin com as duas opções configuradas, e a tabela de variações sendo preenchida automaticamente com 4 tamanhos 3 cores = 12 variações.)*

6. Edite as variações:
- A tabela abaixo mostrará todas as 12 variações.
- Preço: Defina o preço base, digamos R$ 59,90. Para o GG, você pode colocar R$ 64,90.
- SKU: Preencha com SKUs lógicos, ex: CV-P-AZ para “Camiseta Vintage / P / Azul”.
- Estoque: Defina o estoque para cada variação (ex: 10 de cada, ou 5 de “P” e 20 de “M”).
- Imagens: Para cada variação de “Cor”, clique no ícone de imagem e associe a imagem correspondente.
- Para todas as variações com Cor: Azul, associe a imagem da camiseta azul.
- Para todas as variações com Cor: Vermelho, associe a imagem da camiseta vermelha.
- Para todas as variações com Cor: Cinza, associe a imagem da camiseta cinza.
(Simulação de Screenshot: Tabela de variações preenchida, mostrando SKUs, estoque e o ícone de imagem preenchido para as variações de cor.)

7. Clique em Salvar produto.

Exemplo 2: Exibindo Informações de Variações com Liquid no Frontend

Vamos modificar o template de produto para exibir as opções e o seletor.

1. Abra o Editor de Código do Tema: Vá em Loja Virtual > Temas > Ações > Editar código.

2. Navegue até o arquivo principal do produto: Geralmente sections/main-product.liquid ou templates/product.liquid.

3. Localize a área onde o formulário “Adicionar ao carrinho” é renderizado.

4. Insira o seguinte código Liquid (ou verifique se o seu tema já tem algo similar):
```
{% comment %} Início do formulário de produto com seletor de variações {% endcomment %}

{% comment %} Este loop cria os dropdowns para cada opção (Tamanho, Cor) {% endcomment %}
{% for option in product.options_with_values %}


{{ option.name }}


name="options[{{ option.name | handleize }}]"
id="Option-{{ forloop.index0 }}"
class="select"
data-index="option{{ forloop.index }}"
>
{% for value in option.values %}

{% endfor %}


{% endfor %}
{% comment %}
IMPORTANTE: Este é o select principal que o Shopify usa para identificar o ID da variante.
Ele pode ser ocultado com CSS se você usar seletores customizados, mas DEVE existir.
{% endcomment %}

{% comment %} Campo de quantidade e botão adicionar ao carrinho {% endcomment %}

Quantidade




{% comment %} Para exibir o preço da variação selecionada dinamicamente com JS, seria necessário mais código. {% endcomment %}

{{ product.selected_or_first_available_variant.price | money }}
```
Explicação do código:
- O primeiro loop {% for option in product.options_with_values %} cria os seletores (dropdowns) para cada opção de produto (Tamanho, Cor). Note o atributo name="options[{{ option.name | handleize }}]", que é como o Shopify espera receber as opções no formulário.
- O segundo

Aula 10 – Loja Shopify do Zero ao Avançado: Dominando variações de produtos (tamanho, cor, material)

Aula 10 – Loja Shopify do Zero ao Avançado: Dominando variações de produtos (tamanho, cor, material)

📚 O que você vai aprender nesta aula

🔗 Conectando com aulas anteriores

📖 Conteúdo Principal

1. O que são Variações de Produtos e por que são cruciais?

2. Criando e Gerenciando Variações no Painel de Administração do Shopify

3. Acessando Dados de Variações com Liquid no Frontend

{{ product.title }}

📚 Informações da Aula

Opções disponíveis:

Todas as Variações (para fins de desenvolvimento):

4. Entendendo o Seletor de Variações Padrão do Shopify

6. Boas Práticas e Otimização

💻 Exemplos Práticos

Exemplo 1: Adicionando Variações de uma Camiseta no Admin

Exemplo 2: Exibindo Informações de Variações com Liquid no Frontend