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

# Adicionando uma linha de subtotal ao Upcart

> Para quem prefere que uma linha de subtotal também seja exibida acima do botão de checkout

<div id="introduction">
  ## Introdução
</div>

Se a configuração de subtotal *(mostrada abaixo)* não está funcionando para você, aqui está um documento explicando como inserir uma linha de subtotal manualmente.

<div id="enabling-subtotal-line">
  ## Ativando a linha de subtotal
</div>

Você pode ativar facilmente a linha de subtotal nas configurações de Design do carrinho.

Veja onde encontrar a configuração:

**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="Configurações de Design do Cart Editor com a caixa de seleção Enable Subtotal Line destacada" width="505" height="380" data-path="images/upcart/subtotal-line-cart-editor-design-settings.png" />

<div id="inserting-subtotal-via-code">
  # Inserindo o subtotal via código
</div>

<div id="accessing-custom-css-and-html-settings">
  ## Acessando as configurações de Custom CSS e HTML
</div>

Para começar a personalizar o CSS do seu Upcart, siga estas etapas:

1. Abra o app Upcart no seu painel.
2. Navegue até o Cart Editor.
3. Abra **Settings**. É uma fileira de abas — escolha **Custom HTML** ou **Custom CSS** (elas ficam atrás de **More settings** se a fileira transbordar).

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

Certifique-se de selecionar uma localização de HTML para direcionar as alterações que você deseja ver no Upcart. No nosso caso, queremos que a linha de subtotal fique "acima do botão de checkout". Fique à vontade para alterar o texto "Subtotal" abaixo para o idioma da sua preferência.

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

É assim que suas configurações de HTML personalizado devem ficar no 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="Configurações de Custom HTML definidas como Above checkout button com o código da linha de subtotal" width="1470" height="966" data-path="images/upcart/subtotal-line-custom-html-settings-above.png" />

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

Em **Settings =>Custom CSS**, altere o tamanho da fonte e as cores no CSS personalizado conforme necessário. Não se esqueça de clicar em "Save" quando terminar!

```
.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="Configurações de Custom CSS mostrando as regras de estilo do subtotal do carrinho" width="1452" height="1032" data-path="images/upcart/subtotal-line-custom-css-settings-cart.png" />

***

<div id="support-for-customizations">
  ## 🚧 Suporte para personalizações
</div>

A equipe de suporte do Upcart não pode ajudar na implementação de soluções personalizadas de CSS ou HTML no seu carrinho.

Se você precisar de ajuda para projetar ou estilizar algo personalizado, recomendamos [consultar um Shopify Expert](https://www.shopify.com/partners/directory) ou conversar com um LLM [usando nossas diretrizes 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).