New Design for Shop Page

We have created a new design for the "Shop" page.

The original shop page displays an index of all categories as text links in a tree format. This works well for large sites with many categories and allows the user to explore subcategories from the one-page saving subsequent page loads. This feature also shows the user how many products exist in each category.

However, the former design of the shop page leaves so much room for improvement due to its lack of appeal. Users could not see images of the products being showcased in the categories, which is really crucial for any eCommerce site.

The new polished design, meanwhile, displays top-level categories with a thumbnail image and text on a card.

This design option is especially suited for presenting and navigating visual products for sites with a simple category structure:

The component displays a grid of up to five categories per row, with an autosize rule to ensure it is responsive.

1. It will only show the main categories so users will need to load the next level of category pages to view the other products under it.
2. It uses the category image as a background.
3. If there is no category image set which is often the case, it will automatically set a background colour for each box based on the main link colour of the site.