Bon, je pense avoir avancé !
Que pensez-vous de ça ?
dans le category.tpl (pas le partials ici) : (ça ressemble beaucoup à la proposition de @kerlin)
{extends file='catalog/listing/product-list.tpl'} {block name='product_list_header'} <div class="block-category card card-block hidden-sm-down"> <h1 class="h1">{$category.name}</h1> {if $category.description} <div id="category-description" class="text-muted">{$category.description nofilter}</div> <div class="category-cover"> <img src="{$category.image.large.url}" alt="{$category.image.legend}"> </div> {/if} </div> <div class="text-xs-center hidden-md-up"> <h1 class="h1">{$category.name}</h1> </div> <div id="subcategories"> <ul class="clearfix"> {foreach from=$subcategories item=subcategory} <li> <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}" title="{$subcategory.name|escape:'html':'UTF-8'}" class="img"> <img class="replace-2x" src="{$urls.base_url}img/c/{$subcategory.id_category}.jpg" alt="{$subcategory.name|escape:'html':'UTF-8'}" /> </a> <h5><a class="subcategory-name" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}">{$subcategory.name|truncate:25:'...'|escape:'html':'UTF-8'}</a></h5> </li> {/foreach} </ul> </div> {/block}
dans le custom.css du thème enfant (affiche 4 catégories par ligne pour les tablettes par exemple, à adapter pour les différents formats) :
@media(min-width:701px) and (max-width:1024px){
#subcategories ul li {
float: left;
width: 25%;
text-align: center;
}