Cart items

Cart page must be considered carefully during the design process because the future success of your work directly depends on how well you manage to drive customers to the checkout stage.

Before going to checkout, it needs to be presented with a final list of items on the cart page. This Cart items element shows the individual prices of each of the products a user is buying, the quantity in which it is being bought, as well as the total amount of all the items being purchased. 

1. Content tab

1.1 How to configure the cart items table

Note: This section is only showing up when you had added an item to the cart

• Column heading: There are 4 columns by default along with its heading. With these options, you can edit the wording of each heading or remove it

• Show heading on tablet and mobile: to save space on tablet and mobile view, you might not need the heading. Therefore, you can use this option to Hide/Show the headings on Tablet and Mobile

• Regular price: When you put a product on sale for a lower price, you might want your customers to be able to see both the original price and sale price so they see the price comparison

• Show cart item properties: Products usually come in different variations. If you present them right here, your customers can double-check what option they chose without going back to the product page, not to frustrate customer. Then you can drive them go straight to the Checkout page.

1.2 How to configure the style of the cart empty layout

Note: This element is only showing up when you have no items in the cart

• Preview cart empty: You tick this option to be able to preview the cart empty layout inside the Editor view. Untick to show normal cart items layout

• You can also change the wording on this layout with options such as Title, Button text, Button link
• Gap: It’s the spacing between the button and the text above it

2. Design tab

• General: change the background color, border, and spacing of the entire cart item table area

• Column Heading: you can change the Typography, Text Color, Text Shadow, and Spacing for the label.

• Product Image: this feature allows you to set up the size of the product images

• Product Name: you can change the Typography, Text Color, and Text Shadow..of the name of product items here

• Product Properties: edit the Typography, Text Color, Text Shadow..of the name of the product, and variants here

• Price, Regular price, Total: configure the Typography, Text Color, and Text Shadow of the numbers of price

• Quantity, Plus, Minus: manage the style of the quantity input field

• Remove item button: we should allow users to delete an item if they change their minds. Therefore, they can pay for all the rest of the products at once without being bothered by the eliminated one. Here you can change how this remove button looks like. Each row has a “Remove” button

• Title when cart empty: the title is to change the design of the layout when visiting a blank cart page.
• Button when cart empty, Button icon when cart empty: we display a button that will return the user to the shop page. In any case, such a button will be convenient for customers and increase user experience. Besides that, it could encourage the client to purchase more.