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

# Añadir una línea de subtotal a Upcart

> Para quienes prefieren que también se muestre una línea de subtotal encima del botón de pago

<div id="introduction">
  ## Introducción
</div>

Si la configuración de subtotal *(en la imagen de abajo)* no te funciona, aquí tienes un documento que explica cómo insertar una línea de subtotal manualmente.

<div id="enabling-subtotal-line">
  ## Activar la línea de subtotal
</div>

Puedes activar fácilmente la línea de subtotal en la configuración de diseño del carrito.

Aquí es donde se encuentra la configuración:

**Cart Editor > Design > General > Enable subtotal line**

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/subtotal-line-cart-editor-design-settings.png?fit=max&auto=format&n=uVGuDiyXpd6WOLO4&q=85&s=a1c15c581fe49f32c8144e25c23f5d5b" alt="Configuración de diseño del Cart Editor con la casilla Enable Subtotal Line resaltada" width="505" height="380" data-path="images/upcart/subtotal-line-cart-editor-design-settings.png" />

<div id="inserting-subtotal-via-code">
  # Insertar el subtotal mediante código
</div>

<div id="accessing-custom-css-and-html-settings">
  ## Acceder a la configuración de CSS y HTML personalizados
</div>

Para comenzar a personalizar el CSS de tu Upcart, sigue estos pasos:

1. Abre la aplicación Upcart desde tu panel.
2. Ve al Cart Editor.
3. Abre **Settings**. Es una fila de pestañas: elige **Custom HTML** o **Custom CSS** (están detrás de **More settings** si la fila se desborda).

<div id="html">
  ## HTML
</div>

Asegúrate de seleccionar una ubicación HTML para dirigir los cambios que te gustaría ver en Upcart. En nuestro caso, querríamos que la línea de subtotal esté "above the checkout button". Siéntete libre de cambiar el texto "Subtotal" de abajo para que coincida con tu idioma preferido.

```
<div   
  class="cart-subtotal-section"   
  style="display: flex; justify-content: space-between;"  
>  
  <span class="cart-subtotal-title">Subtotal</span>  
  <span class="cart-subtotal-value">{{UPCART_SUBTOTAL}}</span>  
</div>
```

Así es como debería verse tu configuración de HTML personalizado en Upcart:

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/subtotal-line-custom-html-settings-above.png?fit=max&auto=format&n=uVGuDiyXpd6WOLO4&q=85&s=28c3da390eca8817499ed35864f7f381" alt="Configuración de Custom HTML establecida en Above checkout button con el código de la línea de subtotal" width="1470" height="966" data-path="images/upcart/subtotal-line-custom-html-settings-above.png" />

<div id="css">
  ## CSS
</div>

En **Settings =>Custom CSS**, cambia el tamaño de fuente y los colores en el CSS personalizado según lo necesites. ¡No olvides pulsar "Save" cuando termines!

```
.cart-subtotal-section {  
  margin-bottom: 4px;  
}  
  
.cart-subtotal-title {  
  font-size: 24px;  
  color: red;  
}  
  
.cart-subtotal-value {  
  font-size: 18px;  
  color: green  
}
```

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/subtotal-line-custom-css-settings-cart.png?fit=max&auto=format&n=uVGuDiyXpd6WOLO4&q=85&s=2b4bd1b5ee98bc6eb5bb8f507a91ba31" alt="Configuración de Custom CSS mostrando las reglas de estilo del subtotal del carrito" width="1452" height="1032" data-path="images/upcart/subtotal-line-custom-css-settings-cart.png" />

***

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

El equipo de soporte de Upcart no puede ayudarte a implementar soluciones de CSS o HTML personalizados en tu carrito.

Si necesitas ayuda para diseñar o dar estilo a algo personalizado, te recomendamos [consultar a un Shopify Expert](https://www.shopify.com/partners/directory) o conversar con un LLM [usando nuestras pautas de prompts de IA](https://docs.aftersell.com/upcart/ai_prompt_suggestions_for_adding_custom_code_to_your_upcart_settings#ai-prompt-suggestions-for-adding-custom-code-to-your-upcart-settings).