Saltar al contenido

Personalización del aspecto de Prestashop mediante plantillas

15/05/2019
Personalización del aspecto de Prestashop mediante plantillas

1.- Introducción

El diseño de una tienda virtual es uno de los puntos fuertes de Prestashop. No solo porque pueda parecer más o menos atractiva, sino porque servirá para que el usuario que te visita identifique tu identidad con esa imagen y colores corporativos.

Dentro de un proyecto online, uno de los costes a acordar es el del diseño, al final está relacionado con el tiempo invertido en adaptar la imagen de tu tienda a la imagen de tu identidad. Lo más importante es que Prestashop ha querido ayudarte con esta tarea poniéndote un listado muy extenso de plantillas, todas ellas están creadas por desarrolladores cualificados y las puedes comprar en este enlace.

Antes de decidirte por una en concreto, mira que se adecúe lo máximo posible a lo que estás buscando. No tendría sentido comprar una plantilla para cambiarla por completo.

Muchas plantillas existentes en Prestashop disponen de un configurador de temas que permite cambiar el color de la plantilla y adaptar apartados como la cabecera o la home (página principal) de la tienda virtual.

Todas las plantillas compradas en Prestashop tienen incluido 3 meses de soporte para la instalación y configuración de las mismas. Además con tu compra estarás ayudando a la comunidad de Prestashop y al desarrollador del tema concreto.

2.- Usabilidad de la tienda y dispositivos móviles

El uso de móviles como dispositivos para navegar por Internet, ha ido creciendo día ha día hasta la actualidad. En estos momentos, las páginas web reciben en mayor medida su tráfico a través de dispositivos móviles, por tanto, ¿qué sentido tendría no tener una tienda virtual que no se adaptase correctamente?

Cuando se habla de adaptar al dispositivo móvil una tienda virtual, se está hablando de que a página tenga una visualización adaptada a cualquier dispositivo. Es decir, que la tienda debe mostrarse correctamente en un móvil o tablet.

Por este motivo, antes de ver los aspectos necesarios para escoger un tema, has de tener en cuenta que la plantilla se encuentra adaptada para ser utilizada tanto en ordenadores como en móviles.

Los elementos que denotan que una plantilla se encuentra correctamente adaptada para ser utilizada en un dispositivo móvil son:

  • Un menú superior en formato «Hamburger»: Este nombre viene dado por el parecido a una hamburguesa, ya que el menú se muestra con el típico botón con tres rayas una encima de otra.
  • Un listado de productos fácil de recorrer: otro de los aspectos relevantes a tener en cuenta cuando hablamos de dispositivos móviles, es que la visualización de los contenidos sea agradable. Por ello, el recorrido de los listados dentro de la tienda tienen que estar preparados para deslizarse por ellos o ver la información relevante sin necesidad de estar moviendo la visualización arriba y abajo.
  • Un apartado de carrito sencillo y claro, que muestre siempre el resumen de gastos y que disponga en todo momento de una visualización completa del paso en el que se encuentra el usuario.

Para que te puedas desenvolver fácilmente cuando estés buscando un tema para dispositivos móviles, debes conocer cómo se denomina esta funcionalidad. Muchos desarrolladores la llaman «Adapted Mobile», pero desde hace ya unos años, a las páginas adaptadas a móvil se les llama páginas «Responsive».

3.- Aspectos a tener en cuenta al escoger tu plantilla

La selección de la plantilla tiene un listado de puntos que deben estar cubiertos. Lo primero que tienes que hacer es pensar a qué público se enfoca tu negocio. Con ello podrás acotar cuál va a ser el comportamiento en tu tienda y sus hábitos de navegación.

Entre las secciones más importantes en una tienda virtual se encuentran: la ficha de producto, el listado de productos de una categoría, el buscador y la página de inicio.

3.1.- La ficha de producto

Debe ser intuitiva y fácil de navegar en móviles, ya que actualmente el tráfico móvil ya supone al menos un 60 % del tráfico de casi todos los nichos de mercado existentes. Nichos como la moda o la tecnología ya barajan datos próximos al 90 %.

Así que, si la navegación de tus usuarios va a ser en dispositivos móviles, debes realizar la validación de la ficha de producto de tu tienda de la misma forma.

Esta sección además deberá de mostrar siempre visible el botón de «añadir al carrito» y disponer de unpasador de imágenes con el dedo, puesto que es el comportamiento que esperan los usuarios.

3.2.- El listado de productos de una categoría

Debe mostrar los productos de dos en dos, como mínimo, y según aumente el tamaño del dispositivo móvil también aumentará el número de productos mostrados por línea.

Es conveniente añadir una sección para filtrar los artículos, ya que esto ayuda a retener a los usuarios y repercute en la tasa de conversión. Este filtro lo podrás configurar más adelante con los elementos que desees acorde a tus productos. Ahora céntrate en ver que su navegación es óptima.

3.3.- El buscador

Es otro aliado en tus ventas. Prestashop dispone por defecto de un buscador propio muy potente, no obstante, por defecto los resultados se muestran solamente con texto. Muchas plantillas están incorporando una modificación en el buscador que enseñan en pequeño la foto del producto.

Este requisito es importante pero no imprescindible, y además existen módulos que permiten añadirlo a cualquier tema.

Para terminar con esta sección, revisa que el listado de resultados de nuevo se muestre como en categorías a dos productos al menos por fila.

3.4.- Revisa la página de inicio

Para terminar, revisa la página de inicio de tu posible tema. La página de inicio debe contener un listado de ofertas o productos destacados. Además, es recomendable incorporar un carrusel de imágenes cuando se utilizan dispositivos como ordenadores o tabletas pero no aparece cuando se navega empleando dispositivos móviles.

Esto hará que en los dispositivos de mayor tamaño puedas hacer una captación a través de esas imágenes, pero que en los dispositivos móviles muestres lo antes posible productos al usuario para que no se vaya de tu tienda.

Ten en cuenta estos puntos para que tu selección sea lo más acertada posible y entonces procede con la compra.

4.- Descarga de fichero del tema y área de administración

Al comprar una plantilla se puede acceder a un apartado del área de usuario de Addons de Prestashop para poder descargar un fichero ZIP con el nombre de tu tema y los ficheros necesarios para la instalación.

Todos los temas de Prestashop son auto instalables y, por tanto, solamente se han de seguir unos pasos desde el Back Office de tu tienda para ello.

4.1.- Descarga de ficheros

  1. Accede al área de usuario de la tienda de Addons de Prestashop
  2. Una vez dentro accede a tu zona de descargas donde encontrarás el tema para descargarlo
  3. Busca tu tema si tienes más de uno y pulsa sobre el boton de «Descargar»
  4. Pasados unos segundos se iniciará la descarga de tu tema y posteriormente se descargará en tu ordenador el fichero

4.2.- Accede a tu área de administración

Con la URL de acceso a tu área de administración, entra e introduce como datos de acceso tu e-mail y la contraseña que guardaste durante la instalación. Una vez dentro, accede al apartado que se encuentra dentro de «Personalizar» en el menú de la izquierda, subapartado «Diseño» y dentro de éste, «Tema y logotipo». Ya estarás en el lugar correcto para realizar la instalación de tu tema.

5.- Subida de ficheros e instalación

Ahora ya dispones del fichero ZIP que has descargado del área de Prestashop. Además te encuentras en la zona de gestión de temas y verás que dipones de un buen listado de funciones y opciones. Vamos a conocerlas:

5.1.- Tema por defecto

Como es la primera vez que accedes a este apartado, el tema que viene instalado por defecto en Prestshop es el tema Classic.

Es un tema que Prestashop ha creado para que puedas conocer los diferentes apartados de tu tienda y realizar una primera navegación por una tienda de demostración con productos ya cargados por defecto.

Además en esta zona podrás configurar cómo deseas que se vean las columnas en cada una de las zonas a modificar:

  • El logotipo de la tienda
  • Los logotipos de facturación
  • El icono de la pestaña de los navegadores (Favicon)

5.2.- Añadir

En la parte superior derecha de esta sección encontrarás la opción para «Añadir nuevo tema», con un símbolo de + en color azul. Púlsalo para acceder al apartado dividido en 3 secciones:

  • Importar desde tu ordenador
  • Importar desde la web
  • Importar desde FTP

El apartado con el que vas a trabajar es justamente el primero. Pulsa en «Añadir archivo», busca el archivo que descargaste y selecciónalo. Para subirlo, pulsa en «Guardar» dentro del mismo bloque.

Ya has subido tu tema y deberá aparecerte en la parte inferior para seleccionarlo.

5.3.- Tema

Ahora, en la parte inferior de la sección en la que estabas en «Tema y logotipo», ponte encima de la imagen del tema comprado y pulsa en la opción de «Usar este tema».

Enhorabuena, ya lo tienes, accede al Front Office y comprueba tu nuevo diseño.

Si continuas utilizando este sitio aceptas el uso de cookies. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar