CSS personalizado

Configuración tiene un único campo de CSS personalizado, compartido por el widget de todas las campañas de tu tienda. Úsalo para los últimos retoques que no cubre la pestaña Widget › Estilo de una campaña — ajustar una fuente, cambiar espaciados, cambiar el estilo de un borde, u ocultar un elemento — en lugar de construir un widget distinto desde cero. La pestaña Estilo ya cubre colores, espaciado, radio de esquinas y efectos con campos simples; recurre a CSS personalizado solo cuando eso no sea suficiente, ya que una regla que añadas aquí se aplica en todas partes, no solo a una campaña.

Tu CSS se carga después de los propios estilos del widget, así que los sobrescribe sin necesitar !important para la mayoría de los cambios.

Límites

Regla	Valor
Longitud máxima	10 000 caracteres
Prohibido	Los caracteres </ en cualquier parte del CSS

Solo CSS plano. La restricción de </ existe porque tu CSS se incrusta en línea dentro de una etiqueta <script> en la página de producto, además de servirse desde la CDN — esa secuencia de caracteres exacta podría cerrar la etiqueta que la rodea antes de tiempo, y el CSS real nunca la necesita de forma legítima. No hay ninguna otra lista de bloqueo: selectores, consultas @media, animaciones y propiedades personalizadas están todos permitidos.

Los cambios se activan en tu próxima publicación, que empieza en cuanto haces clic en Guardar — no hay un paso separado de “publicar CSS”.

Consejo

Usa el botón Beautify (formatear) para reordenar lo que pegas antes de guardar — útil si estás copiando de una fuente minificada.

Ejemplos

La app no publica una referencia de clases, así que usa el inspector de tu navegador en una página de producto en vivo para encontrar la clase que quieres apuntar. Estos usan clases reales del markup actual del widget.

Ajusta la fuente del widget a la de tu tema:

.sfw { font-family: inherit; }

Pon el precio en negrita específicamente en el diseño de tarjetas de opciones:

.w-cards .price { font-weight: 700; }

Oculta la línea “You save” si prefieres mantener el widget minimalista:

.you-save { display: none; }

Ajusta el padding solo en pantallas estrechas, ya que las consultas @media funcionan con normalidad:

@media (max-width: 480px) {
  .sfw { padding: 8px; }
}

Precaución

El soporte no cubre el CSS personalizado. Si una regla rompe el diseño del widget — oculta el botón de añadir al carrito, superpone texto, o se rompe en un ancho de teléfono — eso es responsabilidad del CSS, no de la app. Pruébalo en una página de producto real con un ancho estrecho antes de confiar en él, y elimina la regla si no estás seguro de qué se rompió.

Enlaces relacionados: Diseños del widget, Texto y traducciones del widget.