Como desativar a seleção automática de variantes de produto em uma página de produto da Shopify
Se você é um lojista da Shopify que vende várias variantes de um produto, a Shopify seleciona automaticamente uma variante quando um consumidor acessa a sua página de produto. Um exemplo disso é se você vende meias. Você pode ter cores diferentes para seus clientes escolherem, como amarelo, azul, vermelho, verde etc.
Observação: a Shopify está expandindo o limite de variantes para 2.048 variantes por produto, com disponibilidade geral prevista para o final de 2025. Atualmente, a maioria das lojas ainda tem o limite de 100 variantes, embora lojas Shopify Plus e lojas de desenvolvimento possam ter acesso antecipado ao limite aumentado.
Quando um consumidor acessa sua página de produto, a primeira variante desse produto é selecionada automaticamente. Se você quiser desativar a seleção automática para um produto, isso é possível.
Como desativar a seleção automática de variantes de produto
Para desativar a seleção automática das variantes de produto, você precisará adicionar prompts ao menu suspenso. Veja como fazer isso:
- Vá até o diretório Snippets e clique em Add a new snippet
- Mantenha o nome como ‘pick-an-option’
- Cole este código no novo arquivo de snippet e salve
- Vá até o diretório Layout e selecione theme.liquid
- Procure a tag </body> no final do arquivo
- Cole este código {% render ‘pick-an-option’ %} em uma linha acima dessa tag
- Clique em Save
- Em seguida, encontre o arquivo que contém o formulário de ‘add to cart.’ O atributo action nesse arquivo será /cart/add
- Depois de localizar o arquivo, procure um dos seguintes códigos
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>Ou…
<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>- Substitua isso pelo seguinte código
<option {% if forloop.length <= 1 and variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>- Por fim, clique em Save
Método para temas modernos da Shopify (Dawn & temas do Online Store 2.0)
Para temas mais novos da Shopify que usam a arquitetura do Online Store 2.0 (como o Dawn), o processo é diferente:
- Nos arquivos do seu tema, localize product-variant-options.liquid
- Encontre o código que contém {% if value.selected %} checked {% endif %}
- Remova ou modifique esse código para impedir a seleção automática
- Adicione validação em JavaScript para garantir que os clientes selecionem uma variante antes de adicionar ao carrinho
Observação: este método exige conhecimento técnico e pode afetar a funcionalidade do seu tema. Sempre crie um backup antes de fazer alterações.
Configurações de seleção automática específicas do tema
Se você estiver usando o Empire ou temas premium semelhantes, é possível desativar a seleção automática sem editar código:
- Vá para Online Store > Themes > Customize
- Navegue até Products > Form
- Desative a opção Auto-select first available variant
Consulte a documentação do seu tema para ver se esse recurso está disponível nas configurações.
Método com CSS para ocultar o Add to Cart até a seleção
Adicione este CSS no seu arquivo theme.liquid para ocultar o botão Add to Cart até que uma seleção seja feita:
<style>
body:has(.disabled-option:checked) .product-form__buttons button {
display: none !important;
}
</style>Solução alternativa: usar apps
Em vez de editar código, você pode usar estes apps de gerenciamento de variantes (em 2025):
- Variant Option Product Options (Plano grátis disponível, pago a partir de US$ 9,99/mês)
- Globo Product Options (Plano grátis disponível)
- OPTIS Product Options (Plano grátis disponível)
Esses apps desativam a seleção automática e oferecem recursos avançados como amostras de cor, lógica condicional e opções ilimitadas de produto.
Como alterar as configurações de add to cart
Você pode alterar essas configurações para garantir que os produtos não apareçam como indisponíveis antes de o cliente fazer uma seleção.
- Vá para Online Store e Themes
- Selecione o tema que você quer editar e escolha Actions
- Selecione Edit Language e vá até a caixa Filter items
- Digite ‘unavailable.’ Isso mostrará a tradução
- Altere Unavailable para Make a selection
Boas práticas para gerenciamento de variantes
- Implemente amostras de cor em vez de dropdowns para uma melhor experiência do usuário e mais conversões
- Use imagens específicas por variante que sejam exibidas automaticamente quando os clientes selecionarem as opções
- Configure alertas de baixo estoque e oculte automaticamente variantes sem estoque para gerenciar o inventário com eficiência
- Teste os seletores de variantes no mobile – considere implementar grupos de botões em vez de dropdowns para melhorar a usabilidade em telas touch
- Adicione mensagens de validação como “Selecione uma opção primeiro” para evitar confusão do cliente
Se você quiser ocultar determinadas variantes de produto sem excluí-las, isso também é possível.
