eCommerce blocks - categories

Collection of practical examples of eCommerce categories. These kinds of sections are necessary when creating homepages or listing pages. You will find here solutions for all the possible use cases that can occur during creating eCommerce projects.


Basic example

Simple tiles with subtle hover effects .

Screenshot
Get the code


Thumbnails

If you have a lot of categories and you need to present them all on your home page you can use these little thumbnails. However, be careful to not overcrowded your UI.

Screenshot
Get the code

Thumbnails with description

If your category needs an additional explanation you can use this section containing an extra piece of information.

Screenshot
Get the code

Mixed content

To diversify your listing pages you can combine a category tile with chosen products from this category to present what exactly the category includes.

Screenshot
Get the code

Simple grid

Simple grid - well looking and effective. Classic.

Screenshot
Get the code

Mixed grid

The grid inside the grid - an advanced composition for more demanding UIs.

Screenshot
Get the code

Three-column

Screenshot
Get the code

With image backgrounds

Screenshot
Get the code

With background image and detail overlay

Screenshot
Get the code

Three-column with description

Screenshot
Get the code