Cómo personalizar muestras de colores en Shopify
Las muestras de color por defecto funcionan, pero no siempre encajan con el diseño de tu tienda. Tal vez necesitas círculos más grandes, bordes redondeados, un tooltip al pasar el cursor o thumbnails de producto en lugar de colores sólidos. Todo eso se puede personalizar.
En este artículo te muestro las opciones de personalización de muestras de color en Shopify con Rubik Variant Images. Desde la forma básica hasta configuraciones avanzadas por producto.
Contenido
- Tipos de swatch disponibles
- Forma y tamaño
- Bordes y estado de selección
- Tooltips al pasar el cursor
- Mezclar tipos por opción
- Variantes agotadas
- Shadow DOM y conflictos de CSS
- Preguntas frecuentes
- Lectura adicional
Tipos de swatch disponibles
Rubik Variant Images ofrece tres tipos principales de muestras:
Swatches de color. Círculos o cuadrados rellenos con un color sólido. Rubik detecta automáticamente el color basándose en el nombre de la variante (por ejemplo, “Rojo” genera un swatch rojo). También puedes asignar colores personalizados con códigos hexadecimales.
Swatches de imagen. Thumbnails pequeños que muestran una foto del producto en esa variante. Ideales para ropa, accesorios y cualquier producto donde el color solo no transmite cómo se ve el artículo completo.
Botones tipo pastilla. Rectángulos redondeados con el nombre de la opción en texto. Perfectos para talla (S, M, L, XL), material (algodón, lino) y opciones que no tienen representación visual.
Cada tipo tiene un propósito específico. La diferencia entre muestras de color y dropdowns se explica en nuestro artículo comparativo.
Forma y tamaño
La forma de las muestras se configura desde la app. Las opciones principales son:
- Círculo: la forma más común para muestras de color. Visualmente limpia y fácil de reconocer.
- Cuadrado: útil cuando necesitas mostrar patrones o texturas que se ven mejor en un área cuadrada.
- Cuadrado redondeado: un punto medio entre las dos opciones. Moderno y suave.
El tamaño también es configurable. Muestras más grandes son más fáciles de tocar en móvil, pero ocupan más espacio. Para tiendas con muchas variantes de color (12 o más), un tamaño mediano evita que las muestras ocupen demasiado espacio vertical en la página.
Bordes y estado de selección
Cuando un cliente selecciona una muestra, necesita feedback visual claro. Rubik ofrece varias formas de indicar la selección:
Borde resaltado. La muestra seleccionada muestra un borde más grueso o de un color diferente. Es la opción más común y funciona bien en todos los fondos.
Check mark. Un icono de verificación aparece sobre la muestra seleccionada. Útil cuando los colores son muy similares y el borde solo no es suficiente para distinguir la selección.
Para variantes de colores claros (blanco, crema, amarillo claro), Rubik permite agregar un borde sutil por defecto para que la muestra sea visible sobre fondos blancos.
Tooltips al pasar el cursor
Los tooltips muestran el nombre del color cuando el cliente pasa el cursor sobre una muestra. “Azul marino”, “Verde oliva”, “Borgoña”. Eso ayuda a distinguir colores similares sin necesidad de hacer clic.
En móvil, donde no hay hover, el nombre del color puede mostrarse debajo de las muestras al tocar. Rubik maneja ambos comportamientos de forma automática.
Mezclar tipos por opción
Un producto puede tener opciones que requieren diferentes tipos de swatch. Por ejemplo:
- “Color” con círculos de color
- “Talla” con botones tipo pastilla
- “Diseño” con thumbnails de imagen
Rubik permite configurar un tipo diferente para cada opción dentro del mismo producto. No necesitas elegir un solo tipo para toda la tienda. Eso te da la flexibilidad de usar la presentación que mejor funcione para cada tipo de opción.
Variantes agotadas
Las variantes sin stock necesitan un tratamiento visual diferente. Rubik puede mostrar las muestras agotadas de varias formas:
- Tachadas: una línea diagonal sobre la muestra indica que no hay stock.
- Opacidad reducida: la muestra se ve más tenue que las disponibles.
- Ocultas: si prefieres no mostrar opciones sin stock, puedes ocultarlas por completo.
Mostrar las variantes agotadas (en lugar de ocultarlas) tiene una ventaja: el cliente ve que el producto existe en ese color y puede decidir esperar o buscar una alternativa. Ocultarlas es mejor cuando tienes muchas variantes y no quieres saturar la vista.
Shadow DOM y conflictos de CSS
Uno de los problemas más comunes con las apps de muestras de color es que el CSS del theme interfiere con los estilos de la app. Botones que cambian de forma, colores que no coinciden, espaciado incorrecto.
Rubik renderiza las muestras dentro de un Shadow DOM. Esto significa que los estilos de la app están aislados del CSS del theme. No hay conflictos. Las muestras se ven igual sin importar qué theme uses o qué personalizaciones hayas hecho.
Si necesitas configurar las imágenes de variantes desde cero, consulta nuestra guía de configuración paso a paso.
Preguntas frecuentes
¿Puedo cambiar la forma de las muestras de círculo a cuadrado?
Sí. Rubik ofrece círculo, cuadrado y cuadrado redondeado como opciones de forma. Se configura desde la app sin tocar código.
¿Cómo asigno un color personalizado a una muestra?
Rubik detecta colores automáticamente por el nombre de la variante. Si el color detectado no es exacto, puedes asignar un código hexadecimal personalizado desde la configuración de la app.
¿Las muestras se ven bien en todos los themes?
Sí. Rubik usa Shadow DOM para aislar los estilos de las muestras del CSS del theme. Eso evita conflictos visuales y garantiza una apariencia consistente en más de 350 themes.
¿Puedo usar thumbnails de producto como muestras?
Sí. Rubik soporta swatches de imagen que muestran un thumbnail del producto en cada variante. Es ideal para productos donde el color solo no basta para transmitir cómo se ve el artículo.
¿Cómo se muestran las variantes agotadas?
Puedes elegir entre mostrarlas tachadas, con opacidad reducida o directamente ocultas. La configuración se hace desde la app.
¿Puedo tener diferentes tipos de muestras para color y talla?
Sí. Rubik permite configurar un tipo diferente de swatch para cada opción del producto. Círculos para color, pastillas para talla, thumbnails para diseño.
Lectura adicional
