> ## 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 (V1)

> Este artículo describe los selectores CSS disponibles en Upcart Versión 1, que te permiten aplicar estilos personalizados al cajón de carrito heredado.

📝 **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](/es/upcart/upcart_css_selector_library_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.

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

<div id="css-selectors-library">
  # Biblioteca de selectores CSS
</div>

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.

<div id="general-settings">
  ## Configuración general
</div>

<div id="design-module">
  ### Módulo de diseño
</div>

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

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

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

<div id="body-settings">
  ## Configuración del cuerpo
</div>

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

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

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

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

<div id="recommendations-module">
  ### Módulo de recomendaciones
</div>

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

<div id="subscription-upgrades-module">
  ### Módulo de mejoras de suscripción
</div>

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

<div id="upsells-module">
  ### Módulo de upsells
</div>

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

<div id="product-settings">
  ### Configuración de productos
</div>

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

<div id="footer-settings">
  ## Configuración del pie de página
</div>

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

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

<div id="discount-codes-module">
  ### Módulo de códigos de descuento
</div>

<div id="savings-row">
  ### Fila de ahorros
</div>

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

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

<div id="note-2">
  ## Nota
</div>

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

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

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

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

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

<div id="upcart-settings-module">
  ## Módulo de configuración de Upcart
</div>

<div id="skeleton-selectors">
  ### Selectores de esqueleto
</div>

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

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