Personalizar los elementos gráficos

a. Los logos

En el menú Preferencias del Cuadro de mandos, seleccione Temas. En el cuadro Apariencia, modifique los logos si es preciso.

Sería deseable que utilizase logos específicos tanto en los e-mails como en las facturas (sobre todo en estas últimas, ya que sus clientes seguramente las van a imprimir). Es muy probable que el tamaño del logo utilizado para el sitio no sea el adecuado en otros casos.

b. El Favicon

El favicon es el pequeño icono que se muestra en la ventana de la URL del navegador. Si no lo cambia, aparecerá el de PrestaShop.

Usando un programa gráfico como Photoshop (aunque puede utilizar incluso Paint), cree una imagen de 16 x 16 píxeles y guárdela con la extensión .ico.

También puede utilizar un servicio en línea, como http://www.favicon.cc/. En ese caso, deberá importar una imagen (Import Image) y a continuación hacer clic en Download Favicon para descargar en el ordenador el icono en el formato correcto.

Al igual que en el caso de los logos, haga clic en Examinar para localizar el archivo del favicon en su ordenador y a continuación haga clic en Abrir.

Para agregar el icono de tiendas que se mostrará en los mapas de Google, prepare una imagen (se recomienda que sea de 30 x 30 píxeles) en formato GIF transparente, el único formato que puede emplearse para este menester. Haga clic en el botón Examinar situado al lado de la opción Icono de tiendas, seleccione el archivo de imagen y haga clic en Abrir.

Haga clic en Guardar.

c. Cambiar el tema gráfico

Como en todos los CMS (Content Management Systems - sistemas de gestión de contenido), la apariencia está disociada del contenido. El aspecto y la estructura se almacenan en archivos separados, de modo que resulta fácil efectuar cambios. No obstante, siempre es importante tomar precauciones, ya que si se cambia la estructura puede que los módulos no se ubiquen en la misma posición, dependiendo del tema aplicado. De igual modo, un logo sin transparencia, que no da problemas sobre un fondo blanco, requerirá unos cuantos retoques si se ubica sobre un fondo de color en el nuevo tema. Por todo ello, debería tener en cuenta que necesitará reservar algo de tiempo para adaptar las posiciones de los módulos y de los elementos gráficos en caso de que decida cambiar de tema.

Encontrar un tema gráfico en PrestaShop

Acceda al catálogo de los add-ons de PrestaShop (http://addons.prestashop.com) y haga clic en Nuestros temas.

En la columna de la derecha, Refinar los resultados, haga clic en Versión y seleccione la versión de PrestaShop que haya instalado.

En la lista Clasificar, situada en la parte superior izquierda, puede elegir, por ejemplo, Precio: más económicos. Como podrá constatar, todos los temas compatibles con la versión 1.5 son, por ahora, de pago, aunque hay de todo tipo de precios.

Haga clic en el botón Más detalles para acceder a la página que presenta los detalles del tema. Observe las capturas de pantalla y consulte la información del cuadro Presentaciónpara asegurarse de que ese tema corresponde, en todos sus puntos, a lo que busca.

Prosiga con el proceso de compra y descargue el archivo comprimido con los elementos del tema gráfico.

Encontrar un tema gráfico en el mercado libre

También puede encontrar temas de PrestaShop creados por desarrolladores independientes en diversos sitios en línea. No obstante, en este caso, usted no disfrutará de ninguna garantía de PrestaShop, que únicamente certifica los temas que se descargan desde su sitio.

Por ejemplo, vaya a una de las siguientes direcciones:http://www.prestaselection.com/category/themes/ o http://www.starwebcreations.n et/es/

Cree una cuenta, añada el tema elegido a su carrito y confirme su pedido (incluso aunque solo adquiera un tema gratuito).

Tras aceptar, recibirá por e-mail el vínculo para descargar el archivo del tema.

Importar un tema

Una vez descargado el archivo de un tema, en el Cuadro de mandos abra el menú Módulos y haga clic en la opción Módulos.

Muestre el módulo Template Installer. Asegúrese de que está INSTALADO. En caso de que no sea así, instálelo.

Haga clic en el vínculo Configure.

En la sección Importar a partir del ordenador, haga clic en Examinar, localice el archivo del tema (no lo descomprima) y ábralo usando el botón Abrir.

Haga clic en el botón Siguiente.

Un mensaje le informa de que está a punto de instalar el tema y le permite verificar la compatibilidad de dicho tema con su versión de PrestaShop.

Haga clic en Siguiente.

En la ventana que sigue, desactive, si es preciso, los módulos instalados que no desee asignar al nuevo tema. Para ello, basta con que los marque.

Por ejemplo, si instala un nuevo tema diseñado a dos columnas, mientras que el antiguo tema contenía varios módulos en una tercera columna, puede ser interesante que los desactive.

Elija asimismo la configuración de los módulos nativos, es decir: asígneles una posición. Por defecto se mantiene la configuración del tema que se va instalar.

Haga clic en Siguiente.

La página siguiente muestra en color rojo las posibles alertas, si las hay. En el caso del tema que estamos instalando, parece que no hay ningún problema o incompatibilidad.

Le aconsejamos que copie este mensaje y que lo guarde con el bloc de notas o en un archivo de texto: así podrá saber en todo momento cuáles son los módulos específicos asociados al tema elegido.

Una vez importado el tema, abra el menú Preferencias y haga clic en la opción Temas.

En la sección Seleccionar temas para Nombre de la tienda, active el tema que desea aplicar y haga clic en Guardar.

Abra la página del Front Office o actualícela y compruebe que el nuevo tema es el activo. Como puede observar, en el siguiente ejemplo será preciso trabajar en el logo, ya que no tiene un fondo transparente, por lo que no se adapta bien al nuevo tema.

Para volver al tema antiguo, en el Back Office abra de nuevo el menú Preferencias y escoja la opción Temas. En la sección Seleccionar temas para Nombre de la tienda, active el tema antiguo y haga clic en Guardar.

Actualice la página de su tienda.

Crear un tema de PrestaShop

La creación de un tema de PrestaShop requiere serias competencias en desarrollo web. No obstante, la mayoría de los casi neófitos en PrestaShop pueden basarse en el tema por defecto de este programa para crear una versión personalizada simplemente modificando los archivos de hojas de estilo CSS.

En ese caso, para no alterar los archivos originales, la primera operación debería consistir en copiar la carpeta completa del tema original (../themes/prestashop) y cambiarle el nombre. A continuación, puede trabajar en el archivo global.css de la carpeta duplicada para cambiar los atributos y adaptarlos al estilo de su página.

En el caso de que los estilos afecten a imágenes, estas deben ubicarse en la carpeta img del tema.

Si tiene dificultades a la hora de identificar los estilos que se han de modificar, pruebe a utilizar Firebug, el plug-in de Firefox, que puede instalar a través de Firefox, Herramientas - Complementos: permite identificar los elementos al pasar el ratón por ellos, mostrando la lista de sus atributos de estilo en una ventana específica en la que será posible modificarlos para probarlos.

En el ejemplo siguiente, podemos identificar, usando Firebug, el cuadro de Productos destacados.

A continuación podemos cambiar el título del cuadro, por ejemplo «Productos especiales» en vez de «Productos destacados». Bastará con que escribamos el nuevo título en el atributo correspondiente de la hoja de estilos del tema personalizado.

Acuérdese de crear una imagen de previsualización para su tema; debe estar en formato JPG (100 x 100 píxeles), situada en la raíz del tema, y llamarse preview.jpg.