Cómo configurar tu tema en PrestaShop

Frontend Prestashop

Aprende a personalizar tu tema en PrestaShop 1.7.

En el momento que instalamos PrestaShop 1.7 en nuestro servidor, ya sea local alojado en un hosting, nos encontramos con la plantilla del tema clásico y es aquí donde nos planteamos como cambiar el Frontend de mi tienda online, pero PrestaShop nos ofrece una serie de posibilidades para ello, guardadas y ordenadas en un mismo sitio para así, poder personalizar la tienda a nuestro gusto. Es cierto que podemos llegar a estos controles a través de varios caminos diferentes, pero la ventaja es que aquí tenemos la mayoría agrupados.

Siempre he aconsejado y aconsejaré, que antes de ponernos a lo loco a cambiar aspectos de nuestra web o tienda online, debemos coger un papel y un lápiz y hacer un croquis de lo que queremos conseguir y así trazarnos un mapa de donde queremos ir, es muy sencillo ocupa muy poco tiempo y nos ayuda a tener las ideas mas claras, sobre posibles combinaciones de colores, botones, tamaños, etc….

Dicho lo cual nos vamos a ir dentro de nuestro Backoffice a Personalizar/Diseño/Tema y Logotipo, aquí dentro nos encontraremos tres pestañas principales “Tema y Logotipo”, “Configuración página de inicio” y “Personalización avanzada”. Lo primero que debemos hacer es cargar el tema con el que queremos trabajar, si es el clásico de PrestaShop, ya lo tenemos cargado por defecto, pero si por el contrario nos gusta cualquiera de los miles de temas tanto gratuitos como de pago que tenemos a nuestra disposición en internet, tendremos que cargarlo previamente, y para ello, tenemos tres vías, una primera a través de una archivo comprimido tipo .zip, otra a través del ftp y por último a través de una url de una página de descarga del archivo .zip con el tema. Una vez tengamos ya el tema cargado, es justamente por la ultima pestaña por la que vamos a empezar, porque es aquí donde podemos descargar una copia de nuestro sitio y antes de hacer nada crear nuestro tema hijo, para que cuando instalemos futuras actualizaciones no se nos desconfigure nuestra tienda ya que todos los cambios que hagamos en los css de nuestro tema los iremos guardando en el hijo. Ahora no es momento de enrollarme a explicar como hacer un tema hijo, pero en internet tenéis miles de publicaciones enseñándoos a hacerlo, usar el que mas os guste y crearlo, como veréis hay múltiples formas de hacerlo.

Una vez creado y cargado nuestro tema hijo nos vamos a ir a la primera pestaña “Tema y logotipo” donde vamos a decirle a PrestaShop que a partir de este momento el tema que vamos a usar es el tema hijo. Es muy sencillo veréis que tras haberlo cargado al lado de nuestro tema “Classic” nos aparece el hijo, con el nombre que le hayáis dado, en mi caso soy poco original, “child_classic”, lo marcamos y le damos a “Utiliza este tema” y aunque parezca que no ha cambiado nada (tened en cuenta que el hijo es una copia exacta del padre), en el Cpanel de nuestro servidor, se nos habrá creado una carpeta themes/child_classic, que es donde cargaremos esos css, js, etc…

 

tema hijo prestashop

Dentro de esta misma pestaña tenemos algo muy importante que cambiar, el logotipo y nos da tres opciones el de la tienda, el de los correos y el favicon, que es ese pequeño logotipo que nos sale en la pestaña de nuestro navegador. Debajo al final de esta página nos encontramos “Configurar tu diseño de página” y aquí podremos configurar el diseño que queremos para nuestras diferentes páginas, si lo queremos Full Width (a pagina completa, sin columnas), a tres columnas (la central mas grande) o a dos columnas (con la derecha o la izquierda más pequeña) y así de esta forma diseñar las distintas áreas de nuestro sitio e-commmerce.

diseño pagina prestashop

Por último, en la segunda pestaña “Paginas Configuración” tendremos un acceso directo a los distintos módulos que componen la página de inicio(es decir la página principal de nuestra tienda) y las páginas de las categorías o productos. Con solo pinchar en el dibujo de las zonas que componen la página, en la parte de la derecha se nos activan accesos para configurar los módulos que afectan a esa área en cuestión, esto es muy cómodo porque en el mismo sitio tenemos ordenados los módulos y así saber exactamente que es lo que hace cada uno y configurar el Frontend con ellos.

Paginas configuracion prestashop

Son muchos los módulos vitales para la personalización de nuestro sitio tales como el Slider, el menú principal, elegir que productos vamos a querer que aparezcan en la pagina principal, o las novedades, o como podemos modificar el banner predefinido que viene con PrestaShop y poner así uno informando de nuestras novedades u ofertas para el tan esperado Blackfriday o justo antes del Footer poder configurar los enlaces a las redes sociales, con tan solo seleccionarlo e introducir las url de nuestros sitios.

Una vez tengamos configurado a nuestro gusto nuestra tienda tenemos también la posibilidad de exportar el tema configurado para usarlo mas tarde, para ello tan solo tenemos que ir a la primera pestaña y darle a “Exportar el tema actual”.

Como veis es algo muy útil que nos va a permitir tener ordenados todos los módulos enfocados a personalizar el aspecto de nuestra tienda online, aunque si aun tienes dudas ponte en contacto con nosotros en Posicionamiento Digital, que estaremos encantados de ayudarte.

Un saludo.

 

Suscríbete a nuestro newsletter

Contenidos seleccionados para ti

Todos las publicaciones