Vamos a ver en este post cómo podemos editar o personalizar la plantilla que viene por defecto en Prestashop 1.7. y Prestashop 1.6

Debemos destacar que la plantilla prestashop 1.6 es una plantilla optimizada para dispositivos móviles, al igual que sucede con la plantilla de Prestashop 1.7

Es posible que quieras realizar algún cambio en la estética de la plantilla y no haya opción para ello. En ese caso puedes echarle un vistazo a este post: Modificar CSS Prestashop plantilla por defecto

 

APÚNTATE A MIS CURSOS PREMIUM. ACCEDE A TODOS LOS CURSOS POR SOLO 10€/MES


VER CURSOS

 

 

Aprende a elegir una plantilla Prestashop

 

ÍNDICE CONTENIDOS

 

 

1.- EDITAR PLANTILLA PRESTASHOP 1.7

 

Vamos a ver en este apartado las principales opciones de personalización de la plantilla que viene por defecto en Pretashop 1.7.

La mayoría de opciones de edición de la plantilla vienen definidas a través de diferentes módulos.

 

Aprende a gestionar los módulos con Prestashop 1.7 en el siguiente post

 

El módulo responsable del slider que en esta versión de prestashop se denomina “Carrusel de imágenes” (imageslider) lo veremos en el post dedicado al slider de prestashop

 

 

1.1.- Gestión de módulos en Prestashop 1.7

 

En la mayoría de los apartados tendremos que acceder al panel de gestión de módulos para poder personalizar las diferentes opciones de la plantilla por defecto de prestashop 1.7. Para no repetirlo en cada apartado voy a describir ahora como acceder al panel de gestión de módulos:

Accede al panel de administración de prestashop 1.7 y en el menú lateral ve a: “MEJORAS > Módulos > Módulos y Servicios”.

A continuación haz clic en la pestaña “Módulos instalados”

Haz scroll hasta llegar al apartado “módulos del tema”

 

modulos de la plantilla por defecto de pretashop 1.7

Módulos de la plantilla instalados en Prestashop 1.7

 

 

1.2.- Módulo banner

 

Con el módulo banner podremos añadir una imagen en la parte inferior de la home.

Accede al panel de administración de módulos como hemos hecho en el apartado 1 y haz clic en el botón “Configurar” del módulo “Banner”.

Verás tres opciones:

a.- Imagen del banner: haciendo clic en el botón: “Selecciona un archivo” podremos añadir la imagen que queremos para el banner. El banner aparecerá en la parte inferior de la web pero encima del footer. La recomendación de prestashop es que la imagen tenga las dimensiones 1110 x 214 px.

b.- Enlace del banner: aquí pondremos la URL a la que nos dirigiremos si hacemos clic sobre la imagen del banner.

c.- Descripción del banner: este texto no aparecerá en la web. Con este campo rellenaremos la etiqueta title y alt de la imagen, por lo que este texto tendrá fines de SEO.

 

Aprende a optimizar el SEO Posicionamiento de las categorías de tu tienda prestashop en este post

 

modulo banner de la parte inferior de la página de inicio prestashop 1.7

Banner en la parte inferior de la home pretashop 1.7

 

 

1.3.- Módulo bloques de texto personalizados en prestashop 1.7

 

Este módulo nos permitirá incluir un texto en la página de inicio. Su posición será justo debajo del banner que analizamos en el apartado anterior. Es muy importante para el SEO de la página de inicio poder escribir algo de texto en la home, así como el correspondiente texto etiquetado como H1

Una vez hayamos accedido al panel de administración de módulos como indicamos en el punto 1, haremos clic sobre el botón “Configurar” del módulo: “Bloques de texto personalizados” (customtext)

Nos aparecerá un editor de texto con el cual podremos personalizar el texto que queremos que aparezca en la parte inferior de la web.

 

Personalizar el módulo de prestashop 1.7 textos personalizados

Módulo textos personalizados de prestashop 1.7

 

 

1.4.- Módulo de Enlaces de seguimiento a través de redes sociales de prestashop 1.7

 

El módulo de “Enlaces de seguimiento a través de redes sociales” nos permite configurar los iconos de redes sociales que aparecen en el footer de la plantilla por defecto de Prestashop 1.7. Es decir, aparecerán en la home y resto de páginas de la tienda Prestashop.

Podremos configurar las redes sociales: Facebook, Twitter, RSS, Youtube, Google +, Pinterest, Vimeo e Instagram.

Lo primero que haremos será acceder a la interface de gestión de módulos como hacíamos en el punto 1.

Ahora buscaremos el módulo “Enlaces de seguimiento a través de redes sociales” (socialfollow) y haremos clic en el botón “Configurar”.

Las redes sociales cuyos campos no rellenemos no mostrarán el icono. Por el contrario, las redes sociales en cuyo campo si pongamos su url aparecerán sus correspondientes iconos en el footer de la tienda con el correspondiente enlace.

 

configurar módulo de enlaces de redes sociales prestashop 1.7

Modulo enlaces de seguimiento a través de redes sociales

 

Los iconos de redes sociales que hayamos configurado aparecerán en la parte superior derecha del footer de la web. Es decir, aparecerán en todas las páginas de la tienda.

 

iconos redes sociales plantilla pretashop 1.7

Iconos en el footer de plantilla por defecto en Pretashop 1.7

 

 

1.5.- Módulo Lista de enlaces o Link Widget Prestashop 1.7

 

Con este módulo de prestashop 1.7 podremos personalizar dos de las columnas que aparecen en el footer de la web.

Concretamente la columna de “Nuestra Empresa” y la de “Productos”

 

modificar bloques de productos y nuestra empresa en prestashop 1.7

Módulo lista de enlaces

 

Accede al panel de gestión de módulos como describimos en el punto 1. Busca el módulo “Lista de enlaces” y haz clic en “Configurar”.

Te aparecerá una pantalla desde la cual podrás elegir configurar el bloque de “Productos” o el de “Nuestra empresa”.

Haz clic en “Modificar” en el bloque que quieras Personalizar

 

Editar módulos del footer prestashop 1.7

Bloques de enlaces del footer prestashop 1.7

 

Al tener este módulo de “Lista de enlaces” o “Link widget” tantas opciones lo veremos en un post especialmente dedicado a este módulo de prestashop 1.7

 

 

1.6.- Bloque información de la tienda del footer

 

Para personalizar el bloque de información de la tienda que aparece en el footer no busques ningún módulo ya que no podrás realizar la edición de este bloque desde ninguno.

 

editar el contenido de la info de contacto de la tienda en prestashop 1.7

Información de contacto del footer pretashop 1.7

 

Para editar el contenido de este bloque iremos a: “CONFIGURAR > Parámetros de la tienda > Contacto”

En la siguiente pantalla haz clic en la pestaña “Tiendas” y luego haz scroll hasta ver un bloque con el título “DATOS DE CONTACTO”

Los datos que vayas rellenando en los diferentes campos te irán apareciendo en el bloque de “INFORMACIÓN DE LA TIENDA” del footer.

 

configuración información de la tienda del footer de pretashop 1.7

Campos para rellenar la info de contacto de la tienda prestashop 1.7

 

 

1.7.- Módulo información de seguridad y confianza para el cliente en Prestashop 1.7

 

Este módulo se muestra en las fichas de producto. Es decir, solo en las páginas de los diferentes productos de prestashop.

 

Aprende a crear una ficha de producto casi perfecta con Prestashop

 

Se muestran 3 iconos acompañados de 3 textos explicativos.

Podrás modificar el texto y cambiar el icono si así lo deseas.

 

editar la info de seguridad para el cliente en prestashop 1.7

Personalizar la información de la ficha de producto

 

Para editar el contenido de esta información que se muestra al cliente en la ficha de producto iremos al panel de gestión de módulos como indicábamos en el punto 1.

Buscaremos el módulo “Información de seguridad y confianza para el cliente” y haremos clic en el botón “Configurar”.

En el panel de administración nos aparece 1 bloque con 3 elementos. Cada uno correspondiente a uno de los textos que aparece en la ficha de producto.

Haz clic en el botón “Modificar” del elemento de texto que quieras personalizar

 

 

Editar apartados del módulo de información y confianza para el cliente

Módulo información de seguridad y confianza para el cliente

 

Al modificar uno de los elementos verás un panel con las siguientes opciones:

a.- Imagen: verás el icono que se está mostrando. También tienes un botón “Añadir archivo” que puedes utilizar para subir un icono diferente al que se está mostrando.

Los iconos tienen un tamaño de 25×25 px, por lo que lo más conveniente es que los subas de ese tamaño.

b.- Texto: Aquí podrás personalizar el texto que aparecerá junto al icono.

Recuerda hacer clic en el botón de guardar

 

modificar el icono en ficha de producto prestashop

modificar texto o icono en ficha producto prestashop 1.7

 

 

 

2.- EDITAR PLANTILLA PRESTASHOP 1.6

 

En esta parte veremos como personalizar la plantilla que viene por defecto con Prestashop 1.6.

 

 

2.1.- Configurador de temas (Theme configurator)

 

La mayor parte de la personalización de la plantilla por defecto de Pretashop la realizaremos a través del módulo denominado: “Configurador de temas” (en inglés Theme Configurator).

Para buscar cualquier módulo en Pretashop debemos ir a: “panel de administración > módulos > módulos “

Ahora vamos al bloque o apartado: “LISTA DE MÓDULOS”. Revisa que el filtro lo tienes puesto para que te aparezcan todos los módulos posibles:

Filtrar por: Instalados y no instalados |Activados y desactivados | Autores: “Todas” o “todos los autores” (según la versión de Prestashop).

Una vez revisados los filtros nos vamos a la barra de búsqueda y escribimos el nombre del módulo que estamos buscando: “configurador de temas”. Observa que conforme vas escribiendo el nombre van apareciendo módulos que concuerdan con lo que vas escribiendo.

Una vez escrito el nombre completo te debe aparecer el módulo “Configurador de temas”.

Para personalizar la plantilla deberemos configurar el módulo, cosa que realizaremos al pulsar en el botón “configurar”.

Una vez en la pantalla de configuración del módulo verás que está dividida en dos bloques o secciones:”AJUSTES” y “CONFIGURADOR DE TEMAS (Versión)”.

 

 

2.1.1.- BLOQUE O SECCIÓN: AJUSTES

 

En este bloque verás que aparecen una serie de opciones de personalización que vamos a ir viendo una a una:

 

 

2.1.1.1.- Bloque Social Prestashop (BlockSocial)

 

Aquí podrás personalizar las redes sociales que aparecen en la home de la página de inicio de la plantilla Prestashop 1.6. Este apartado sirve para conectar las redes sociales en las que estás presente con tu tienda online.

 

personalizar iconos redes sociales prestashop

Iconos de redes sociales en la plantilla por defecto Prestashop 1.6

 

Pon el cursor del ratón sobre el botón: “configurar”, pulsa el botón derecho del ratón y selecciona: “abrir enlace en una pestaña nueva”. De esta manera se te abrirán las opciones de configuración en una nueva pestaña.

Ahora verás una serie de redes sociales. Escribe la URL de la página de cada una de las redes sociales en las que estás presente. La que dejes en blanco no aparecerá.

A continuación pulsa el botón de guardar.

 

Para ver los cambios abre la tienda haciendo clic sobre el texto: “Mi Tienda” que aparece en el menú superior parte derecha del panel de administración.

En el footer o parte inferior de la web verás el texto: “Síganos” y los iconos de las redes sociales que has configurado anteriormente.

Al hacer clic sobre cada una de ellas deberá aparecer la página de la red social correspondiente.

 

 

2.1.1.2.- Boque de información de contacto (Blockcontactinfos) Prestashop

 

A través de esta opción podremos modificar la información de contacto que aparece en el footer o parte inferior de la web.

Como en el caso anterior pulsamos con el botón derecho del ratón sobre el botón configurar y abrimos en una nueva pestaña.

Ahora rellenaremos: el nombre de la tienda, dirección, número de teléfono de contacto y correo electrónico de contacto.

A continuación pulsamos el botón de guardar.

Ahora pulsamos en “Mi tienda” en el menú de la parte superior. En el footer o parte inferior de la tienda se deben reflejar los cambios que hayamos realizado.

 

Editar info contacto plantilla Prestashop por defecto

Información de contacto de la tienda Pretashop

 

 

2.1.1.3.- Módulo Redes Sociales (SocialSharing) en Prestashop

 

Mostrar botones para compartir en redes sociales en la página de los productos.

En una opción anterior configuramos los iconos que aparecen en la parte inferior de la web y que enlazan hacia las redes sociales en las que estamos presentes.

Ahora lo que haremos será editar a través de que redes sociales los usuarios podrán compartir los diferentes productos de la tienda online. Solo podremos elegir entre: Facebook, Twitter, Google + y Pinterest.

 

Configurar botones de compartir en redes sociales prestashop

Editar botones de compartir en Redes Sociales en Prestashop

 

Procedemos a la configuración de este apartado haciendo clic en el botón “configurar”.

Ahora simplemente dejaremos en “si” las redes sociales a través de las cuales queremos que se puedan compartir los productos de la web y en “no” las que no queramos.

A continuación pulsamos en Guardar.

Ahora ve a la tienda Prestashop y busca un producto cualquiera. Sitúa el cursor del ratón sobre un producto y pulsa el botón “Mas” para acceder a la ficha de dicho producto.

En la ficha verás que a la derecha de la imagen del producto y bajo la descripción del mismo aparecen las redes sociales que has personalizado a través de las cuales se permite compartir productos de la tienda.

 

 

2.1.1.4.- Bloque caja Facebook me gusta (Blockfacebook)

 

Mostrar el bloque de Facebook de la página principal. Este apartado sirve para editar la caja de Facebook que aparece en la página de inicio de la tienda Prestashop.

Para configurar que página de Facebook es la que debe aparecer procedemos a configurar dicho apartado haciendo clic sobre el botón configurar.

Escribe la URL de tu página de Facebook y pulsa guardar. Si la url está correctamente escrita aparecerá la imagen de la caja de la url que has introducido.

 

Configurar bloque de facebook

Editar bloque de Facebook de Prestashop

 

Solo es válido introducir la url de páginas de Facebook no de perfiles personales. Si introduces la url de un perfil personal, la caja de Facebook no se cargará.

Recuerda que la url de tu página de Facebook tendrá una estructura similar a esta:

https://www.facebook.com/nombredetupagina

Aquí tienes más info sobre este apartado de configuración del bloque de Facebook en Prestashop

 

 

2.1.1.5.- Bloque de información CMS Personalizado (Blockcmsinfo)

 

Mostrar el bloque de información CMS Personalizada. En la página de inicio de Prestashop puedes ver que a la derecha de la caja de Facebook aparecen dos bloques.

Un bloque tiene una serie de iconos y el otro no.

 

Editar el Bloque de información CMS

Bloque de información CMS Personalizado

 

Para configurar estos dos bloques, volvemos al panel de administración de Prestashop y pulsamos el botón de configurar y abrimos en una nueva pestaña.

Verás que tenemos dos bloques. Un bloque con ID =1 y un bloque con ID=2. El bloque con ID=1 se corresponde con el de los iconos el de ID=2 con el otro.

 

 

2.1.1.5.1.- Bloque de los iconos (ID=1)

 

Para configurar el bloque de los iconos. Es decir, el bloque con ID=1, ponemos el ratón sobre el botón de modificar y hacemos clic con el botón derecho seleccionando la opción: “abrir enlace en una pestaña nueva”.

 

Configurar el Bloque CMS en Prestashop

Editar el Bloque CMS con iconos de Prestashop

 

Vemos que aparece un editor de texto con tres títulos y tres descripciones. Ahora editaremos dichos títulos y subtítulos teniendo en cuenta que el primer título y subtitulo se corresponde con el icono del camión, el segundo con el icono del teléfono y el tercero con el icono de la tarjeta de crédito.

A continuación pulsamos el botón de guardar y hacemos clic sobre “Mi tienda” para ver los cambios realizados.

 

 

2.1.1.5.2.- Bloque sin iconos (ID=2)

 

Ahora configuraremos el bloque con ID=2. Para ello seguiremos el mismo procedimiento que hicimos con el bloque de los iconos. Pondremos el ratón sobre el botón de modificar y haremos clic con el botón derecho seleccionando la opción: “abrir enlace en una pestaña nueva”.

Ahora nos encontraremos con otro editor, y un texto con un título, un subtítulo y una descripción. Ahora procederemos a editar dichos textos y pulsaremos el botón de guardar. A continuación haremos clic sobre “Mi tienda” en el menú superior para ver los cambios realizados.

 

Configurar el bloque de información CMS de la derecha

Editar el bloque de información CMS con id=2

 

 

2.1.1.6.- Vista rápida Prestashop

 

Muestra la ventana de vista rápida en la página de inicio y las páginas de categorías en Prestashop:

Si ponemos el cursor del ratón sobre un producto veremos que aparece un botón que pone: “vista rápida” (en la plantilla por defecto de Prestashop). Si hacemos clic sobre dicho botón, aparece una ventana emergente con los datos más relevantes del producto. La vista rápida es una manera de ver las características más importantes de un producto sin tener que acceder a la ficha del mismo (sin cambiar de url).

 

Desactivar la vista rápida en Prestashop

Vista rápida en Pretashop

 

A través de esta opción podemos activar o desactivar la vista rápida. Si ponemos el selector en “NO” y posteriormente pulsamos en “guardar” ya no tendremos las opción de ver un producto a través de la vista rápida.

 

 

2.1.1.7.- Bloque de banner de Prestashop (Blockbanner)

 

A través de esta opción podemos elegir cual será la imagen que aparecerá en la parte superior de la plantilla Prestashop 1.6 por defecto.

Como hemos hecho en casos anteriores situaremos el ratón sobre el botón “configurar”,  pulsaremos el botón derecho y elegiremos: “abrir enlace en una pestaña nueva”.

Recuerda que la imagen que vayas a poner en la parte superior de la web debe tener unas dimensiones de 1170×65 px (ancho x alto).

 

editar el banner situado en la parte superior de la plantilla prestashop

Personalizar banner superior Prestashop

 

 

En la pantalla tenemos los siguientes apartados:

 

a.- Imagen del Banner Superior: Pinchando en el botón “Elegir un fichero” podemos subir una imagen desde nuestro PC para que sea la que aparezca como banner superior.

b.- Enlace del Banner: Si introducimos aquí una URL, cuando alguien haga clic sobre el banner la web se dirigirá hacia dicha URL (recuerda incluir el http:// en la URL).

c.- Descripción del Banner: introduce aquí una descripción corta del significado de la imagen. Esto será bueno para el posicionamiento web. Lo que estamos haciendo es rellenar las etiquetas alt y title de la imagen o banner superior.

A continuación pulsa el botón de guardar.

 

 

2.1.1.8.- Bloque de logos de pago en Prestashop (Productpaymentlogos)

 

Mostrar los logos de los medios de pago disponibles:

Cuando accedemos a la ficha de un producto observamos que en la parte izquierda se sitúa la foto del producto y a la derecha aparece un panel en el cual aparece el precio del producto, el selector de cantidad y el botón de añadir al carrito. En la parte inferior de este panel aparece una imagen relacionada con las formas de pago de la tienda online.

En las versiones 1.6.0.x aparece una imagen con los siguientes elementos: paypal, tarjeta visa, tarjeta Master Card y SSL.

En las versiones 1.6.1.x aparece una imagen con el logo de Visa y Master Card.

 

Editar bloque de logos de Prestashop 1.6

Bloque de logos de pago en Prestashop

 

Lo recomendable es utilizar una imagen con el mismo tamaño al utilizado en el ejemplo. En el caso de las versiones 1.6.0.x el tamaño utilizado es de 245×62 px (ancho x alto). En el caso de las versiones 1.6.1.x el tamaño utilizado es de 233×60 px (ancho x alto).

Para configurar este apartado procedemos como en los anteriores casos. Situaremos el cursor del ratón sobre el botón “configurar”, haremos clic sobre él con el botón derecho del ratón y elegiremos la opción: “abrir enlace en una pestaña nueva”.

 

En la pantalla de configuración nos aparecerán las siguientes opciones:

 

a.- Bloque título: si escribimos un texto aquí, éste aparecerá justo encima de la imagen de logos de pago.

b.- Imagen del bloque: a través del botón “Añadir archivo” podemos subir una nueva imagen que sustituya a la de ejemplo.

c.- Enlace de la imagen: Si introducimos aquí una URL. Cuando alguien haga clic sobre la imagen el navegador dirigirá al usuario hacia la URL que hayamos incluido (recuerda incluir el http:// en la URL). Esto está pensado para enlazar la imagen con las condiciones de compra o algún apartado dedicado a las formas de pago de la tienda.

 

 

2.1.1.9.- Live Configurator

 

A través de este elemento podemos elegir los colores de la plantilla y la fuente de texto de los títulos (la fuente elegida no afectará a todos los textos de la web, sólo afectará a algunos títulos de texto).

Para utilizar el Live Configurator situamos el cursor sobre el botón “ver”, pulsamos el botón derecho del mismo y elegimos la opción: “Abrir enlace en una pestaña nueva”.

Verás que se abre la página de inicio de la tienda. Fíjate que en el lateral izquierdo aparece una especie de botón con el icono de unos engranajes. Haz clic con el botón izquierdo del ratón sobre el botón.

 

Personalizar plantilla prestashop con el Live configurator

Editar diseño de la plantilla con el Live Configurator

 

Verás que se despliega un panel con algunas opciones. Es posible que no veas el panel completo. Para poder verlo completo tendrás que jugar con las siguientes opciones:

Reducir zoom navegador: CTRL –

Ampliar zoom navegador: CTRL +

Volver al estado original del zoom: CTRL 0

 

Una vez reducida la pantalla del navegador, verás que el panel se compone de 2 partes:

 

a.- Color del tema: hace referencia a la combinación de colores para la tienda online. Elige la combinación de colores que quieras y verás una pre visualización de cómo quedaría la web. Si quieres guardar los cambios pulsa el botón de Guardar que aparece en la parte inferior del panel.

Si quieres volver al color original pulsa el botón “Reinicializar” que aparece en la parte inferior del panel.

b.- Fuente: Para elegir una fuente haz clic sobre el botón desplegable: “Elige una fuente” y selecciona una de ellas. Verás una pre visualización de la misma. Como en el caso anterior, para que los cambios sean permanentes deberás pulsar el botón de Guardar que aparece en la parte inferior del panel.

 

En caso de que quieras volver a la fuente original sólo tendrás que pulsar el botón “Reinicializar” que aparece al final del panel.

Ten en cuenta que la fuente elegida sólo afectará a algunos textos de la web. Esencialmente a algunos de los títulos que en ella aparecen.

Recuerda al terminar la configuración de este apartado pulsar los botones (CTRL 0) para poner el zoom del navegador al tamaño original.

 

 

2.1.1.10.- Mostrar las subcategorías

 

Cuando hacemos clic sobre una categoría de la tienda online. La plantilla de Prestashop por defecto nos mostrará en primer lugar la categoría seleccionada y a continuación las subcategorías que dependen de la primera. A continuación aparecerán los diferentes productos que pertenecen a la categoría seleccionada.

 

Mostrar o no subcategorías en Prestahsop

Mostrar subcategorías en Prestashop

 

A través de esta opción podemos activar o desactivar esta característica. Es decir, si en el selector elegimos las opción: “NO” y pulsamos en guardar, cuando seleccionemos una categoría no nos aparecerán las subcategorías de la misma.

 

 

2.1.2.- Bloque o sección: “CONFIGURADOR DE TEMAS”

 

Seguimos en el módulo Configurador de temas o theme configurator. En el punto anterior hemos estado configurando el bloque: “AJUSTES” que aparecía en la parte superior, ahora vamos a ver el bloque denominado propiamente como “Configurador de temas” que aparece más abajo.

 

 

2.1.2.1.- Ganchos o Hook

 

Observa que el bloque está dividido en varios ganchos. Un gancho es algo así como un lugar de la plantilla donde se puede insertar algún tipo de contenido.

Observaras que hay 5 ganchos: gancho “Home”, gancho “top”, gancho “left”, gancho “right” y gancho “footer”.

 

 

2.1.2.2.- Gancho “Home”

 

En la plantilla por defecto de Prestashop el gancho “Home” está formado por 5 imágenes. Estas imágenes aparecen en la parte inferior de la página de inicio pero por encima del footer.

 

editar imágenes plantilla por defecto prestashop

Editar imágenes de la página de inicio de Presashop

 

Las tres imágenes superiores tienes unas dimensiones de 383×267 px (ancho x alto). Mientras que las dos imágenes inferiores tienen unas dimensiones de:

a.- La situada más a la izquierda tiene unas dimensiones de: 383×142 px (ancho x alto)

b.- la situada a la derecha tiene unas dimensiones de: 777×142 px (ancho x alto)

 

Es hora de ponerse a diseñar las imágenes de nuestra página de inicio con las dimensiones antes señaladas.

Una vez creadas procederemos a editar las imágenes que vienen por defecto. Verás que en el panel de administración de Prestashop aparece un botón a la derecha de la imagen a editar con el nombre: “Modificar”. Pulsa el botón de modificar de la imagen que quieras sustituir y verás cómo más abajo se despliegan una serie de opciones:

 

a.- Activar: para que la imagen esté en funcionamiento (sea visible) o por el contrario no lo esté.

b.- Título de la imagen: introduce un título descriptivo de la imagen. El texto que incluyas servirá para rellenar las etiquetas alt y title de la imagen, elemento fundamental para el Posicionamiento web. El título no será visible para los visitantes de la web, “solo” será visible para Google.

opciones de configuracion imágenes de la home

Editar imágenes de la home de Prestashop

c.- Usar título frontal: para que el título de la imagen aparezca bajo ella. No lo marques pues se perdería la distribución actual de la plantilla.

d.- Hook para el que se pueden añadir imágenes: para elegir el gancho o hook en el que se acoplará la imagen. Deja el que viene por defecto, el de “Home”.

e.- Cargar su imagen: para subir una imagen que sustituya a la actual. Pulsa el botón examinar y sube la imagen que sustituirá a la que viene por defecto.

f.- Ancho de imagen: para modificar las dimensiones de la imagen (Ancho). Dejar como está para no perder la configuración de bloques de la plantilla por defecto.

g.- Alto de la imagen: para modificar las dimensiones de la imagen (Alto). Dejar como está para no perder la configuración de bloques de la plantilla por defecto.

h.- Objetivo del enlace: aquí debes escribir la url a la que quieres que vaya el usuario cuando haga clic sobre la imagen. Para que no cometas errores al introducir la url, mi recomendación es que introduzcas la url completa (incluso el http://). Si no quieres que el usuario vaya a otro lugar al hacer clic en la imagen deja la casilla en blanco.

i.- Abrir el enlace en una nueva pestaña: en caso de haber puesto una url de destino en el apartado anterior (Objetivo del enlace). Si marcamos la casilla, al hacer clic sobre la imagen se abrirá una nueva pestaña del navegador para mostrar la página de destino. En caso contrario la página de destino aparecerá en la pestaña actual del navegador.

j.- Código HTML Opcional: sirve para añadir código HTML al hook. Lo dejamos en blanco.

k.- Guardar: recuerda pulsar el botón de guardar al realizar cualquier modificación para que los cambios sean guardados.

Siguiendo el mismo procedimiento editaremos las cinco imágenes del hook o gancho: “Home”.

 

 

2.1.2.3.- Gancho top

 

El gancho top está situado a derecha del slider y está compuesto por dos imágenes de 381×219 px (ancho x alto).

Procederemos de igual manera que para el gancho “Home”. Primero crearemos dos imágenes de los tamaños adecuados.

Posteriormente editaremos las dos imágenes del gancho “Top” y las sustituiremos por las nuevas imágenes siguiendo el procedimiento del punto anterior.

 

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.