Si usás variantes de colores en tus productos, tus clientes van a poder elegir y comprar una opción de color específica entre las distintas variaciones que están agrupadas en un mismo producto. Por eso, es ideal que tus potenciales clientes puedan descubrir fácilmente todas las opciones de colores disponibles.
La funcionalidad que permite que se muestren los colores de un producto en el listado es muy útil para dar visibilidad de las opciones disponibles de forma rápida y sencilla.
Success
Esta funcionalidad no se encuentra disponible para los diseños Lima, Cali y Uyuni.
Warning
Si querés que las variantes de color se muestran en el listado de productos como círculos o cuadrados, es necesario:
- activar esta funcionalidad, ya que por defecto viene desactivada.
- que el producto tenga 2 o más variantes de color configuradas.
- que tus variantes de colores estén incluidas en la Lista de colores adicionales para variantes. De lo contrario, no van a mostrarse como pastillas o círculos, sino como texto.
En este tutorial te contamos cómo hacerlo.
¡Vamos a los pasos!
1. Ingresar a "Tienda online > Diseño" dentro del administrador de tu tienda, y hacer clic en el botón de "Editar diseño".
2. Elegir la opción de "Listado de productos".
3. Después, deslizar hacia abajo hasta la sección de "Variantes de color". Tildar la opción de "Mostrar variantes de color en listado de productos".
4. Hacer clic en el botón de "Publicar cambios".
¡Listo!
Ya vas a haber activado la opción para mostrar tus variantes de color en tu tienda.
Desktop (en computadora)
En la visualización de tu tienda en computadoras, las variantes de colores se van a mostrar con círculos o cuadrados según el diseño, indicando los colores disponibles:
Además, al hacer clic en cada opción, se va a mostrar la imagen asignada a cada variante que configuraste desde el formulario de productos de tu tienda.
Info
Para saber cómo asociar fotos de tus productos a variantes específicas, podés seguir el tutorial: ¿Cómo asignar una imagen a una variante?
Mobile (en celular)
En la visualización en celulares se le indicará a los usuarios cuántos colores están disponibles para ese producto, pero no se visualizarán las opciones:
Al hacer clic en la leyenda que indica la cantidad de colores, el usuario ingresará al detalle del producto y podrá ver las variantes disponibles.
¿Cómo personalizar aún más el estilo de las variantes?
Si buscás que las variantes de tu tienda online tengan una estética superior o funciones específicas, existen tres opciones dependiendo de tu objetivo y diseño:
Personalizar los colores mediante código CSS
Si querés que los círculos o pastillas de color coincidan exactamente con un tono o color de tu marca (usando un código hexadecimal) o cambiar su tamaño, podés hacerlo agregando códigos CSS.
Esta configuración requiere conocimientos técnicos. De no tenerlos, te sugerimos contactar a un diseñador web para que te ayude a implementarlo desde tu administrador.
Mostrar imágenes en lugar de colores en el listado
Actualmente, la opción de mostrar imágenes en lugar de círculos de colores dentro del listado de productos de forma nativa no está disponible.
Para implementarlo en tu tienda, es necesario modificar el código estructural de tu diseño, abriendo el FTP con la ayuda de un desarrollador web.
Fotos de variantes en el detalle del producto
En la página de detalle del producto, algunos diseños como Cali, Uyuni, Lima y Rio permiten mostrar fotos en lugar de colores de forma nativa.
Si usás uno de estos diseños, podés seguir los pasos de este tutorial: Mostrar variantes de color como botones en el detalle de producto.
Integrar la aplicación Parent ID
Si tenés productos creados de forma individual (por ejemplo: una remera azul, una roja y una verde como productos separados) y querés que se muestren dentro de cada uno como variantes con imagen, podés usar la aplicación Parent ID - Huapps.
Cómo funciona: La app vincula estos productos independientes. Al hacer clic en la imagen de una variante, el sistema redirige al cliente automáticamente al producto seleccionado. Es la opción más rápida si no querés editar el código de tu tienda.