Adobe XD CC Tutorial

Product By Category with Filter and Sort

In this article, we will create a Product By Category Screen or Product By Offer Screen. On our Home Page, our products are grouped by Offers or Categories. When anyone clicks on the Offer title or click on See More option, the user will redirect on Product By Category Screen. On this screen user further filter out the products. Following image shows what we will create in this article.

For Product By Category Screen create a copy of Home Screen. Remove all the banners, Product By Categories and Bottom Navigations. Instead of Categories tabs of Home Screen on Product By Category Screen, we will display path for the currently active category. For example, we have following categories

  • Home
    • Electronics
      • Mobile
        • Smart Phone.

From the above categories if Smart Phone is active then on Product By Category Screen we will display
Home -> Electronics -> Mobile -> Smartphones (active or some highlighter). Next, we need to display a grid of products. Copy product element and add it to Product By Category Screen. Select Product Item and activate repeat grid. Extend repeat grid handle in horizontal until you can see two products. Next, extend it in the vertical direction. On the bottom, we need to display the number of products for the selected category. Also, we need options for filter and sort the product grid. For bottom navigation, we have three elements a filter icon, a sort icon and a text item for display the number of products.

Filter Screen.

Create a new artboard for filter screen. Copy Header from Cart Screen.

When a user clicks on the filter icon at Product By Category. The user will redirect to filter screen. Here a user can select varies properties for the product and apply the filter. In case of smartphone following filters may apply

  • Price
  • Ram
  • OS
  • Internal Storage
  • Camera
  • Front Camera
  • Back Camera
  • Weight
  • etc

Filter screen divided into two parts. The first part (highlighted with green) where we need to list down all the properties. On the right, we need to display all the options for the selected properties. The highlighted blue region is the list of all the available screen size. All the values are either a checkbox or a radio button based on the property. On the bottom, we have two buttons. First button to clear any existing filters. Apply button to filter out the products based on the user selections. Both buttons will redirect the user back to Product by Category screen. Product Grid may be refreshed based on a change in filters.

Next, we have sort button. It will open a dialog for sorting the product grid. Create a new artboard, rename it to Sort Dialog. Add a few text items for title and options for sort. To display current active sorting create a radio button using ellipse tool. When a user selects any of this options sort dialog must dismiss and refresh the product grid based on a change in the sorting.

Finally, you can download the document for the current article.

Dealsatoxyz_Product_By_Category.xdLogin to Download
Leave A Comment

Please login to post your valuable comments.