• Skip to primary navigation
  • Skip to main content

Manuel Ramos

Especialista en PrestaShop

  • Soporte PrestaShop
  • Acerca de mí
  • Blog
  • Contacto

¿Cómo crear páginas de categorías personalizadas en PrestaShop 1.7?

Publicado: marzo 10, 2021

En el siguiente artículo podrás crear una página de categorías para que puedas tener una estructura personalizada en tu tienda online con PrestaShop 1.7.

Dependiendo del proyecto en el que estamos trabajando a veces necesitamos que una sola categoría específica tenga una estructura distinta de la que viene por defecto en PrestaShop 1.7 (ya sabes la página de categorías con los filtros en columna izquierda), por ahora para realizar esto en PrestaShop tenemos que conocer un algo de código y crear el archivo tpl en nuestro tema.

Identificar la categoría a personalizar

Primero debemos conocer el ID de la categoría que necesitamos personalizar, esto lo podemos conocer desde el back-office de PrestaShop, ir a la opción Catálogo > Categorías.

Para esto ejemplo voy a personalizar la categorías Clothes

En la columna ID puedes conocer el ID de la categoría a personalizar

Crear el template de la categoría

El segundo paso es ingresar a la raíz de nuestro PrestaShop desde nuestro servidor, cPanel o sftp e ir la siguiente ruta: /public_html/themes/classic/templates/catalog/listing/

Una vez nos encontremos en la carpeta listing solo debemos crear una nuevo fichero llamado category-IDdetucategoría.tpl, en mi caso sería category-3.tpl, ya que estoy modificando la categoría Clothes.

Personalizar la estructura de la Categoría en PrestaShop

Como tercer y último paso debemos personalizar la estructura de nuestra categoría, ya que si intentamos visualizar nuestra categoría desde el front-office veremos una página en blanco, ya que nuestro fichero (category-3.tpl) se se encuentra vacío.

Para personalizar nuestra página podemos utilizar los layouts y templates que ya existen en PrestaShop y dependiendo de lo que queremos mostrar será importante tener conocimientos en Smarty y HTML.

Como ejemplo, si abrimos nuestro fichero category-3.tpl, ingresamos algunos de los siguientes códigos y guardamos, estaremos modificando la estructura de la categoría:

Layout fullwidth sin columna izquierda o derecha.

{extends file='layouts/layout-both-columns.tpl'}

{block name='left_column'}{/block}
{block name='right_column'}{/block}

{block name='content_wrapper'}
  <div id="content-wrapper">
	{hook h="displayContentWrapperTop"}
	{block name='content'}

	{/block}
	{hook h="displayContentWrapperBottom"}
  </div>
{/block}
Full width – layout sin columnas

Layout configurado en nuestras páginas de categorías.

Es posible que solo necesitemos modificar alguna parte de nuestra estructura ya configurada, por ejemplo: Two Columns, small left column – Two columns with a small left column (la vista predeterminada en PrestaShop).

Esta es la vista que tenemos configurada en PrestaShop para todas las categorías

Si ingresamos el siguiente código en nuestro archivo category-3.tpl podemos modificar alguna sección en nuestra categoría de nuestro layout configurado en PrestaShop.

{extends file='catalog/listing/product-list.tpl'}

{block name='product_list_header'}
    {include file='catalog/_partials/category-header.tpl' listing=$listing category=$category}
{/block}

El siguiente código muestra la misma vista de la categoría a personalizar que el código anterior, pero te permite modificar de forma más específica la sección category-header.tpl.

{extends file='catalog/listing/product-list.tpl'}

{block name='product_list_header'}

	<div id="js-product-list-header">
{if $listing.pagination.items_shown_from == 1}
		<div class="block-category card card-block">
				<h1 class="h1">{$category.name}</h1>
				<div class="block-category-inner">
					{if $category.description}
						<div id="category-description" class="text-muted">{$category.description nofilter}</div>
					{/if}
					{if $category.image.large.url}
						<div class="category-cover">
							<img src="{$category.image.large.url}" alt="{if !empty($category.image.legend)}{$category.image.legend}{else}{$category.name}{/if}">
						</div>
					{/if}
				</div>
			</div>
		{/if}
	</div>
	
{/block}
Layout de categorías configurado en PrestaShop, por ejemplo: two columns, small left column

Con esto ya estamos listos para personalizar la estructura de cualquier categoría específica de nuestra tienda online con los layouts de PrestaShop y/o módulos, yo lo he utilizado en algunos proyectos, te indico una muestra de lo que podemos conseguir:

Espero que esta información te sea útil y si tienes alguna duda me puedes contactar a través del formulario de contacto.

© 2021 Manuel Ramos | Aviso legal

  • Podcast
  • LinkedIn
  • Dribbble