Skip to main content

​
Descripción general

Esta sección te permite cambiar la apariencia de los elementos existentes del carrito o aplicar estilos al HTML personalizado agregado a través del editor.

​
Dónde encontrarlo

Ve a:
Upcart > Cart Editor > Settings > Custom CSS
Settings es una fila de pestañas; Custom CSS es una de ellas, junto a Custom HTML. Si no está visible, se encuentra detrás de More settings.

​
Cómo funciona

Puedes agregar CSS para:
  • Dar estilo a los elementos predeterminados del carrito
  • Modificar la apariencia del HTML personalizado
  • Ajustar espaciado, alineación, tipografía y más
A medida que escribes, un popup de autocompletado sugerirá selectores válidos de Upcart para ayudarte a editar más rápido. Al seleccionar una sugerencia, la regla se autocompleta y te ayuda a estructurar tu código. Si los cambios no aparecen como esperas, revisa las sugerencias comunes de solución de problemas, como actualizar las cachés tanto en el navegador como en el editor de Upcart, comprobar la ubicación del CSS y asegurar la especificidad adecuada en tus reglas CSS.

​
Uso de selectores

Upcart ofrece una amplia gama de selectores personalizados. Haz clic en “Show list” para ver todas las opciones disponibles. Evita usar selectores globales como body, div o h3 a menos que estén acotados con .upcart-cart, para evitar cambios no intencionados en tu tienda. Para situaciones donde los estilos no se aplican correctamente, considera aumentar la especificidad del CSS o agregar !important a tus reglas CSS. Hacerlo garantiza que anulen cualquier estilo en conflicto. Ejemplo:
Ejemplo (selector seguro):

​
Ejemplo: Dar estilo a un mensaje de agradecimiento

Supongamos que agregaste este HTML personalizado debajo del botón de pago:
Sin CSS, el mensaje se verá sencillo. Para darle estilo:

​
Problemas comunes y soluciones

​
El CSS no aparece en dispositivos móviles

Si tu texto o estilos personalizados no son visibles en móvil:
  • Actualiza la página tanto en el Upcart Editor como en tu navegador móvil para limpiar las versiones en caché.
  • Asegúrate de que la última versión publicada del carrito esté activa.
  • Confirma que el CSS esté guardado en la pestaña Custom CSS en Upcart > Cart Editor > Settings.

​
Discrepancias entre el editor y la tienda en vivo

Si los estilos se muestran correctamente en el editor pero no en el sitio en vivo, puede que necesiten mayor especificidad de selector o que se agregue !important a las reglas clave.

​
Uso incorrecto de selectores CSS

Verifica que se esté apuntando a la clase o al ID correctos. Incluye siempre prefijos como .upcart- para los elementos específicos de Upcart, a fin de evitar resultados no deseados. Si el estilo no se aplica como esperas, asegúrate de que el selector .thank-you-message apunte con precisión al elemento HTML deseado y comprueba que el código CSS esté colocado en la pestaña correcta (Upcart > Cart Editor > Settings > Custom CSS).
Soporte para personalizaciones: El soporte de Upcart no puede ayudar a implementar o depurar CSS personalizado. Para ayuda avanzada con estilos, recomendamos trabajar con un Shopify Expert. Para solucionar problemas de CSS personalizado, consulta la sección de problemas comunes para obtener orientación sobre cómo resolver cuestiones como estilos que faltan en dispositivos móviles, discrepancias entre las vistas previas del editor y la tienda en vivo, y la ubicación incorrecta de selectores.