Cómo desactivar la selección automática de variantes de producto en una página de producto de Shopify
Si eres un comerciante de Shopify que vende varias variantes de un producto, Shopify selecciona automáticamente una variante cuando un cliente llega a tu página de producto. Un ejemplo de esto sería si vendes calcetines. Podrías tener diferentes colores entre los que tus clientes pueden elegir, como amarillo, azul, rojo, verde, etc.
Nota: Shopify está ampliando los límites de variantes a 2.048 variantes por producto, con disponibilidad general prevista para finales de 2025. Actualmente, la mayoría de las tiendas siguen teniendo el límite de 100 variantes, aunque las tiendas Shopify Plus y las tiendas de desarrollo pueden tener acceso anticipado al límite ampliado.
Cuando un cliente llega a tu página de producto, se selecciona automáticamente la primera variante de ese producto. Si quieres desactivar la selección automática para un producto, se puede hacer.
Cómo desactivar la selección automática de variantes de producto
Para desactivar la selección automática de variantes de producto, tendrás que añadir indicaciones al menú desplegable. Así es como se hace:
- Ve al directorio de Snippets y haz clic en Add a new snippet
- Mantén su nombre como ‘pick-an-option’
- Pega este código en el nuevo archivo de snippet y guárdalo
- Ve al directorio de Layout y selecciona theme.liquid
- Busca la etiqueta </body> al final del archivo
- Pega este código {% render ‘pick-an-option’ %} en una línea por encima de esa etiqueta
- Haz clic en Save
- A continuación, busca el archivo que contiene el formulario de ‘add to cart.’ El atributo action en este archivo será /cart/add
- Una vez que localices el archivo, busca uno de los siguientes 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>O…
<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>- Sustitúyelo por el siguiente 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 último, haz clic en Save
Método para temas modernos de Shopify (Dawn y temas de Online Store 2.0)
En los temas más nuevos de Shopify que usan la arquitectura de Online Store 2.0 (como Dawn), el proceso es diferente:
- En los archivos de tu tema, localiza product-variant-options.liquid
- Encuentra el código que contiene {% if value.selected %} checked {% endif %}
- Elimina o modifica este código para evitar la selección automática
- Añade validación con JavaScript para asegurarte de que los clientes seleccionen una variante antes de añadir al carrito
Nota: Este método requiere conocimientos técnicos y puede afectar a la funcionalidad de tu tema. Crea siempre una copia de seguridad antes de hacer cambios.
Ajustes de selección automática específicos del tema
Si estás usando Empire o temas premium similares, puedes desactivar la selección automática sin editar código:
- Ve a Online Store > Themes > Customize
- Navega a Products > Form
- Desactiva la opción Auto-select first available variant
Consulta la documentación de tu tema para ver si esta función está disponible en los ajustes del tema.
Método CSS para ocultar Añadir al carrito hasta que haya selección
Añade este CSS en tu archivo theme.liquid para ocultar el botón de Añadir al carrito hasta que se haga una selección:
<style>
body:has(.disabled-option:checked) .product-form__buttons button {
display: none !important;
}
</style>Solución alternativa: usar apps
En lugar de editar código, puedes usar estas apps de gestión de variantes (a fecha de 2025):
- Variant Option Product Options (Plan gratuito disponible, de pago desde 9,99 $/mes)
- Globo Product Options (Plan gratuito disponible)
- OPTIS Product Options (Plan gratuito disponible)
Estas apps se encargan de desactivar la selección automática y ofrecen funciones mejoradas como muestras de color, lógica condicional y opciones de producto ilimitadas.
Cómo cambiar los ajustes de add to cart
Puedes cambiar estos ajustes para asegurarte de que los productos no aparezcan como no disponibles antes de que el cliente haga una selección.
- Ve a Online Store y Themes
- Selecciona el tema que quieres editar y elige Actions
- Selecciona Edit Language y ve al cuadro Filter items
- Escribe ‘unavailable.’ Te mostrará la traducción
- Cambia Unavailable por Haz una selección
Mejores prácticas para la gestión de variantes
- Implementa muestras de color en lugar de desplegables para una mejor experiencia de usuario y más conversiones
- Usa imágenes específicas por variante que se muestren automáticamente cuando los clientes seleccionen opciones
- Configura alertas de stock bajo y oculta automáticamente las variantes sin stock para gestionar el inventario de forma eficaz
- Prueba los selectores de variantes en móvil: considera implementar grupos de botones en lugar de desplegables para mejorar la usabilidad en pantallas táctiles
- Añade mensajes de validación como “Selecciona una opción primero” para evitar confusiones
Si quieres ocultar ciertas variantes de producto sin eliminarlas, también se puede hacer.
