Hello,
I am building my eCommerce and here's a situation that inspired me to consider a different category layout.
As visible in attached pictures, some toner cartridges are for color printers : consequently the misc colors for a same type of cartridge are grouped into subfolders (TN-241, TN-320, TN-325).
On the contrary, the TN-6300 toner cartridge is for black and white printers ; hence no need to create a subfolder for it.
With the actual layout for category pages, a product that is not in a subcategory is shifted downwards on the page (like the TN-6300 cartridge in my example), because the thumbnails for subcategories take quite a lot of place. There is a risk of missing this product: on my laptop, unless I scroll down the page, only the its title is visible, not the picture.
Also, products that are located in sub-categories are not shown.
With the suggested layout, subcategories are displayed smaller in kind of a tooltip, which is attached and more or less centered to the last breadcrumb. The look of this box would be similar to the one used for language selection on multilingual sites, but permanently displayed (not only on mouse-click or mouse-over). If there are many subcategories, an horizontal scroll bar could appear at the bottom of the tooltip.
With this layout, the last breadcrumb is highlighted, and it save us the title, which is a duplicate.
For SEO, the last tooltip should likely be marked <h1>, but with a custom class to display it correctly.
I would also suggest showing products from subcategories, using recursion ; the number of products that are dislayed can be limited and pagination used.
I think we can also save some space with the "Sort" select list, which could be upper right, as well as the two buttons to select matrix VS list view (not on my mock-up).
So far, I didn't think much about how the suggested layout would behave on mobile devices, but I think the width of the "tooltip" could be adapted accordingly, and using for each subcategory some markup like <div style="max-width:...;display:inline-block;float:left"></div> they would simply stack one over each over.
My mockup is partial as I didn't redesign the product previews.
Thank you for your feedback on these ideas.
