Cart Summary

Cart Summary displays the customer a total price for the items in a short and consolidated view. With the summary amount displayed on the Cart page, customers will see the amount of money they need to pay for all items while shopping.

You can open the Elements panel => Cart => Cart Summary to drag and drop the element to the position you want:

1. Content settings

This element supports multiple content types, and you don’t have to display all of them. Use the Trash icon next to each tab to show or hide content, and drag the tabs to rearrange their order.

• Discount applied: Show only Automatic discounts applied. You can insert them into the wording to show dynamic content.

The {{title}} variable displays the discount title, while {{amount}} displays the discount value. These variables are based on Shopify Liquid syntax and are used to render dynamic content for the Discounts feature.

Result when on live: The title is dynamic, and the amount is dynamically changed according to the price of all items in the cart.

• Item quantity: Presents the total number of items that your customer currently has in their cart.

Result when on live:

• Subtotal Price: Displays the order subtotal after Shopify product discounts have been applied. It does not include taxes, cart discounts, shipping fees, or other additional charges.

An example when live: Subtotal price = Subtotal of the cart – Total discount.

• Subtotal of the cart: Show price when the Shopify amount discounts haven’t been applied yet.

For instance, when on live: Subtotal of the cart = Subtotal price + Total discount.

• Taxes: To include taxes in your product prices, go to Shopify Admin => Taxes and duties. Once enabled, product prices will automatically include taxes based on your customers’ locations.

• Total Discounts: Displays the total value of all applied discounts, including product, order, shipping, gift card, and more. You can customize the title and text. Use the {{amount}} variable anywhere in the text to display the current discount value.

Note: the discount calculation only works properly with Automatic Discount code.

The video below will give you more details about how an Automatic discount works when the cart page is published to be live.

• Total price: Show the final price of all the items in the cart after the discounts have been applied.

For example, the last total price of these 2 products.

• Total compare at price: Show the total compare at price of all of the items in the cart.

=> Result on the live page:

• Total weight: Show the total weight of all of the items in the cart. We render the weight information from Shopify, so you should edit the weight values by going to Shopify Admin -> Shipping and Delivery settings
  Put the variant {{amount}} to show the active value anywhere in the text.

• Total savings: Show total savings based on compare at price vs actual price. Only visible when at least one item has a compare at price.

=> Result on the live page: Total Savings = (Total price – Total compared at price) + Total Discount.

2. Design settings

2.1. General

You can change the Alignment, Background, Box Shadow, Border, and Border Radius of the Cart Summary area.

2.2. Title

You can adjust the appearance of the head texts through Typography, Text Color, and Spacing settings.

2.3. Text content

You can edit the style of the content following the head texts via Typography, Text Color, and Spacing settings.