The Shopping cart overview content element is used to show the shopping cart lines on the Shopping cart page in the Sana webstore.

Each shopping cart line contains information about products a customer added to the shopping cart, like product number and title, product image, price, discount, quantity, unit of measure, etc.

The information about products added to the shopping cart is taken from the ERP system, that’s why the dummy data is used on the Shopping cart system page in Sana Admin. The real data is shown to a customer in the webstore.

The tools within the Shopping cart overview content element allow you to fully customize the look and layout of your shopping cart lines. Using the Shopping cart line editor in the Shopping cart overview content element, you can define how shopping cart lines appear in the webstore, adding various content elements such as product thumbnails, descriptions, or pricing information. This makes each cart line more informative and visually appealing, while also enhancing the overall shopping cart overview to match your brand’s style and create a more engaging experience for customers.

Content Tab

The Paging alignment setting defines the positioning of pagination controls within the shopping cart when more than 10 products are added. The following options are available:

• Left
• Center
• Right

This helps maintain a clean and intuitive cart layout, optimizing user experience by positioning the navigation in a way that fits the overall design of the store.

Advanced Tab

On the Advanced tab of the Shopping cart overview content element, you can configure height, width, and spacing settings.

For more information about advanced settings, see Content Elements.

Shopping Cart Line

Using the Shopping cart line editor in the Shopping cart overview content element, you can modify the shopping cart lines the way you need.

You can add and remove various content elements as well as use the content management system of Sana with the page layouts, row and column settings to create high quality and impressive design for the shopping cart lines.

Shopping cart line holds several standard content elements that can be placed anywhere in the shopping cart overview. The standard content elements are present in the Shopping cart overview content element by default. You can add, move, edit and remove any standard content elements using the Shopping cart line editor, and you can also add any other available content elements to style the shopping cart lines.

If you want to re-use the modified shopping cart line template later, you can save it as preset. To do this, click edit row and select Save row as preset. It is also possible to select several rows and save them as preset. To use presets, open the necessary page and click content presets. You can choose one of the presets already available by default or you can choose the custom presets which you saved before.

Shopping Cart Lines Design

The shopping cart lines support two layouts: the old design and the new design.

• Fresh Sana installation: New Sana Commerce Cloud installations use the new shopping cart design by default. The old version is not available.

• Upgrade: If you are upgrading from an older Sana Commerce Cloud version, you will see a toggle New design that lets you switch between the old shopping cart design and the new one at any time.
  
  Each design can be customized separately. Any changes you make in one will not impact the other, giving you full flexibility to experiment and transition smoothly to the new design.

New Design in a Fresh Installation

Design Switch Option in an Upgraded Webstore

In the new design, the Revert to new default design button is available. Using this button, you can revert any changes you have made to the shopping cart lines and start from scratch.

If you're using the old design, the Revert to new default design button doesn't exist. If you want to reset your customizations in the old design, follow these steps:

Step 1:  Remove the modified shopping cart line row.

Step 2: Click content presets and open the My presets tab.

Step 3: There are two default presets on the My presets tab:

• Legacy desktop shopping cart line design

• Legacy mobile shopping cart line design

Choose the appropriate preset based on the layout you're working with (desktop or mobile). This will restore the original look and remove any customizations you have made in the old design.

Shopping Cart Line Content Elements

Here is the list of content elements that are used for the shopping cart lines and are available in the template by default:

• Shopping cart line thumbnail
• Shopping cart line title
• Shopping cart line item number
• Shopping cart line variant title
• Shopping cart line unit of measure
• Shopping cart line stock indicator
• Shopping cart line estimated availability dates
• Shopping cart line extended texts
• hopping cart line configured product description
• Shopping cart line comment
• Shopping cart line sales agreement control
• Shopping cart line quantity input box
• Shopping cart line total price
• Shopping cart line discount and from price
• Shopping cart line discount code label
• Shopping cart line unit price
• Shopping cart line reconfigure button
• Shopping cart line delete button

There is also the Shopping cart line discount content element that is used only for the shopping cart lines, but it is not available in the template by default. You can add the Shopping cart line discount content element if you need to.

Besides the above-mentioned content elements, you can also use any other content elements available in Sana to enrich the shopping cart lines. For example, you can add text, paragraph, images, button, etc.

Shopping Cart Line Thumbnail

The Shopping cart line thumbnail content element is used to show product thumbnails in the shopping cart overview.

Additionally, you can show or hide product image thumbnails in the shopping cart using Sana Admin settings.

In Sana Admin click: Design & Layout > Checkout layout. Use the Product images option to show or hide product images in the shopping cart and on the order overview page.

Shopping Cart Line Title

The Shopping cart line title content element is used to show the name of a product in the shopping cart overview. The product name is retrieved from your ERP system.

Shopping Cart Line Item Number

The Shopping cart line item number content element is used to show the ID of a product in the shopping cart overview.

Shopping Cart Line Variant Title

The Shopping cart line variant title content element is used to show the name of a product variant in the shopping cart overview.

Shopping Cart Line Unit of Measure

The Shopping cart line unit of measure content element is used to show the unit of measure of a product in the shopping cart overview.

On the Content tab of the Shopping cart line unit of measure content element, you can set where the divider should appear using the Divider alignment setting. The available options are:

• Hidden
• Left
• Right

Shopping Cart Line Stock Indicator

The Shopping cart line stock indicator content element is used to show stock in the shopping cart overview.

In Sana Admin you can change stock presentation to whatever you want. Moreover, you can show and hide stock in your webstore. Whether a product is in stock, out of stock or it has a low stock is determined by stock levels in Sana Admin.

Using Custom stock texts, you can change stock presentation in your webstore. It can be the exact stock amount retrieved from your ERP system, any text or even stock indicators of different colors for in stock, low stock and out of stock indication.

On the Content tab of the Shopping cart line stock indicator content element, you can set where the divider should appear using the Divider alignment setting. The available options are:

• Hidden
• Left
• Right

Shopping Cart Line Estimated Availability Dates

The Shopping cart line estimated availability dates content element is used to display real-time stock information in the shopping cart overview.

When customers add products to the shopping cart and proceed to checkout, Sana Commerce Cloud can show how many units are physically available in stock. If customers need more than is currently available, Sana can display when the missing quantity will be replenished.

Real-time stock information is retrieved from the ERP system in real-time based on the ATP (available-to-promise) inventory or lead time, ensuring the data is accurate and up-to-date.

For more information, see Real-Time Stock Information at Checkout.

Shopping Cart Line Extended Texts

The Shopping cart line extended texts content element is used to show some extra information about the shopping cart line in the shopping cart overview.

Shopping Cart Line Configured Product Description

The Shopping cart line configured product description content element is used to show description of a configurable product in the shopping cart overview.

A configurable product is generated through interactive configuration engines such as Expivi or the e-Con Product Configurator.

Shopping Cart Line Comment

The Shopping cart line comment content element is used to add a comment field to the shopping cart overview where a customer can add a personalized comment for each product or remove it.

The comment field is not displayed for the supplementary products and service items.

On the Content tab of the Shopping cart line comment content element, you can control the visibility of the button labels using the Show button labels option.

Shopping Cart Line Sales Agreement Control

The Shopping cart line sales agreement control content element is used to add the sales agreement term field to the shopping cart line in the shopping cart overview where a customer can select the relevant sales agreement term.

Companies that sell products in bulk usually have more complex and long-term sales agreements with their customers. A sales agreement is a contract that commits the customer to buy products in a specific quantity or for a specific amount over time, in exchange for special prices and discounts.

To use sales agreements in the Sana webstore, sales agreements should be configured in your ERP system and enabled in Sana Admin.

For more information, see Sales Agreements.

Shopping Cart Line Quantity Input Box

The Shopping cart line quantity input box content element is used to add quantity input field to the shopping cart line in the shopping cart overview. Using the quantity input box, a customer can increase or decrease the quantity of a product in the shopping cart.

This content element displays as an editable quantity box for products, product variants, and configurable products. For supplementary products and service items, however, it is shown as a read-only value that cannot be modified. 

Shopping Cart Line Total Price

The Shopping cart line total price content element is used to show the total price of a shopping cart line in the shopping cart overview.

For more information, see Prices and Discounts.

Shopping Cart Line Discount and From Price

The Shopping cart line discount and from price content element is used to show product price and discounts in the shopping cart overview.

For more information, see Prices and Discounts.

Shopping Cart Line Discount

The Shopping cart line discount content element is used to show product discount in the shopping cart overview.

For more information, see Prices and Discounts.

Shopping Cart Line Discount Code Label

The Shopping cart line discount code label content element is used to show discount code label in the shopping cart overview.

Shopping Cart Line Unit Price

The Shopping cart line unit price content element is used to show product price per base unit of measure in the shopping cart overview.

For more information, see Prices and Discounts.

On the Content tab of the Shopping cart line unit price content element, you can manage whether to show price with unit of measure or without using the Show label option.

Shopping Cart Line Reconfigure Button

The Shopping cart line reconfigure button content element allows you to add a button to the shopping cart line using which a customer can reconfigure a configurable product.

A configurable product is generated through interactive configuration engines such as Expivi or the e-Con Product Configurator.

On the Content tab of the Shopping cart line reconfigure button content element, you can control the visibility of the button label using the Show label option.

Shopping Cart Line Delete Button

The Shopping cart line delete button content element allows you to add a button to the shopping cart line using which a customer can remove a product from the shopping cart.

On the Content tab of the Shopping cart line delete button content element, you can control the visibility of the button label using the Show label option.

The delete button is not displayed for the supplementary products and service items.

Content Elements Advanced Tab

On the Advanced tab of each content element in the Shopping cart line area, you can configure height, width, and spacing settings. These settings are the same for all content elements.

For more information about advanced settings, see Content Elements.

Change the Shopping Cart Line Default Texts

You can easily change the standard shopping cart line texts available in the shopping cart overview in the English language or any other installed webstore language. You can do this either in the Page elements & messages or using In-site editor.

Translate the Shopping Cart Line Content

Sana Commerce Cloud is a multi-lingual e-commerce solution. By default, a Sana webstore is available in English, but we also deliver the language packs which can be installed with a single button click from the Sana App Center.

The Sana language packs contain the default webstore interface texts, error and validation messages and system e-mails in the language of your choice. The language packs also allow you to translate your webstore content to different languages.

To translate the shopping cart line content, open the Shopping cart system page and select the language you need in the header. Then, open the Shopping cart overview content element. You can translate any shopping cart line content to the selected language.