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

List and carousel

Suitable for intro section - category list with links on the left and carousel on the right.

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 columns with zoom

Screenshot

Get the code

Four-column categories

Screenshot

Get the code

Gradient mask images

Screenshot

Get the code