Usa esta guía cuando los temas predeterminados están cerca, pero no lo suficiente. Cada ejemplo a continuación incluye un conjunto de CSS personalizado listo para pegar.
La forma más rápida es copiar uno de los temas de ejemplo, pegarlo en tu herramienta de IA favorita y pedir ajustes como “Hazlo menos redondeado, el color primario debe ser morado.”
Primeros Pasos
- En el panel de administración de Shopify, ve a Tienda en línea > Temas.
- Haz clic en Personalizar en el tema que deseas editar.
- Abre una plantilla de producto.
- Agrega el bloque Selección de Garantía PDP cerca de tu formulario de producto.
- Guarda los cambios.
- Previsualiza la página del producto y confirma que las opciones de garantía aparecen donde las esperas.
Mejor camino de inicio rápido: elige primero uno de los temas integrados, luego usa variables CSS personalizadas solo si deseas más control.
Referencia de Configuración
Tema
Elige uno de los presets integrados. Predeterminado: Minimal.
- Minimal
- Ambar
- Dark
- Brand Colors
- Mint
- Ocean
- Caramel Latte
- Valentine
- Retro
Brand Colors toma automáticamente los valores de color de tu tema de Shopify. Lee variables del tema como --color-accent-1, --color-accent-2, --color-background y --color-foreground. No es necesario pegar esos valores en las variables CSS personalizadas.
Redondez
Controla el estilo general de las esquinas del widget. Predeterminado: 12px. Esta configuración alimenta automáticamente los valores de radio de tarjeta, opción, cobertura e insignia del widget.
Mostrar insignia ‘Más Popular’
Muestra u oculta la insignia Más Popular en las opciones ya marcadas como más populares en los datos de tu plan de garantía. Predeterminado: activado. Si este interruptor está activado pero ninguna opción está marcada como más popular, la insignia no aparecerá.
Descripción de la garantía
Controla el texto descriptivo que se muestra bajo el encabezado del widget. Predeterminado: Extiende tu garantía y disfruta de tranquilidad con cobertura completa.
Mostrar ventajas
Muestra u oculta el área de ventajas para cada opción. Predeterminado: activado. Cuando está activado, los clientes pueden ver los detalles de cobertura de los planes seleccionados.
Encabezado de ventajas
Controla el texto del encabezado que se muestra sobre la lista de ventajas. Predeterminado: ¿Qué está Cubierto?.
Estilo de la lista de ventajas
Controla cómo se muestra cada ventaja. Predeterminado: Marcas de verificación.
- Marcas de verificación
- Puntos
- Guiones
Mostrar insignia ‘Oferta Especial’
Muestra u oculta la insignia superior en el encabezado del widget. Predeterminado: activado.
Texto de la insignia Oferta Especial
Controla el texto que se muestra dentro de la insignia Oferta Especial. Predeterminado: Oferta Especial.
Variables CSS personalizadas
Usa este campo para estilos avanzados. Ingresa solo declaraciones de variables CSS separadas por punto y coma. Los bloques CSS completos no son compatibles.
--cv-primary: #0f766e; --cv-border: #99f6e4; --cv-badge-special-bg: #0f766e;Importante:
- Usa solo variables
--cv-*en este campo. - No pegues selectores CSS completos ni bloques de reglas.
- Los nombres no compatibles se ignoran.
Ejemplos de Personalización
Terracotta Warmth
& {
--cv-primary: #c2410c;
--cv-border: #f97316;
--cv-border-muted: #fdba74;
--cv-background: #fffbf5;
--cv-background-gradient: linear-gradient(180deg, #fffbf5 0%, #ffedd5 60%, #fed7aa 100%);
--cv-card-shadow: 0 10px 18px -8px rgb(140 60 10 / 0.18), 0 4px 8px -6px rgb(140 60 10 / 0.1);
--cv-icon: #ea580c;
--cv-text: #431407;
--cv-muted-text: #9a3412;
--cv-option-hover-border: #fb923c;
--cv-option-selected-bg: #ffedd5;
--cv-option-selected-shadow: 0 0 0 2px #fdba74, 0 6px 10px -6px rgb(140 60 10 / 0.2);
--cv-option-title: #431407;
--cv-option-title-selected: #c2410c;
--cv-price: #431407;
--cv-price-selected: #ea580c;
--cv-badge-special-bg: #ea580c;
--cv-badge-special-text: #fff7ed;
--cv-badge-popular-bg: #fff7ed;
--cv-badge-popular-text: #c2410c;
--cv-badge-popular-border: #fdba74;
--cv-coverage-bg: #fed7aa;
--cv-coverage-title: #c2410c;
--cv-coverage-text: #431407;
--cv-coverage-icon: #ea580c;
--cv-footer-text: #9a3412;
--cv-footer-brand: #ea580c;
--cv-radio-accent: #ea580c;
--cv-radius-card: 18px;
--cv-radius-option: 12px;
--cv-radius-badge: 999px;
--cv-radius-coverage: 8px;
}Conversion Pop
& {
--cv-primary: #7c3aed;
--cv-primary-contrast: #ffffff;
--cv-border: #a78bfa;
--cv-border-muted: #c4b5fd;
--cv-background: #faf5ff;
--cv-background-gradient: linear-gradient(160deg, #ede9fe 0%, #ddd6fe 40%, #f5f3ff 95%);
--cv-card-shadow: 0 12px 20px -8px rgb(60 20 120 / 0.22), 0 4px 8px -6px rgb(60 20 120 / 0.12);
--cv-icon: #7c3aed;
--cv-text: #2e1065;
--cv-muted-text: #5b21b6;
--cv-option-hover-border: #a78bfa;
--cv-option-selected-bg: #ede9fe;
--cv-option-selected-shadow: 0 0 0 2px #c4b5fd, 0 6px 10px -6px rgb(60 20 120 / 0.2);
--cv-option-title: #2e1065;
--cv-option-title-selected: #6d28d9;
--cv-price: #2e1065;
--cv-price-selected: #7c3aed;
--cv-badge-special-bg: #6d28d9;
--cv-badge-special-text: #f5f3ff;
--cv-badge-popular-bg: #ede9fe;
--cv-badge-popular-text: #5b21b6;
--cv-badge-popular-border: #c4b5fd;
--cv-coverage-bg: #ddd6fe;
--cv-coverage-title: #2e1065;
--cv-coverage-text: #3b0764;
--cv-coverage-icon: #7c3aed;
--cv-footer-text: #5b21b6;
--cv-footer-brand: #7c3aed;
--cv-radio-accent: #7c3aed;
--cv-radius-card: 0px;
--cv-radius-option: 0px;
--cv-radius-badge: 999px;
--cv-radius-coverage: 0px;
}Minimal / Neutral
Úsalo si deseas un aspecto más limpio y de bajo contraste.
--cv-border: #e5e7eb;
--cv-border-muted: #e5e7eb;
--cv-background: #ffffff;
--cv-background-gradient: #ffffff;
--cv-card-shadow: 0 8px 20px -12px rgb(15 23 42 / 0.2);
--cv-primary: #111111;
--cv-icon: #111111;
--cv-text: #0f172a;
--cv-muted-text: #64748b;
--cv-option-hover-border: #111111;
--cv-option-selected-bg: #f8fafc;
--cv-option-selected-shadow: 0 0 0 1px #e2e8f0, 0 10px 16px -12px rgb(15 23 42 / 0.25);
--cv-option-title: #0f172a;
--cv-option-title-selected: #111111;
--cv-price: #0f172a;
--cv-price-selected: #111111;
--cv-badge-special-bg: #111111;
--cv-badge-special-text: #ffffff;
--cv-coverage-bg: #f3f4f6;
--cv-coverage-title: #111111;
--cv-coverage-text: #111111;
--cv-coverage-icon: #111111;
--cv-footer-text: #475569;
--cv-footer-brand: #111111;
--cv-radio-accent: #111111;Dark / Alto Contraste
Úsalo si tu tienda usa un diseño de página de producto oscuro.
--cv-border: #374151;
--cv-border-muted: #1f2937;
--cv-background: #0f172a;
--cv-background-gradient: linear-gradient(135deg, #111827 0%, #0f172a 65%);
--cv-card-shadow: 0 10px 20px -10px rgb(0 0 0 / 0.6);
--cv-primary: #fbbf24;
--cv-icon: #fbbf24;
--cv-text: #f9fafb;
--cv-muted-text: #9ca3af;
--cv-option-hover-border: #4b5563;
--cv-option-selected-bg: #1f2937;
--cv-option-selected-shadow: 0 0 0 2px #374151, 0 10px 16px -12px rgb(0 0 0 / 0.7);
--cv-option-title: #f9fafb;
--cv-option-title-selected: #fef3c7;
--cv-price: #f9fafb;
--cv-price-selected: #fbbf24;
--cv-badge-special-bg: #fbbf24;
--cv-badge-special-text: #111827;
--cv-coverage-bg: #111827;
--cv-coverage-title: #e5e7eb;
--cv-coverage-text: #cbd5f5;
--cv-coverage-icon: #fbbf24;
--cv-footer-text: #9ca3af;
--cv-footer-brand: #fbbf24;
--cv-radio-accent: #fbbf24;Alineado a la Marca
Usa primero el tema Brand Colors, luego agrega algunas sobreescrituras si deseas mayor énfasis o esquinas más suaves.
--cv-option-selected-shadow: 0 0 0 2px #fdba74, 0 8px 12px -10px rgb(154 52 18 / 0.2);
--cv-badge-popular-bg: #fff7ed;
--cv-badge-popular-text: #9a3412;
--cv-badge-popular-border: #fdba74;
--cv-radius-card: 18px;
--cv-radius-option: 14px;
--cv-radius-coverage: 10px;
--cv-radius-badge: 999px;Si deseas control total en lugar de colores basados en el tema, cambia de Brand Colors y establece los valores --cv-* relevantes directamente.
Referencia de Variables CSS
Paleta Principal y Superficie
| Variable | Descripción |
|---|---|
--cv-primary | Color de acento principal para estados seleccionados y destacados |
--cv-primary-contrast | Color de contraste emparejado con el primario. Presente en el mapa de temas, pero no usado directamente |
--cv-border | Color de borde para la tarjeta de garantía exterior |
--cv-border-muted | Color de borde predeterminado para las filas de opciones de garantía |
--cv-background | Color de fondo para cada fila de opción de garantía |
--cv-background-gradient | Fondo o degradado para la tarjeta principal de garantía |
--cv-card-shadow | Sombra alrededor de la tarjeta principal de garantía |
--cv-icon | Color para el ícono del widget cerca del encabezado |
--cv-text | Color de texto principal en todo el widget |
--cv-muted-text | Color de texto secundario para descripción y texto tenue |
Estados de Opción
| Variable | Descripción |
|---|---|
--cv-option-hover-border | Color de borde cuando el cliente pasa el cursor sobre una opción de garantía |
--cv-option-selected-bg | Color de fondo para la opción de garantía seleccionada |
--cv-option-selected-shadow | Sombra o contorno para la opción de garantía seleccionada |
--cv-option-title | Color predeterminado para el título de la opción de garantía |
--cv-option-title-selected | Color del título para la opción de garantía seleccionada |
--cv-price | Color de precio predeterminado |
--cv-price-selected | Color de precio para la opción de garantía seleccionada |
--cv-radio-accent | Color de acento del botón de radio |
Insignias
| Variable | Descripción |
|---|---|
--cv-badge-special-bg | Color de fondo para la insignia superior Oferta Especial |
--cv-badge-special-text | Color de texto para la insignia superior Oferta Especial |
--cv-badge-popular-bg | Color de fondo para la insignia Más Popular |
--cv-badge-popular-text | Color de texto para la insignia Más Popular |
--cv-badge-popular-border | Color de borde para la insignia Más Popular |
Sección de Cobertura
| Variable | Descripción |
|---|---|
--cv-coverage-bg | Color de fondo para el panel de ventajas o cobertura |
--cv-coverage-title | Color para el encabezado de ventajas |
--cv-coverage-text | Color para el texto de la lista de ventajas |
--cv-coverage-icon | Color para viñetas, marcas de verificación o marcadores de la lista de ventajas |
Pie de Página
| Variable | Descripción |
|---|---|
--cv-footer-text | Color del texto del pie de página |
--cv-footer-brand | Color para el texto de marca Coverly en el pie de página |
Tipografía y Sobreescrituras Avanzadas
| Variable | Descripción |
|---|---|
--cv-font-family | Sobreescritura de familia de fuente para el widget |
--cv-text-color | Sobreescritura de color de texto de nivel superior. Puede actuar como respaldo más amplio |
Sobreescrituras de Radio
| Variable | Descripción |
|---|---|
--cv-radius-card | Radio de esquina para la tarjeta de garantía exterior |
--cv-radius-option | Radio de esquina para cada fila de opción de garantía |
--cv-radius-coverage | Radio de esquina para el panel de ventajas o cobertura |
--cv-radius-badge | Radio de esquina para las insignias |
Notas
--cv-radiusse establece internamente desde la configuración de Redondez, pero los estilos actuales del widget usan las variables de radio más específicas listadas arriba.--cv-primary-contrastexiste en el mapa de temas, pero actualmente no cambia los estilos visibles del widget por sí solo.
Solución de Problemas
Mis cambios no se aplican
Verifica primero:
- Confirma que pegaste los valores en Variables CSS personalizadas.
- Confirma que cada entrada comienza con
--cv-. - Confirma que las declaraciones están separadas con punto y coma.
- Elimina cualquier selector como
.class { ... }— el campo acepta solo variables.
La insignia Más Popular no aparece
Ambas condiciones deben ser verdaderas:
- Mostrar insignia ‘Más Popular’ está activado.
- Al menos una opción de garantía está marcada como
most_popularen los datos de tu plan de garantía.
Las ventajas no aparecen
Verifica primero:
- Mostrar ventajas está activado.
- La opción de garantía seleccionada incluye datos de ventajas.
- Encabezado de ventajas y Estilo de la lista de ventajas están configurados como se espera.
El tema Brand Colors no se ve diferente
El preset Brand Colors depende de variables de color ya disponibles en tu tema de Shopify. Si tu tema no expone valores fuertes para esos colores, el widget puede verse similar a un estilo neutral. Prueba:
- Cambia a otro tema integrado.
- Agrega sobreescrituras explícitas de
--cv-*en Variables CSS personalizadas.
Los cambios de redondez son demasiado sutiles
La redondez actualiza múltiples valores de radio internos a la vez. Si deseas más control, sobreescribe --cv-radius-card, --cv-radius-option, --cv-radius-coverage y --cv-radius-badge individualmente.
Comienza con un preset de tema integrado, luego agrega variables CSS personalizadas solo donde las necesites. Eso da la configuración más rápida y el mantenimiento más fácil.