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

# Primeros pasos con las personalizaciones de Upcart

> Aprende a usar HTML, CSS y JavaScript para crear funciones y estilos personalizados en tu cajón del carrito.

⚠️ **Aviso importante**

El ejemplo de personalización de este documento solo funciona con la V1.0 de los módulos de carrito de Upcart. Si actualizaste recientemente tu carrito a la Versión 2, este código de personalizaciones no funcionará. Deberás usar los nuevos selectores proporcionados para la Versión 2 en la [guía de migración.](/es/upcart/upcart_v20_migration_guide)

Consulta la demás documentación de personalización para conocer las soluciones de la V2.0.

<div id="overview">
  # Resumen
</div>

Upcart te da control total para modificar la apariencia y el comportamiento del carrito usando **Custom HTML**, **Custom CSS** y **JavaScript**. Estas herramientas te permiten agregar nuevas funciones, dar estilo a tu carrito para que coincida con tu marca o introducir lógica para mejorar el funcionamiento de tu carrito.

Esta guía cubre los conceptos básicos de cada una y muestra cómo comenzar. Cada sección incluye un ejemplo visual rápido para ayudarte a entender cómo se ven los cambios en la práctica.

***

Antes de comenzar, asegúrate de revisar la [política de personalización de Upcart](/es/upcart/upcart_customization_policy) para saber qué está y qué no está cubierto por nuestro equipo.

<div id="add-content-with-html">
  ## Agrega contenido con HTML
</div>

HTML se usa para agregar contenido estático como texto, banners o botones a tu carrito. Puedes elegir entre varias ubicaciones HTML en el editor de **Custom HTML** (p. ej., encima del botón de checkout, al final del carrito, entre artículos).

Casos de uso comunes:

* Agregar mensajes personalizados
* Insertar avisos legales o enlaces a políticas
* Destacar fechas límite de envío o información de entrega

**Ejemplo:**

```
<div style="text-align: center; font-weight: bold;">  
  Thanks for shopping with us!  
</div
```

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-html-thank-you-message.gif?s=a22b53d145994e29c3e327b272e1ce33" alt="Editor de Custom HTML de Upcart agregando un mensaje de agradecimiento encima del botón de checkout" width="2060" height="1080" data-path="images/upcart/customizations-custom-html-thank-you-message.gif" />

***

<div id="add-logic-with-javascript">
  ## Agrega lógica con JavaScript
</div>

JavaScript controla el comportamiento y la lógica del carrito. Puedes usarlo para mostrar u ocultar elementos, aplicar estilos condicionalmente o responder a los cambios del carrito en tiempo real.

Debes envolver tu código en una etiqueta `<script>` y colocarlo en **Custom HTML > Scripts (Before Load)** o **Above Announcements**, según el momento en que deba ejecutarse.

**Ejemplo: [Limitar el carrito a un upsell a la vez](/es/upcart/limit_the_cart_to_one_upsell_at_a_time):**

```
<script>  
  // Show upsells again when upsells are removed  
  window.upcartSubscribeItemRemoved((event) => {  
    if (event.item?.properties?.__upcartUpsell) {  
      const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
      if (upsells) upsells.style.display = "block";  
    }  
  });  
  
  // Hide upsells once one is added  
  window.upcartSubscribeUpsellsAddedToCart(() => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    if (upsells) upsells.style.display = "none";  
  });  
  
  // Check for upsell in cart when it loads  
  window.upcartSubscribeCartLoaded((event) => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    const items = event.cart.items || [];  
    const hasUpsell = items.some(item => item?.properties?.__upcartUpsell);  
    if (upsells && hasUpsell) {  
      upsells.style.display = "none";  
    }  
  });  
</script>
```

<Note>
  **Nota sobre versiones antiguas:** Los callbacks de `window.upcartOnItemRemoved`, `window.upcartOnAddUpsell` y `window.upcartOnCartLoaded` siguen funcionando, pero están obsoletos y registran advertencias en la consola. Usa `upcartSubscribeItemRemoved`, `upcartSubscribeUpsellsAddedToCart` y `upcartSubscribeCartLoaded` para todos los scripts nuevos.
</Note>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-html-hide-upsells.gif?s=eec41b0784bb4db819ee4ae1cd8a25e5" alt="Editor de Scripts Before Load de Custom HTML de Upcart con JavaScript ocultando el módulo de upsells" width="2060" height="1080" data-path="images/upcart/customizations-custom-html-hide-upsells.gif" />

***

🔧 **Nota para desarrolladores:**\
Upcart ofrece una [documentación completa de la API pública](https://rokt.notion.site/upcart-public-api) que enumera todas las funciones, variables y patrones de buenas prácticas disponibles para personalizaciones avanzadas. Recomendamos revisarla al crear scripts o integraciones más complejas.

***

<div id="style-your-cart-with-css">
  ## Da estilo a tu carrito con CSS
</div>

CSS controla el aspecto de los elementos de tu carrito. Úsalo para ajustar espaciados, colores, tamaños de fuente u ocultar elementos no deseados. **Custom CSS** es una de las pestañas bajo **Settings** (detrás de **More settings** si la fila de pestañas se desborda).

Casos de uso comunes:

* Cambiar los colores del título del producto o de los botones
* Ajustar el tamaño o la alineación de la fuente
* Agregar espacio entre secciones

**Ejemplo: Cambiar el color del título de los upsells en V1.0:**

```
.upcart-upsells-title {  
  color: #C20075 !important;  
  font-size: 25px;  
  font-style: italic;  
  text-align: center;  
}
```

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-css-editor-styling.gif?s=f676b9eef6e30c6c122028c0e7a38b6e" alt="Editor de Custom CSS de Upcart dando estilo al color del título de los upsells con una confirmación de cambios guardados" width="2060" height="1080" data-path="images/upcart/customizations-custom-css-editor-styling.gif" />

***

<div id="additional-resources">
  ## Recursos adicionales
</div>

¿Quieres mejorar tus habilidades de HTML, CSS o JavaScript? Consulta estas herramientas gratuitas:

* [W3Schools](https://www.w3schools.com/)
* [Codecademy](https://www.codecademy.com/?g_network=g\&g_productchannel=\&g_adid=528849219280\&g_locinterest=\&g_keyword=codecademy\&g_acctid=243-039-7011\&g_adtype=\&g_keywordid=kwd-41065460761\&g_ifcreative=\&g_campaign=account\&g_locphysical=9001394\&g_adgroupid=70492864474\&g_productid=\&g_source=%7Bsourceid%7D\&g_merchantid=\&g_placement=\&g_partition=\&g_campaignid=1726903838\&g_ifproduct=\&utm_id=t_kwd-41065460761:ag_70492864474:cp_1726903838:n_g:d_c\&utm_source=google\&utm_medium=paid-search\&utm_term=codecademy\&utm_campaign=INTL_Brand_Exact\&utm_content=528849219280\&g_adtype=search\&g_acctid=243-039-7011\&gad_source=1\&gad_campaignid=1726903838\&gbraid=0AAAAAon8KZFBIKQJ4KKGpsSVHO3yi2Njl\&gclid=CjwKCAjwx-zHBhBhEiwA7Kjq61-cNVEH2PzXZCcjcqIZS-0mCe8EEyPBJYyj4QRn5bma8OMqd3IJrBoCwjoQAvD_BwE)
* [Mozilla Developer Network (MDN)](https://developer.mozilla.org/en-US/)

<div id="support-for-customizations">
  ## Soporte para personalizaciones
</div>

El equipo de soporte de Upcart no puede ayudar con la implementación de código personalizado. Para cambios más avanzados, te recomendamos contratar a un [Shopify Expert](https://www.shopify.com/ca/partners/directory).