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
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.
File | Download |
---|---|
Dealsatoxyz_Cart_Screen.xd | Login to Download |
In the next article, we will learn about other check out screens.
Please login to post your valuable comments.