⚠️ AVISO IMPORTANTE Estos selectores se aplican solo a la Versión 2 (V2) de los módulos de carrito de Upcart. Si usas la Versión 1 (V1), estos selectores no funcionarán. Para carritos V1, consulta la documentación de selectores CSS de la Versión 1, que cubre la estructura de módulos y los selectores heredados. Para comprobar qué versión usas, abre el Cart Editor y mira la parte superior del menú de la izquierda. Ahí aparece un menú desplegable Cart version una vez que todos los módulos del carrito están en V2; si no lo ves, tu carrito todavía tiene módulos V1. Para obtener más información sobre la migración de V1 a V2, consulta la guía de migración a V2.0.

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.).

Los siguientes selectores funcionan con la Versión 2 de los módulos de carrito de Upcart. V2 introduce un sistema de nomenclatura estructurado con prefijos de clase públicos e internos.

Pautas importantes para los selectores V2

⚠️ Usa solo selectores públicos para la personalización

Los selectores públicos (con el prefijo upcart-public-) forman parte de la API estable y es seguro usarlos para estilos personalizados
Los selectores internos (con el prefijo upcart-internal-) están reservados para uso interno y pueden cambiar sin previo aviso

✅ SÍ: usa nombres de clase públicos para los estilos

/* ✅ Correct usage */   
.upcart-public-header {     
    font-size: 18px;     
    font-weight: bold;   
}

❌ NO: sobrescribas nombres de clase internos ni uses selectores profundos

/* ❌ Avoid this */   
.upcart-internal-header {     
    font-size: 18px;     
    font-weight: bold;   
}    
  
/* ❌ Avoid this */   
.upcart-public-upsell div a {     
   font-size: 18px;     
   font-weight: bold;   
}

Selectores CSS

Componentes generales


Selector CSS	Descripción
`.upcart-public-skeleton`	Envoltorio general del cargador esqueleto del carrito.
`.upcart-public-component__button`	Componente de botón general usado en todos los módulos.
`.upcart-public-component-loader`	Componente de indicador de carga giratorio.
`.upcart-public-component-tag`	Envoltorio del componente de etiqueta.
`.upcart-public-component-tag__icon`	Icono dentro de una etiqueta.
`.upcart-public-component-tag__text`	Contenido de texto de una etiqueta.
`.upcart-public-component-tag__remove-button`	Botón de eliminar (“x”) dentro de una etiqueta eliminable.
`.upcart-public-component-collapse__dropdown-container`	Contenedor de secciones desplegables plegables.
`.upcart-public-component-collapse__expand-icon`	Icono que indica el estado de expandido/plegado.
`.upcart-public-component-carousel__container`	Envoltorio exterior de un carrusel.
`.upcart-public-component-carousel__window`	Ventana de recorte dentro de la cual se desplazan las diapositivas.
`.upcart-public-component-carousel__track`	La pista en movimiento que contiene las diapositivas.
`.upcart-public-component-carousel__slide`	Una sola diapositiva del carrusel.
`.upcart-public-component-carousel__button`	Botón de flecha anterior/siguiente.
`.upcart-public-component-progress-bar`	Componente de barra de progreso simple (sin segmentos).
`.upcart-public-component-progress-bar__track`	Pista de la barra de progreso simple.
`.upcart-public-component-progress-bar__fill`	Parte rellena de la barra de progreso simple.
`.upcart-public-component-progress-bar__milestone`	Marcador de hito en la barra de progreso simple.
`.upcart-public-component-progress-bar__milestone-icon`	Icono de un hito en la barra de progreso simple.
`.upcart-public-component-progress-bar__milestone-label`	Etiqueta de un hito en la barra de progreso simple.

Módulo de encabezado


Selector CSS	Descripción
`.upcart-public-header`	Contenedor principal del encabezado del carrito.
`.upcart-public-header__logo`	Imagen del logotipo en el encabezado del carrito.
`.upcart-public-header__close-button`	Botón usado para cerrar el cajón del carrito.
`.upcart-public-header__close-button-icon`	Icono que se muestra dentro del botón de cierre.

Módulo de anuncios


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

Módulos de recomendaciones y upsells


Selector CSS	Descripción
`.upcart-public-upsell`	Envoltorio principal del módulo de upsells.
`.upcart-public-upsell__header`	Encabezado de la sección de upsells.
`.upcart-public-upsell__title`	Texto del título de la sección de upsells.
`.upcart-public-upsell__shop-now-button`	Botón Shop Now en los artículos de upsell.
`.upcart-public-upsell__vertical-layout-wrapper`	Envoltorio del diseño vertical de upsells.
`.upcart-public-component-upsell-tile`	Diseño de tarjeta para cada producto de upsell/recomendación.
`.upcart-public-component-upsell-tile__image-container`	Contenedor de la imagen del producto de upsell.
`.upcart-public-component-upsell-tile__image`	Imagen del producto de upsell.
`.upcart-public-component-upsell-tile__info`	Sección de información de la tarjeta de upsell.
`.upcart-public-component-upsell-tile__title-link`	Envoltorio de enlace del título del producto.
`.upcart-public-component-upsell-tile__title`	Título del producto de upsell.
`.upcart-public-component-upsell-tile__rating-row`	Fila que contiene las valoraciones del producto.
`.upcart-public-component-upsell-tile__stars`	Visualización de la valoración con estrellas.
`.upcart-public-component-upsell-tile__star--partial`	Estrella parcial para valoraciones fraccionarias.
`.upcart-public-component-upsell-tile__reviews`	Visualización del número de reseñas.
`.upcart-public-component-upsell-tile__price-row`	Fila que contiene la información de precios.
`.upcart-public-component-upsell-tile__price-compare-at`	Precio original (tachado) del upsell.
`.upcart-public-component-upsell-tile__price`	Precio actual del artículo de upsell.
`.upcart-public-component-upsell-tile__variant-row`	Fila que contiene la selección de variantes.
`.upcart-public-upsell__skeleton`	Marcador de posición esqueleto del módulo de upsells.
`.upcart-public-upsell__skeleton-title`	Esqueleto del título de la sección de upsells.
`.upcart-public-upsell__skeleton-image`	Esqueleto de la imagen del producto de upsell.
`.upcart-public-upsell__skeleton-product-title`	Esqueleto del título del producto de upsell.
`.upcart-public-upsell__skeleton-product-price`	Esqueleto del precio del producto de upsell.

Módulo de notas


Selector CSS	Descripción
`.upcart-public-notes`	Contenedor principal de la sección de notas.
`.upcart-public-notes__text-container`	Contenedor del área de texto de las notas.
`.upcart-public-notes__textarea`	Área de entrada de texto para agregar una nota personalizada al carrito.

Módulo de código de descuento


Selector CSS	Descripción
`.upcart-public-discount-code`	Contenedor principal de la sección de código de descuento.
`.upcart-public-discount-code__form`	Envoltorio del formulario de entrada del código de descuento.
`.upcart-public-discount-code__input-wrapper`	Envoltorio del campo de entrada del código de descuento.
`.upcart-public-discount-code__input`	Campo de entrada para introducir códigos de descuento.
`.upcart-public-discount-code__suffix`	Elemento de sufijo del campo de entrada.
`.upcart-public-discount-code__error`	Visualización del mensaje de error para códigos no válidos.
`.upcart-public-discount-code__button`	Botón para aplicar el código de descuento.
`.upcart-public-discount-code__skeleton`	Marcador de posición esqueleto del módulo de código de descuento.
`.upcart-public-discount-code__skeleton-input`	Esqueleto del campo de entrada del código de descuento.
`.upcart-public-discount-code__skeleton-button`	Esqueleto del botón para aplicar el código de descuento.

Módulo de insignias de confianza


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

Módulo de recompensas por niveles


Selector CSS	Descripción
`.upcart-public-rewards`	Contenedor principal de la sección de recompensas.
`.upcart-public-rewards__message`	Muestra mensajes de progreso relacionados con las recompensas.
`.upcart-public-rewards__bar`	Contenedor de la barra de progreso de recompensas.
`.upcart-public-component-segmented-progress-bar`	Componente de barra de progreso segmentada.
`.upcart-public-component-segmented-progress-bar__segments-container`	Contenedor de todos los segmentos de la barra de progreso.
`.upcart-public-component-segmented-progress-bar__segment`	Segmento individual de la barra de progreso.
`.upcart-public-component-segmented-progress-bar__segment-fill`	Parte rellena de un segmento de la barra de progreso.
`.upcart-public-component-segmented-progress-bar__milestone`	Marcador de hito en la barra de progreso.
`.upcart-public-component-segmented-progress-bar__milestone--bottom`	Hito posicionado en la parte inferior.
`.upcart-public-component-segmented-progress-bar__milestone--top`	Hito posicionado en la parte superior.
`.upcart-public-component-segmented-progress-bar__milestone--middle`	Hito posicionado en el medio.
`.upcart-public-component-segmented-progress-bar__milestone-icon`	Icono que se muestra en un hito.
`.upcart-public-component-segmented-progress-bar__milestone-label`	Texto de etiqueta de un hito.
`.upcart-public-component-segmented-progress-bar__milestone-label--align-right`	Etiqueta de hito alineada a la derecha.
`.upcart-public-component-segmented-progress-bar__milestone-label--align-center`	Etiqueta de hito alineada al centro.
`.upcart-public-rewards__skeleton`	Contenedor esqueleto de la sección de recompensas.
`.upcart-public-rewards__skeleton-message`	Esqueleto del mensaje de progreso de recompensas.
`.upcart-public-rewards__skeleton-bar`	Esqueleto de la barra de progreso de recompensas.

Módulo de artículos del carrito


Selector CSS	Descripción
`.upcart-public-cart-items`	Envoltorio principal de la lista de artículos del carrito.
`.upcart-public-cart-item`	Envoltorio de un artículo individual del carrito.
`.upcart-public-cart-items-skeleton__content`	Cargador esqueleto de los artículos del carrito.
`.upcart-public-component-product-tile`	Envoltorio de un artículo de producto individual en el carrito.
`.upcart-public-component-product-tile__content`	Área de contenido de la tarjeta de producto.
`.upcart-public-component-product-tile__image-wrapper`	Envoltorio alrededor de la imagen del producto.
`.upcart-public-component-product-tile__image`	Imagen del producto en el carrito.
`.upcart-public-component-product-tile__info`	Sección de información de la tarjeta de producto.
`.upcart-public-component-product-tile__header`	Sección de encabezado de la tarjeta de producto.
`.upcart-public-component-product-tile__product-title`	Nombre del producto en el carrito.
`.upcart-public-component-product-tile__title-link`	Enlace que envuelve el título del producto.
`.upcart-public-component-product-tile__remove-button`	Botón para eliminar el producto del carrito.
`.upcart-public-component-product-tile__variant`	Visualización de la información de variantes.
`.upcart-public-component-product-tile__properties`	Envoltorio de los metadatos adicionales del producto.
`.upcart-public-component-product-tile__bundle`	Sección de información del paquete.
`.upcart-public-component-product-tile__product-pricing`	Sección de precios de la tarjeta de producto.
`.upcart-public-component-product-tile__price-compare-at`	Precio original (tachado).
`.upcart-public-component-product-tile__price`	Precio final que se muestra al cliente.
`.upcart-public-component-product-tile__price-group`	Envoltorio alrededor del precio y el precio de comparación.
`.upcart-public-component-product-tile__savings`	Ahorro específico de un artículo del carrito.
`.upcart-public-component-product-tile__controls`	Sección de controles (cantidad, etc.).
`.upcart-public-component-product-tile__quantity-selector`	Envoltorio del selector de cantidad.
`.upcart-public-component-product-tile__quantity-minus`	Botón para disminuir la cantidad.
`.upcart-public-component-product-tile__quantity-plus`	Botón para aumentar la cantidad.
`.upcart-public-component-product-tile__discount-codes`	Códigos de descuento aplicados al artículo.
`.upcart-public-component-product-tile__subscription-upgrade`	Sección de mejora de suscripción.
`.upcart-public-component-product-tile__subscription-upgrade-btn`	Botón que aplica la mejora de suscripción.
`.upcart-public-component-product-tile__select-wrapper`	Envoltorio del menú desplegable de selección.
`.upcart-public-component-product-tile__select`	Elemento de menú desplegable de selección.
`.upcart-public-product-properties__subscription`	Muestra los detalles de suscripción del artículo.
`.upcart-public-product-properties__item`	Propiedad individual del producto.
`.upcart-public-product-properties__link`	Enlace dentro de las propiedades del producto.
`.upcart-public-cart-items__key-value-pair`	Visualización de pares clave-valor para las propiedades del artículo.
`.upcart-public-bundle-properties`	Contenedor de las propiedades del paquete.
`.upcart-public-bundle-properties__variant-title`	Título de variante para artículos del paquete.
`.upcart-public-bundle-properties__header`	Encabezado de la sección de propiedades del paquete.
`.upcart-public-bundle-properties__item-components`	Contenedor de los componentes de los artículos del paquete.
`.upcart-public-bundle-properties__item-component-row`	Fila de cada componente de artículo del paquete.
`.upcart-public-bundle-properties__image-wrapper`	Envoltorio de la imagen del artículo del paquete.
`.upcart-public-bundle-properties__content`	Área de contenido del artículo del paquete.
`.upcart-public-bundle-properties__product-title`	Título del producto del artículo del paquete.

Módulo de complementos


Selector CSS	Descripción
`.upcart-public-addons`	Contenedor principal de la sección de complementos.
`.upcart-public-addons__image-wrapper`	Envoltorio de la imagen del complemento.
`.upcart-public-addons__content-wrapper`	Envoltorio del contenido de la información del complemento.
`.upcart-public-addons__content-title-wrapper`	Envoltorio del título del complemento.
`.upcart-public-addons__content-title`	Título del producto complementario.
`.upcart-public-addons__content-price`	Sección de precio del complemento.
`.upcart-public-addons__compare-at-price`	Precio original (tachado) del complemento.
`.upcart-public-addons__price`	Precio actual del producto complementario.
`.upcart-public-addons__content-description`	Descripción del producto complementario.
`.upcart-public-addons__toggle-wrapper`	Envoltorio del interruptor del complemento.
`.upcart-public-addons__toggle`	Interruptor para agregar/eliminar un complemento.
`.upcart-public-addons__toggle-switch`	Elemento de conmutación del interruptor.
`.upcart-public-addons__toggle-slider`	Elemento deslizante del interruptor.
`.upcart-public-addons__skeleton`	Marcador de posición esqueleto de la sección de complementos.
`.upcart-public-addons__skeleton-image`	Esqueleto de la imagen del producto complementario.
`.upcart-public-addons__skeleton-text`	Esqueleto del contenido de texto en los complementos.

Módulo de pagos exprés


Selector CSS	Descripción
`.upcart-public-express-payments__container`	Contenedor de los botones de pago exprés.

Módulo de resumen del carrito


Selector CSS	Descripción
`.upcart-public-cart-summary`	Contenedor principal del resumen del carrito.
`.upcart-public-cart-summary__discount-codes`	Contenedor de los códigos de descuento en el resumen.
`.upcart-public-cart-summary__discount-label`	Etiqueta de la sección de descuentos.
`.upcart-public-cart-summary__slide-codes`	Contenedor deslizante de los códigos de descuento.
`.upcart-public-cart-summary__total-discount`	Visualización del importe total del descuento.

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 (V2)

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:

Pautas importantes para los selectores V2

Selectores CSS

Componentes generales

Módulo de encabezado

Módulo de anuncios

Módulos de recomendaciones y upsells

Módulo de notas

Módulo de código de descuento

Módulo de insignias de confianza

Módulo de recompensas por niveles

Módulo de artículos del carrito

Módulo de complementos

Módulo de pagos exprés

Módulo de resumen del carrito

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:

​Pautas importantes para los selectores V2

​

​Selectores CSS

​Componentes generales

​

​Módulo de encabezado

​Módulo de anuncios

​Módulos de recomendaciones y upsells

​Módulo de notas

​Módulo de código de descuento

​Módulo de insignias de confianza

​Módulo de recompensas por niveles

​Módulo de artículos del carrito

​Módulo de complementos

​Módulo de pagos exprés

​Módulo de resumen del carrito

​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:

Pautas importantes para los selectores V2

Selectores CSS

Componentes generales

Módulo de encabezado

Módulo de anuncios

Módulos de recomendaciones y upsells

Módulo de notas

Módulo de código de descuento

Módulo de insignias de confianza

Módulo de recompensas por niveles

Módulo de artículos del carrito

Módulo de complementos

Módulo de pagos exprés

Módulo de resumen del carrito

Recursos útiles para empezar: