📝 Nota Los selectores de V1 apuntan a los módulos del cajón de carrito heredado. Si ya actualizaste a V2, los selectores de módulos de esta página ya no coinciden; consulta la Biblioteca de selectores CSS de V2 para ver los selectores actuales. Vale la pena conocer dos excepciones: .upcart-cart y .upcart-cart-body están en la estructura del cajón y no en un módulo, por lo que siguen aplicándose en V2. Las correcciones de diseño que apuntan al cajón en su conjunto (limitar su ancho, detener el desbordamiento horizontal) siguen funcionando después de una actualización.

Descripción general

Si quieres cambiar la apariencia de tu carrito, como ocultar un precio, ajustar el tamaño del texto o reposicionar un botón, este es el lugar para empezar. Esta biblioteca de selectores CSS te proporciona las herramientas que necesitas para hacer esos cambios con tu propio código personalizado. Todos los selectores CSS disponibles están agrupados en este artículo, junto con enlaces a recursos útiles para escribir y probar tus estilos.

Nota

Aunque ofrecemos esta biblioteca para tu comodidad, el equipo de soporte de Upcart no puede ayudarte a crear ni a corregir código personalizado. Esto forma parte de nuestra Política de personalización. Te recomendamos consultar con un Shopify Expert para soluciones de código personalizado. Ver Shopify Experts

Cómo usar los selectores CSS de Upcart

Este artículo es una biblioteca de selectores CSS que puedes usar para dar estilo y personalizar tu cajón de carrito de Upcart. Cada selector apunta a una parte específica del carrito, como el encabezado, las filas de productos, los upsells, el módulo de recompensas y más. Puedes usar estos selectores para:

Ocultar o cambiar el estilo de elementos
Cambiar el espaciado, las fuentes o los colores
Ajustar el diseño según la imagen de marca de tu tienda

Para aplicar tu CSS, abre el Cart Editor, ve a Settings, selecciona la pestaña Custom CSS y pega tus estilos en el editor.

Qué debes saber antes de agregar CSS

Antes de lanzarte con tus estilos personalizados, aquí tienes algunos consejos para que todo salga bien. Te facilitarán probar los cambios, evitar sorpresas y conseguir el aspecto que quieres sin romper nada en tu carrito.

Lista de verificación de personalización con CSS:

Prueba en un entorno seguro: usa una vista previa o un tema no publicado cuando sea posible antes de publicar.
Empieza poco a poco: haz un cambio a la vez para que sea más fácil rastrear qué funcionó y qué no.
Pega los estilos en el lugar correcto: usa el campo Upcart Editor > Settings > Custom CSS para agregar tu código.
Usa la herramienta Inspeccionar: haz clic derecho en los elementos en tu navegador y selecciona Inspect para encontrar y probar selectores en vivo.
Evita las suposiciones: no todos los elementos aparecen en todos los carritos; prueba con diferentes carritos (con/sin recompensas, upsells, etc.).

Biblioteca de selectores CSS

A continuación tienes una lista de todos los selectores CSS disponibles en Upcart. Están agrupados por módulo (como encabezado, productos, upsells, etc.) para que te resulte más fácil encontrar lo que quieres personalizar. Úsala como referencia al escribir tus propios estilos.

Configuración general

Módulo de diseño


Selector CSS	Descripción
`.upcart-cart`	Contenedor principal del cajón del carrito.
`.upcart-cart-body`	Contiene el contenido principal del carrito.
`.upcart-backdrop`	La superposición oscura que aparece detrás del carrito.

Módulo de encabezado


Selector CSS	Descripción
`.upcart-header`	Contenedor del encabezado del carrito, incluidos el logotipo y el botón de cierre.
`.upcart-header-close-button`	Botón usado para cerrar el cajón del carrito.
`.upcart-header-close-button-icon`	El icono que se muestra dentro del botón de cierre.
`.upcart-header-logo`	Muestra la imagen del logotipo en el encabezado del carrito.
`.upcart-header-text`	El texto del título que se muestra en el encabezado del carrito.

Configuración del cuerpo

Módulo de anuncios


Selector CSS	Descripción
`.upcart-announcement`	Banner o sección de anuncios dentro del carrito.
`.upcart-announcement-skeleton`	Marcador de posición esqueleto para la sección de anuncios.

Módulo de recompensas


Selector CSS	Descripción
`.upcart-rewards`	Contenedor principal de la sección de recompensas.
`.upcart-rewards-message`	Muestra mensajes de progreso relacionados con las recompensas.
`.upcart-rewards-bar-background`	Capa de fondo de la barra de progreso de recompensas.
`.upcart-rewards-bar-foreground`	Relleno de primer plano/progreso de la barra de recompensas.
`.upcart-rewards-tier`	Representa un nivel específico en el sistema de recompensas.
`.upcart-rewards-tier-circle`	Indicador circular visual de un nivel de recompensa.
`.upcart-rewards-tier-icon`	Icono dentro del círculo de un nivel de recompensa.
`.upcart-rewards-tier-description`	Texto descriptivo debajo de cada nivel de recompensa.
`.upcart-rewards-skeleton`	Contenedor esqueleto de la sección de recompensas.
`.upcart-rewards-message-skeleton`	Esqueleto del mensaje de progreso de recompensas.
`.upcart-rewards-bar-skeleton`	Esqueleto de la barra de progreso de recompensas.

Módulo de recomendaciones


Selector CSS	Descripción
`.upcart-recommendation-module`	Envoltorio de todo el módulo de recomendaciones de productos.
`.upcart-recommendations-title`	Texto del título de la sección de recomendaciones.
`.upcart-recommendations-shop-now-button`	Botón para comprar un producto recomendado directamente desde el carrito.

Módulo de mejoras de suscripción


Selector CSS	Descripción
`.upcart-subscription-upgrade-section`	Sección para promocionar mejoras de suscripción en el carrito.
`.upcart-subscription-upgrade-button`	Botón usado para activar una mejora de suscripción.
`.upcart-subscription-upgrade-dropdown`	Menú desplegable para seleccionar las opciones de mejora de suscripción disponibles.

Módulo de upsells


Selector CSS	Descripción
`.upcart-upsells`	Contenedor principal de la sección de upsells.
`.upcart-upsells-module`	Envoltorio del módulo de upsells.
`.upcart-upsells-title`	Título de la sección de upsells.
`.upcart-upsells-button`	Botón para agregar artículos de upsell al carrito.
`.upcart-upsell-item-card`	Diseño de tarjeta para cada producto de upsell.
`.upcart-upsell-item-title`	Título del producto de upsell.
`.upcart-upsell-item-image-wrapper`	Envoltorio alrededor de la imagen del producto de upsell.
`.upcart-upsell-item-image`	Imagen del producto de upsell.
`.upcart-upsell-item-price`	Precio del artículo de upsell.
`.upcart-upsell-item-price-row`	Fila que contiene el precio y el precio de comparación.
`.upcart-upsell-item-compare-price`	Precio original (tachado) del upsell.
`.upcart-upsell-item-variant-selector`	Menú desplegable de variantes para productos de upsell.

Configuración de productos


Selector CSS	Descripción
`.upcart-products-section`	Contenedor de todos los productos del carrito.
`.upcart-product-item`	Envoltorio de un artículo de producto individual.
`.upcart-product-title`	Nombre del producto en el carrito.
`.upcart-product-title-link`	Enlace que envuelve el título del producto.
`.upcart-item-prices-row`	Fila que contiene la información de precios.
`.upcart-item-price`	Precio final que se muestra al cliente.
`.upcart-item-compare-price`	Precio original (tachado).
`.upcart-product-savings`	Ahorro específico de un artículo del carrito.
`.upcart-item-option`	Contenedor de las opciones del producto, como talla o color.
`.upcart-item-option-category`	Etiqueta de la categoría de opción del producto.
`.upcart-item-option-value`	Valor de la opción de producto seleccionada.
`.upcart-item-properties`	Envoltorio de los metadatos adicionales del producto.
`.upcart-item-property`	Propiedad individual del producto.
`.upcart-item-property-subscription`	Muestra los detalles de suscripción del artículo.
`.upcart-product-quantity-input`	Campo de entrada de cantidad del producto.
`.upcart-product-quantity-minus`	Botón para disminuir la cantidad.
`.upcart-product-quantity-plus`	Botón para aumentar la cantidad.
`.upcart-product-image-wrapper`	Envoltorio alrededor de la imagen del producto.
`.upcart-quantity-warning`	Contenedor de cualquier mensaje de límite de cantidad.
`.upcart-quantity-warning-text`	Texto de la advertencia de cantidad que se muestra al usuario.

Módulo de complementos


Selector CSS	Descripción
`.upcart-addons`	Contenedor principal de la sección de complementos.
`.upcart-addons-title`	Título de la sección de complementos.
`.upcart-addons-product-description`	Descripción del producto complementario.
`.upcart-addons-price`	Precio del producto complementario.
`.upcart-addons-compare-price`	Precio original (tachado) del complemento.
`.upcart-addons-toggle`	Interruptor para agregar/eliminar un complemento.
`.upcart-addons-image-wrapper`	Envoltorio de la imagen del complemento.

Módulo de códigos de descuento

Fila de ahorros


Selector CSS	Descripción
`.upcart-savings-row`	Envoltorio de toda la sección de descuentos/ahorros en el carrito.
`.styles_Footer__savingsCodes__`	Contenedor de la etiqueta (“Discounts”) y los códigos de descuento asociados.
`.upcart-discount-code-badge`	Envoltorio de cada insignia de código de descuento que se muestra en la interfaz.
`.upcart-discount-code-icon`	Contenedor del icono de descuento (p. ej., símbolo SVG de un tique).
`.upcart-discount-code-text`	Representación textual del código de descuento (p. ej., “AUTO 5”).
`.upcart-savings-amount`	Muestra la cantidad real ahorrada gracias a los descuentos.

Módulo de pagos exprés

Nota

Los botones de pagos exprés en Upcart funcionan como contenedores visuales, mientras que el contenido y la funcionalidad dentro de ellos están totalmente controlados por Shopify. Por ello, no podemos modificar su comportamiento ni su apariencia. Consulta la guía del Módulo de pagos exprés para obtener más información.


Selector CSS	Descripción
`.upcart-express-pay-buttons-container`	Contenedor de todos los botones de pago exprés.
`.upcart-express-pay-buttons-row`	Diseño en fila de los botones de pago exprés.
`.upcart-express-pay-button`	Selector general de un botón de pago exprés.
`.upcart-express-pay-button-shop-pay`	Botón específico de Shop Pay.
`.upcart-express-pay-button-google-pay`	Botón específico de Google Pay.
`.upcart-express-pay-button-paypal`	Botón específico de PayPal.
`.upcart-express-pay-button-apple-pay`	Botón específico de Apple Pay.
`.upcart-express-pay-button-amazon-pay`	Botón específico de Amazon Pay.
`.upcart-express-pay-button-meta-pay`	Botón específico de Meta Pay.

Módulo de insignias de confianza


Selector CSS	Descripción
`.upcart-trust-badge`	Contenedor de las insignias de confianza.
`.upcart-trust-badge-image`	Elemento de imagen usado en una insignia de confianza.

Módulo de notas adicionales


Selector CSS	Descripción
`.NotesModule_NotesModule__`	Contenedor de las notas adicionales.
`.NotesModule_NotesModule__titleContainer__`	Contenedor del título de la sección de notas
`.NotesModule_NotesModule__dropdownContainer__`	Título del menú desplegable de la sección de notas
`.NotesModule_NotesModule__textModule__ textarea`	Área de entrada para agregar una nota personalizada al carrito.

Módulo de configuración de Upcart

Selectores de esqueleto


Selector CSS	Descripción
`.upcart-skeleton`	Envoltorio general del cargador esqueleto del carrito.
`.upcart-product-item-skeleton`	Marcador de posición mientras se carga un producto.
`.upcart-product-image-skeleton`	Marcador de posición para la imagen de un producto.
`.upcart-product-title-skeleton`	Marcador de posición para el texto del título del producto.
`.upcart-product-price-container-skeleton`	Marcador de posición para el área de precios.
`.upcart-product-quantity-skeleton`	Marcador de posición para los controles de cantidad.
`.upcart-item-option-skeleton`	Marcador de posición para las opciones del artículo.
`.upcart-upsells-module-skeleton`	Esqueleto del módulo de upsells.
`.upcart-upsells-title-skeleton`	Esqueleto del título de la sección de upsells.
`.upcart-upsell-item-image-skeleton`	Esqueleto de la imagen del producto de upsell.
`.upcart-upsell-item-title-skeleton`	Esqueleto del título del producto de upsell.
`.upcart-upsell-item-price-skeleton`	Esqueleto del precio del producto de upsell.
`.upcart-upsells-button-skeleton`	Esqueleto del botón de acción del upsell.
`.upcart-trust-badge-skeleton`	Esqueleto del contenedor de insignias de confianza.
`.upcart-trust-badge-image-skeleton`	Esqueleto de la imagen de la insignia de confianza.
`.upcart-announcement-skeleton`	Marcador de posición esqueleto para los anuncios.
`.upcart-rewards-skeleton`	Esqueleto de la sección de recompensas.
`.upcart-rewards-message-skeleton`	Esqueleto de los mensajes de recompensas.
`.upcart-rewards-bar-skeleton`	Esqueleto de la barra de progreso de recompensas.
`.upcart-addons-skeleton`	Esqueleto de la sección de complementos.
`.upcart-addons-image-wrapper-skeleton`	Esqueleto de la imagen del producto complementario.
`.upcart-addons-skeleton-text-container`	Esqueleto del contenido de texto en los complementos.
`.upcart-discount-code-module-skeleton`	Esqueleto del módulo de códigos de descuento.
`.upcart-discount-code-input-skeleton`	Esqueleto del campo de entrada del código de descuento.
`.upcart-discount-code-button-skeleton`	Esqueleto del botón para aplicar el código de descuento.
`.upcart-checkout-button-container-skeleton`	Esqueleto del envoltorio del botón de pago.
`.upcart-checkout-button-skeleton`	Esqueleto del botón de pago.
`.upcart-express-pay-buttons-container-skeleton`	Esqueleto del contenedor de pagos exprés.
`.upcart-express-pay-button-skeleton`	Esqueleto de un botón individual de pago exprés.

Recursos útiles para empezar:

Primeros pasos con el CSS personalizado: aprende a agregar CSS personalizado en Upcart de forma segura.
Introducción a las personalizaciones en Upcart: entiende cómo funciona la personalización y por dónde empezar.
Usa IA para escribir código personalizado para Upcart: obtén ayuda para escribir CSS o JavaScript con indicaciones sencillas.
Mejores prácticas para aumentar las conversiones del carrito: optimiza el diseño de tu carrito con consejos probados.

Referencia de funciones del carrito

Referencia de CSS

Recetas de estilo

Recetas de funcionalidad

Plantillas personalizadas

API pública de Upcart

Biblioteca de selectores CSS de Upcart (V1)

Descripción general

Nota

Cómo usar los selectores CSS de Upcart

Qué debes saber antes de agregar CSS

Lista de verificación de personalización con CSS:

Biblioteca de selectores CSS

Configuración general

Módulo de diseño

Módulo de encabezado

Configuración del cuerpo

Módulo de anuncios

Módulo de recompensas

Módulo de recomendaciones

Módulo de mejoras de suscripción

Módulo de upsells

Configuración de productos

Configuración del pie de página

Módulo de complementos

Módulo de códigos de descuento

Fila de ahorros

Módulo de pagos exprés

Nota

Módulo de insignias de confianza

Módulo de notas adicionales

Módulo de configuración de Upcart

Selectores de esqueleto

Recursos útiles para empezar:

​Descripción general

​Nota

​Cómo usar los selectores CSS de Upcart

​Qué debes saber antes de agregar CSS

​Lista de verificación de personalización con CSS:

​Biblioteca de selectores CSS

​Configuración general

​Módulo de diseño

​Módulo de encabezado

​Configuración del cuerpo

​Módulo de anuncios

​Módulo de recompensas

​Módulo de recomendaciones

​Módulo de mejoras de suscripción

​Módulo de upsells

​Configuración de productos

​Configuración del pie de página

​Módulo de complementos

​Módulo de códigos de descuento

​Fila de ahorros

​Módulo de pagos exprés

​Nota

​Módulo de insignias de confianza

​Módulo de notas adicionales

​Módulo de configuración de Upcart

​Selectores de esqueleto

​Recursos útiles para empezar:

Descripción general

Nota

Cómo usar los selectores CSS de Upcart

Qué debes saber antes de agregar CSS

Lista de verificación de personalización con CSS:

Biblioteca de selectores CSS

Configuración general

Módulo de diseño

Módulo de encabezado

Configuración del cuerpo

Módulo de anuncios

Módulo de recompensas

Módulo de recomendaciones

Módulo de mejoras de suscripción

Módulo de upsells

Configuración de productos

Configuración del pie de página

Módulo de complementos

Módulo de códigos de descuento

Fila de ahorros

Módulo de pagos exprés

Nota

Módulo de insignias de confianza

Módulo de notas adicionales

Módulo de configuración de Upcart

Selectores de esqueleto

Recursos útiles para empezar: