Cómo editar un tema en PrestaShop paso a paso

A la hora de crear una tienda online, PrestaShop es una de las herramientas más populares que utilizan empresas y profesionales del sector. Su facilidad de uso, versatilidad y bajo coste lo convierten en una gran alternativa para crear cualquier tipo de eCommerce, desde una pequeña tienda que maneje pocos artículos, pasando por una web de venta de servicios, hasta una tienda virtual con miles de artículos.

Los módulos y temas son complementos que permiten personalizar una tienda PrestaShop. Con los módulos se pueden añadir nuevas funcionalidades a la tienda, mientras que las plantillas se utilizan para dotar el eCommerce de un aspecto visual personalizado.

Al editar un tema en PrestaShop se puede personalizar aún más el aspecto visual de la tienda para que se pueda adaptar a las necesidades y gustos de la empresa, así como a la imagen corporativa de la misma.

Veamos paso a paso cómo modificar PrestaShop para crear un eCommerce con un diseño original y personalizado:

Cambiar el logotipo de la web

Cualquier tema de los que instales en PrestaShop te permitirá de forma muy sencilla cambiar el logotipo de la tienda (por defecto el tamaño recomendado es de 200 x 40 píxeles, aunque puede variar dependiendo del tema que se edite).

Para cambiar el logo hay que ir a la opción Diseño / Tema y Logotipo, y dentro de ella seleccionar el logo principal u otras opciones de logo:

• Logo de Cabecera. Es el logotipo principal de la tienda online, el que se muestra en la página principal o home.
• Logo para correo electrónico. Este logo lo utiliza PrestaShop, tanto en el envío de correos electrónicos, como a la hora de generar la factura de una venta.
• Logo Favicon. El logotipo que se muestra en las pestañas, historial y favoritos de los navegadores web (es un pequeño archivo de imagen de dimensiones 16×16).

Personalizando la página de inicio

La página de inicio o home de la tienda PrestaShop es otra de las opciones que se pueden personalizar para incluir los elementos que se consideren más interesantes o importantes, así como el orden en el que se muestran.

Para acceder a la opción de configurar la página de inicio hay que ir a la siguiente opción:

Diseño / Tema y logotipo / Página de Configuración / Productos de la página de inicio.

Accederás a una lista con distintos elementos del eCommerce PrestaShop como:

• Productos destacados.
• Bloques Más Vendidos.
• Bloques de Novedades.
• Bloques de Promociones Especiales.
• Bloque de Texto.
• Banner.
• Redes Sociales y boletín.
• Pie de página.

Al lado de cada una de estas opciones hay un botón de configuración para acceder a los ajustes específicos.

Incluso puedes cambiar la página de inicio PrestaShop si lo consideras oportuno, para crear una personalizada que se adapte mejor a tus necesidades.

Configurar el menú

El menú es una parte fundamental de la tienda online por lo que personalizar su diseño es algo que suelen hacer todos los eCommerce, buscando facilitar el uso por parte de los usuarios, mejorando su experiencia de usuario.

En el panel de control de PrestaShop puedes acceder al Menú para configurar distintos parámetros del mismo como las categorías que se muestran, las páginas de contenido…

Configurar el carrusel de imágenes

El carrusel de imágenes es una parte del eCommerce que se encuentra debajo del menú principal de la mayoría de tiendas online. Se utiliza para presentar ofertas, novedades o productos estrella de la tienda online, consiguiendo que los usuarios centren su atención en ellos y terminen en su ficha de producto.

Para personalizar el carrusel de imágenes de la tienda virtual de PrestaShop hay que ir a la siguiente opción dentro del panel de administración:

Diseño / Tema y logotipo / Página de Configuración / Carrusel de Imágenes / Configurar.

El carrusel se podrá configurar realizando algunos ajustes generales como, por ejemplo, la velocidad que tarda en mostrarse cada una de las imágenes del mismo. También se puede configurar cada una de las imágenes de carrusel, así como el enlace a donde te dirigen.

Editar un tema de PrestaShop con código

Para conseguir los mejores resultados en cuanto al aspecto visual de una web lo mejor es utilizar código CSS. Es necesario disponer de conocimientos avanzados en programación HTML y CSS para modificar módulos y temas PrestaShop, por lo que es mejor no aventurarse en caso de no saber bien lo que se está haciendo (puede arruinarse completamente el diseño de la tienda).

Por ejemplo, en la mayoría de plantillas, hay un archivo donde se guardan los estilos llamados theme.css (que se encuentra dentro de la carpeta ../assets/css dentro de la carpeta principal del propio tema). Editando este archivo podrás modificar, ajustar, eliminar o añadir ajustes visuales a través de código CSS a tu tienda online PrestaShop.

Personalizar un tema PrestaShop es posible gracias a las propias herramientas que incorpora esta plataforma. Si se quiere ir un paso más allá, será necesario editar diferentes archivos del propio tema y lidiar con código en HTML y CSS.