Temas y variables CSS

Los colores del widget están controlados por propiedades personalizadas de CSS. Puedes sobrescribirlas de dos maneras: desde el panel (sin necesidad de código) o con una regla CSS en tu tienda.

Desde el panel

Ve a Search → Search Engines → [tu motor] → Design y establece los colores visualmente. Los cambios se reflejan de inmediato sin tocar el código de tu tienda.

Ajuste Variable CSS
Color primario --ss-primary
Color secundario --ss-secondary
Color de texto --ss-text
Texto sobre primario --ss-text-on-primary
Texto sobre secundario --ss-text-on-secondary
Color del precio regular --ss-price-regular
Color del precio de oferta --ss-price-sale
Color del precio original --ss-price-old

Con CSS

Si necesitas un control más fino, sobrescribe las variables directamente en la hoja de estilos de tu tienda. El objetivo más fiable es el elemento raíz del widget, marcado con el atributo data-ss-root —todos los template sets lo llevan, sea cual sea su markup:

[data-ss-root] {
    --ss-primary:          #ff3366;
    --ss-text-on-primary:  #ffffff;
    --ss-price-sale:       #cc0000;
}

Los template sets integrados usan sus propios nombres de clase en ese mismo elemento raíz —.ss-overlay para los estilos superpuestos, .ss-wrapper para el anclado— así que .ss-overlay { --ss-primary: ... } también funciona, pero solo para esos sets concretos. [data-ss-root] funciona en todos, incluidos los personalizados.

Los colores del panel y las sobrescrituras CSS pueden coexistir —tu regla CSS siempre prevalecerá gracias a la especificidad de cascada.

💡 Esta página cubre solo el estilo de un template set ya existente. Construir el markup de un template set desde cero —incluyendo condicionales personalizados y soporte de Display options— se explica en Diseño personalizado (avanzado).

Siguientes pasos