> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Biblioteca de selectores CSS de Upcart (V2)

> Este artículo describe los selectores CSS disponibles en Upcart Versión 2, diseñados para permitir estilos personalizados en el cajón de carrito actualizado y su estructura de módulos.

⚠️ **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](/es/upcart/upcart_css_selector_library_v1)**, 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](/es/upcart/upcart_v20_migration_guide).

<div id="overview">
  # Descripción general
</div>

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.

<div id="note">
  ## NOTA
</div>

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](/es/upcart/upcart_customization_policy).

Te recomendamos consultar con un Shopify Expert para soluciones de código personalizado.

[Ver Shopify Experts](https://www.shopify.com/ca/partners/directory)

##

<div id="how-to-use-upcart-css-selectors">
  # Cómo usar los selectores CSS de Upcart
</div>

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.

<div id="what-to-know-before-adding-css">
  # Qué debes saber antes de agregar CSS
</div>

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.

<div id="css-customization-checklist">
  ## Lista de verificación de personalización con CSS:
</div>

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

<div id="important-guidelines-for-v2-selectors">
  ## **Pautas importantes para los selectores V2**
</div>

⚠️ **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;   
}
```

#

<div id="css-selectors">
  # Selectores CSS
</div>

<div id="general-components">
  ### **Componentes generales**
</div>

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

#

<div id="header-module">
  ### **Módulo de encabezado**
</div>

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

<div id="announcements-module">
  ### **Módulo de anuncios**
</div>

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

<div id="recommendation-and-upsell-modules">
  ### **Módulos de recomendaciones y upsells**
</div>

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

<div id="notes-module">
  ### **Módulo de notas**
</div>

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

<div id="discount-code-module">
  ### **Módulo de código de descuento**
</div>

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

<div id="trust-badges-module">
  ### **Módulo de insignias de confianza**
</div>

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

<div id="tiered-rewards-module">
  ### **Módulo de recompensas por niveles**
</div>

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

<div id="cart-items-module">
  ### **Módulo de artículos del carrito**
</div>

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

<div id="add-ons-module">
  ### **Módulo de complementos**
</div>

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

<div id="express-payments-module">
  ### **Módulo de pagos exprés**
</div>

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

<div id="cart-summary-module">
  ### **Módulo de resumen del carrito**
</div>

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

<div id="helpful-resources-to-get-started">
  ## **Recursos útiles para empezar:**
</div>

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

##

##