Cart Screen

• By: Mayank Sanghvi
• 0 Comments

In this article, we will learn How to create a Cart Screen?. 
Following image is the reference image which we use for this article.

For this article we used Adobe XD document created in the last article.

Start with a new Artboard rename it to "Cart Screen". Add status and navigation bar symbol.

In our cart screen, we have the list of products added by the user. A user can change the quantity of each product or delete it if not required. On the bottom, we have a button to open Offer Code Screen. Also, we have a tab for all the check out process.

For creating our cart screen, let's start with Product Items. For each product Item, we have a product image, product name, price and offer price. Two buttons for incrementing and decrementing the quantity. A text box for displaying the product quantity. A delete button to remove the product from the cart. Finally, we have a text item for displaying total saving for the current product due to offer price.

Following elements for the Product Item

• First, we need to create a main rectangle for holding all the elements.
• On the left, add a product image.
• On the right, we need to add a small square with a recycle or dustbin icon.
• Middle add a text item with text equals to "Product Name".
• Below the product name text item, we have two text items for the actual price and offer price.
• Then, create a square button with a minus sign. Followed by a rectangle with a text item "Quantity". Followed by a square button with a plus sign.
• Last, add another text item with benefit due to offer price.

Add borders and shadow as you like. Finally, create a group for all the elements and rename it to “Cart Product Items”.

Use "Repeater Grid" for creating vertical copies.
In the bottom, we need to add a button. 
For creating a tab download the required images and add it. We need black and white images of all the images. Why? Because for active tab we need a Black image and for inactive tabs, we need a white image. Download the following Adobe XD document to check the final output.

In the next article, we will learn about other check out screens.