Vamos a ver cómo configurar el slider Prestashop. Es decir, el slider que aparece en la página principal de una tienda Prestashop que utiliza la plantilla por defecto.

Vamos a ver el slider de la plantilla por defecto, tanto en Prestashop 1.7 como en Prestashop 1.6

 

 

 

1.- Gestión del Slider en la Plantilla por defecto de Prestashop 1.7

 

El módulo encargado de la gestión de imágenes del slider en Prestashop 1.7, es el módulo: “Carrusel de imágenes”. El nombre original del módulo es: “imageslider”.

 

carrusel de imagenes prestashop 1.7

Slider de imágenes en la plantilla por defecto de Prestashop 1.7

 

 

1.1.- Acceso a configuración del módulo Carrusel de imágenes en Prestashop 1.7

 

Para acceder a la gestión del módulo “Carrusel de imágenes” iremos a: “PERSONALIZAR > Módulos > Módulos y Servicios”.

A continuación, haremos clic en la pestaña: “Módulos Instalados”.

Para buscar el módulo “Carrusel de Imágenes” podemos:

 

  • i.- Barra búsqueda módulos: en la parte superior de la pantalla verás una barra de búsqueda. Puedes introducir la palabra “Carrusel” y hacer clic el botón de “Buscar” y te aparecerá el módulo.
  • ii.- Buscador del navegador: Si hacemos clic en las teclas CTRL + F, aparecerá una barra de búsqueda en el navegador. Podemos introducir en la barra el nombre “Carrusel de imágenes”, y el navegador nos llevará directamente al módulo.

 

Una vez visualices el módulo haz clic en el botón “Configurar” que aparece a la derecha.

 

configurar slider prestashop 1.7, módulo carrusel de imágenes

Configurar el módulo Carrusel de imágenes de Prestashop 1.7

 

 

1.2.- Configurar el Módulo Carrusel de imágenes Prestashop 1.7

 

En la pantalla de configuración tenemos dos bloques: Ajustes y Lista de diapositivas

 

bloque de ajustes y lista de diapositivas slider prestashop 1.7

Ajustes y Lista de diapositivas, Módulo Carrusel de imágenes Prestashop 1.7

 

En el bloque de “Ajustes” podremos configurar algunos aspectos del funcionamiento del slider. Mientras que desde “Lista de diapositivas” podremos editar imágenes del slider, añadir nuevas imágenes y cambiar el orden en que se muestran en el slider.

 

 

1.2.1.- Ajustes

 

Desde ajustes podremos personalizar los siguientes aspectos del funcionamiento del slider en Prestashop 1.7:

i.- Velocidad: tiempo durante el que se muestra cada una de las imágenes en el slider. El tiempo lo podremos en milisegundos. Por ejemplo, 3000 milisegundos equivalen a 3 segundos.

 

ii.- Pausar al posicionar el ratón por encima: Si ponemos el selector en “SI”, cuando se pose el puntero del ratón sobre una imagen del slider, ésta quedará fija y no se cambiará por la siguiente hasta que se quite el puntero del ratón.

 

iii.- Repetir indefinidamente: Si ponemos el selector en “SI” el slider no se detendrá. En caso contrario, la última imagen de la lista del slider quedará fija.

 

Si realizas algún cambio no olvides hacer clic en el botón de “Guardar” del bloque “Ajustes”.

 

 

1.2.2.- Lista de Diapositivas

 

Desde el bloque de lista de diapositivas podremos realizar las siguientes acciones:

 

i.- Cambiar la posición de las imágenes: para cambiar la posición de las imágenes en el slider, sitúa el cursor del ratón sobre alguna de las diapositivas y verás que el cursor se transforma en un icono en forma de “cruz”.

Haz clic con el botón izquierdo del ratón sobre la diapositiva que quieras desplazar, arrástrala sin soltar el botón izquierdo del ratón y suelta el botón cuando esté en la posición deseada.

 

cambiar posición slides slider, carrusel de imágenes Prestashop 1.7

Cambiar de posición imágenes slider Prestashop 1.7

 

ii.- Desactivar una imagen: Para desactivar una imagen del slider deberás hacer clic con el ratón sobre el botón de color verde “Activado”.

La página se recargará y te mostrará un botón con el texto “Desactivado”.

Una imagen desactivada no se mostrará en el slider. Pero podremos recuperarla en cualquier momento volviendo a activarla.

 

Aprende a editar la plantilla que viene por defecto con Prestashop 1.7 y 1.6: Guía plantillas Prestashop 1.7 y 1.6

 

iii.- Modificar una imagen del slider: Para editar una imagen del slider haremos clic en el botón “Modificar” que aparece en la parte derecha de la imagen.

 

iv.- Eliminar una imagen del slider: Para eliminar una imagen del slider, haremos clic en el botón “Eliminar” que aparece en la parte derecha de la imagen que queremos borrar.

 

v.- Añadir una nueva imagen o diapositiva al slider: Para añadir una nueva imagen al slider, haremos clic en el botón con el icono en forma de “+” que aparece a la derecha del bloque de “Lista de diapositivas”.

 

Añadir una imagen al slider plantilla por defecto de Prestashop 1.7

Añadir imagen al Slider Prestashop 1.7

 

Al añadir una nueva imagen tendrás las siguientes opciones:

a.- Imagen: haciendo clic en “Selecciona un archivo” subiremos la imagen de la diapositiva. En la última versión de Prestashop 1.7 en el momento de escribir este post, se utilizan unas dimensiones de imágenes de 1.110 px x 340 px

b.- Tratamiento: el texto que aquí pongamos aparecerá a tamaño grande (como título), en el lateral izquierdo de la imagen.

c.- URL de destino: aquí estableceremos la url de destino, en caso de que el visitante haga clic sobre la imagen. Si queremos no poner URL de destino tendremos que poner el signo almohadilla en el interior del campo-> #

 

¿Aún no conoces la plantilla Warehouse?, la mejor plantilla para Prestashop: Mega Guía Warehouse

 

d.- Leyenda: el texto que aquí pongamos será el que se muestre en la etiqueta Alt asociada a la imagen (Alt, es una etiqueta para el SEO)

e.- Descripción: El texto que aquí pongamos aparecerá en el lateral izquierdo de la imagen.

f.- Activado: esta opción sirve para activar o desactivar la imagen. Si la imagen está desactivada, no se mostrará en el slider.

 

configurar imagen slider prestashop 1.7

Configurar imagen del slider de Prestashop 1.7

 

 

1.3.- Activar Slider en dispositivos móviles en Prestashop 1.7

 

En la configuración por defecto, el slider no se mostrará en dispositivos móviles. Si quieres que, si se muestre, busca el módulo (PERSONALIZAR > Módulos > Módulos y Servicios) y haz clic en “Enable mobile”.

 

mostrar slider en móviles en Prestashop 1.7

Activar slider en móviles en Prestashop 1.7

 

 

 

2.- Configuración del Slider en Prestashop 1.6 (Homeslider)

 

El slider en Prestashop 1.6 está gestionado a través de un módulo denominado: “Diapositivas de imágenes para tu página web”. El nombre oficial del módulo, es decir, su nombre en inglés es “Homeslider”.

 

Para configurar el módulo iremos a “Panel de administración > Módulos > Módulos”.

Ahora escribimos el nombre del módulo (en español o inglés) en el cajón de búsqueda que aparece a la izquierda del filtro. Es decir, pondremos: “Homeslider” o “Diapositivas de imágenes para tu página web”

Una vez localizado el módulo pulsamos sobre “Configurar”. Ya sea directamente en el botón o desplegando el panel que aparece al pulsar sobre la punta de flecha situada en la parte derecha del botón.

 

configurar el módulo home slider

Módulo Homeslider: “Diapositivas de imágenes para tu página web”

 

La pantalla de configuración del módulo homeslider está dividido en dos bloques o secciones. El bloque de AJUSTES y el bloque denominado LISTA DE DIAPOSITIVAS.

 

 

2.1.- Bloque o Sección Ajustes

 

El bloque o sección de AJUSTES aparece en la parte superior de la interface de configuración del homeslider y está formado por 4 elementos:

 

a.- Ancho máximo de la imagen: se refiere al ancho máximo establecido para las imágenes que irán rotando en el slider (en principio te recomiendo que lo dejes tal cual está).

b.- Velocidad: es el tiempo de transición entre imágenes del slider en milisegundos. Es decir, es el tiempo que pasa desde que una imagen comienza a desaparecer hasta que aparece otra. El tiempo 500 ms que viene por defecto es razonable.

c.- Pausa: es el tiempo que permanece en el slider de Prestashop cada imagen, medido en milisegundos. El tiempo que viene por defecto (3000 ms que equivale a 3 segundos) es adecuado.

d.- Reproducir automáticamente: si seleccionamos “SI” en el selector, las imágenes irán rotando automáticamente por el slider de Prestashop. En caso contrario no rotarán de manera automática, por lo que será necesario que el visitante de la web las pase pulsando en las flechas que aparecen en la parte inferior derecha del slider.

 

configurar ajustes del home slider

Configurar ajustes del slider Prestashop

 

Si realizas alguna modificación recuerda pulsar el botón de “guardar” que aparece en la parte inferior derecha del bloque.

 

Seguramente este enlace te será de interés: Configuración de la plantilla por defecto de prestashop

 

2.2.- Bloque o Sección: Lista de Diapositivas

 

Este bloque está situado justo debajo del bloque “AJUSTES”. En este bloque o sección configuraremos las imágenes que queremos que aparezcan en el slider.

El tamaño estándar de las imágenes del slider de la plantilla por defecto de Prestashop 1.6 es de 779 x 448 px (ancho x alto). Ajusta a este tamaño las imágenes que vayas a utilizar en el slider.

 

 

2.2.1.- Añadir una nueva imagen al Homeslider

 

Para añadir una nueva imagen al slider de Prestashop pulsaremos en el botón que aparece en la parte superior derecha de este bloque con forma de signo más (+). Es decir, en la parte superior derecha del bloque “LISTA DE DIAPOSITIVAS”.

Una vez hayas pulsado el botón (+) te aparecerán los siguientes campos a configurar para la imagen:

 

a.- Seleccione un archivo: pulsa el botón “Elegir un fichero” y carga la imagen que quieras añadir desde tu PC.

b.- Título de la diapositiva: introduce aquí el título de la imagen. Este título solo sirve para diferenciar las diferentes imágenes del slider de Prestashop desde el panel de administración. Este título no aparecerá en la parte pública de la web.

c.- URL de destino: introduce aquí la URL a la que quieras que vaya el usuario cuando haga clic sobre la imagen (introduce la URL completa, incluso el http://)

NO lo dejes en blanco. Introduce el signo almohadilla # en caso de que no quieras que al hacer clic sobre la imagen la web se dirija a una determinada URL. Si lo dejas en blanco Prestashop te reportará un error cuando le des a guardar.

d.- Título: introduce aquí el título para la etiqueta “Alt” de la imagen, elemento fundamental para el SEO. El título introducido aparentemente no aparecerá en la home de la web, pero si en la parte de HTML que lee el buscador Google. No te olvides de rellenar este título, es importante para el SEO Posicionamiento web.

e.- Descripción: si quieres que aparezca algún texto superpuesto a la imagen escribe dicho texto ayudándote con el editor. En las imágenes de ejemplo utilizan un título con etiqueta h2, una descripción tipo párrafo y un enlace tipo botón.

f.- Activado: este selector sirve para activar y desactivar la imagen. La imagen desactivada desaparecerá del slider Prestashop pero no perderá su configuración por si más adelante queremos volver a incluirla.

 

Crear una nueva imagen para el slider

Crear un nuevo slide o imagen para el homeslider

 

Realizada la pertinente configuración de la imagen del slider pulsa el botón de guardar que aparece en la parte inferior derecha.

 

 

2.2.2- Editar imágenes del slider Prestashop 1.6

 

Volvemos al bloque o sección “LISTA DE DIAPOSITIVAS”. Para editar la configuración de una imagen del slider de Prestashop pulsaremos el botón “Modificar” que aparece a su derecha.

Aquí podemos realizar las modificaciones que veamos oportunas y pulsar el botón de guardar situado en la parte inferior derecha.

Si lo que queremos es eliminar por completo una imagen pulsaremos el botón de “Eliminar” que aparece a la derecha del botón “Modificar”.

 

2.2.3.- Cambiar de posición imágenes del slider Prestashop 1.6

 

Seguimos en el bloque o sección “LISTA DE DIAPOSITIVAS”. Al situar el puntero del ratón sobre cualquiera de las imágenes verás que la habitual flecha se transforma en una cruz. Cuando el cursor tenga la forma de una cruz haz clic con el botón izquierdo de ratón, mantenlo pulsado y arrastra la imagen hacia otra posición.

 

cambiar posición de las imágenes del homeslider

Cambiar posición de las imagenes del slider prestashop

 

No es necesario pulsar el botón de guardar. Los cambios se guardarán automáticamente.

 

 

Me encanta el diseño web y el mundo del ecommerce. Apasionado de Prestashop, Woocommerce/Wordpress y de la formación. Me gustaría que este blog te sirviera de ayuda para poner en marcha e ir mejorando y evolucionando tu tienda online. Ya seas un profesional del sector o no, seguro que encontrarás mucha información de valor e interés aquí.

Compártelo ya!!

RECIBE GRATIS

CURSO PRESTASHOP

(20 vídeos)

Y WOOCOMMERCE

(14 vídeos) y MÁS

 

1.- CURSO PRESTASHOP 1.7 GRATIS (20 VÍDEOS)

2.- CURSO WOOCOMMERCE GRATIS (14 VÍDEOS)

3.- Guía para crear una tienda online de éxito
4.- Guía SEO para Prestashop
5.- Training Woocommerce, plugins imprescindibles y recomendados

QUIERO LOS CURSOS Y DEMÁS GRATIS

Mira en tu buzón de correo, para confirmar la suscripción.