Resumen de los pasos a seguir para lograr cambiar el número de productos por fila de la página de inicio. Puede servir como pequeña guía para lograr el msimo efecto en otras páginas de productos - como categorías o productos más vistos.

1 - Crear un estilo css como el que sigue:

.col-md-23 {

     width: 20%; 

}

Un 20% nos permitirá mostrar 5 productos por fila. Lo insertamos entre .col-md-2 y .col-md-3

Para mostrar 4 productos por fila en categorías, no necesitamos más CSS del que ya está especificado en la plantilla.

2- Editar product-list.tpl

{if $page_name !='index' && $page_name !='product'}

{assign var='nbItemsPerLine' value=4}

{assign var='nbItemsPerLineTablet' value=2}

{assign var='nbItemsPerLineMobile' value=3}

{else}

{assign var='nbItemsPerLine' value=5}

{assign var='nbItemsPerLineTablet' value=3}

{assign var='nbItemsPerLineMobile' value=2}

{/if}

3- Cambio del tamaño de las imágenes

En Preferencias > Imágenes cambiamos el tamaño de las imágenes home_default de 250 x 250 a 200 x 250. Regeneramos las miniaturas correspondientes en la misma sección.

4- Uso de la clase css que hemos creado (en product-list.tpl)

Original:

<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-4 col-md-3{else} col-xs-12 col-sm-6 col-md-4{/if}

Modificado:

<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-10 col-sm-4 col-md-23{else} col-xs-12 col-sm-4 col-md-3{/if}