---
schema_version: "1"
id: b9412a1b81f0dfd28a4c604ebe22df4190ca58f7bcde722d290f230c4e64d837
title: cpq-total-bar (template)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/ind/264-0-0/comms_cpq_total_bar__template_.md
canonical_url: https://help.salesforce.com/s/articleView?id=ind.comms_cpq_total_bar__template_.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 11e450a1ec9c0ad1c5bdc92274bad29c61d53e777ba1e10136cbc7d84c9f9694
description: The cpq-total-bar template provides the structure for the total bar in the cart.
products:
  - Communications
  - Media
  - Energy and Utilities
release: "264"
---
# cpq-total-bar (template)

The cpq-total-bar template provides the structure for the total bar in the cart.

In ​Salesforce Industries Communications, Media, and Energy Summer '18, cpq-total-bar has had alignment changes to one action, displayName, removed.

**Template Type**

Containers

**Code**

HTML, CSS/SCSS

**Image**

![The Total bar is blank.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-ind-comms_media_energy_managed-264-0-0-production-enus/ff4079f6-a384-475c-b863-578bbbb0ef9b/resources-product/images/salesforce_cpqcart_totalbarcolor.jpg)

**Upgrade from Vlocity CME Winter '18 to Vlocity CME Summer '18**

When upgrading from ​Salesforce Industries Communications, Media, and Energy Winter '18 to ​Salesforce Industries Communications, Media, and Energy Summer '18, you must make the following changes to the HTML in the Card Designer.

```
<span ng-show="records.actions && records.actions.checkout">{{::$root.vlocity.getCustomLabel(action.displayName, action.displayName)}}</span>
<span ng-show="records.actions && records.actions.checkout">{{::$root.vlocity.getCustomLabel(action.displayName)}}</span>
```