Como crear tu propia plantilla en Prestashop

El sistema de tema de PrestaShop se basa en un motor de plantillas, llamado Smarty, el cual permite a diseñadores y desarrolladores web crear fácilmente su propio tema, con pocos conocimientos técnicos.

Un tema de PrestaShop es un conjunto de archivos que puede editar con el fin de cambiar el aspecto de su tienda virtual.

Le presentamos algunas pequeñeces a tomar en cuenta:

• Todos los temas tienen sus archivos ubicados en la carpeta raíz /themes.
• Cada tema contiene su propia sub-carpeta, en la carpeta de temas principales.
• Cada tema está compuesto de archivos plantilla (.tpl), archivos de imagen (.gif, .jpg, .png), uno o más archivos CSS (.css) e incluso a veces archivos JavaScript (.js).
• Cada tema tiene su propio archivo de imagen preview.jpg en su carpeta, permitiendo al propietario de la tienda observar la manera como luce el tema directamente desde el back office, y seleccionar el tema apropiado.

He aquí un resumen de la estructura de archivos de un tema de PrestaShop (la opción por defecto):

• La carpeta /css contiene todos los archivos CSS.
• La carpeta /img contiene todas las imágenes.
• La carpeta /js contiene todos los archivos JavaScript.
• La carpeta /lang contiene traducciones del tema. Sus derechos de acceso deben configurarse en CHMOD 666 (por ejemplo), de modo que la herramienta de traducción de back-office se pueda leer y escribir dentro de la misma.
• La raíz de la carpeta sólo contiene archivos TPL (archivos Smarty), así como el archivo preview.jpg.

Las carpetas /css, /img y /js son opcionales, el tema puede funcionar perfectamente sin ellas.

Para manejar las traducciones hay que tener en cuenta el sistema que utiliza Prestashop, veremos variables de la siguiente forma:

Esto permitirá a cualquier persona traducir el tema en su propio idioma, utilizando la herramienta de traducción interna, la cual se encontrar en el back-office de PrestaShop, en la pestaña «Herramientas» y su sub-pestaña «Traducciones». En la sección «Modificar traducciones», utilice el menú desplegable, elija la opción «traducción de Front Office», y luego haga clic en la bandera del idioma en que desea traducir sus cadenas. Todas las cadenas del front-office serán mostradas.

Pasos a seguir para personalizar un tema

1. Ubique el directorio /themes en su instalación de PrestaShop y cree una copia del directorio por defecto ../themes/prestashop/.
2. Cambie el nombre al duplicado. Por ejemplo MyStoreTheme.
3. En la carpeta del tema personalizado, ubique la carpeta /css.
4. Abra el archivo global.css y cámbielo de acuerdo a sus necesidades. Aquí estará limitado por su creatividad – y su conocimiento de CSS.
5. Las imágenes nuevas o modificadas deben ser colocados en carpeta del nuevo tema /img (e.j., /themes/MyStoreTheme/img).
6. Una vez que su tema personalizado se encuentra listo, usted debe colocar un archivo que represente el tema, llamado preview.jpg, en la carpeta raíz del tema (ej., /themes/MyStoreTheme). Este archivo debe ser .jpg de 100 × 100 píxeles.
7. Diríjase a la sección “Temas” de la sub-pestaña “Aspecto” en la pestaña “Preferencias” de su back office.
8. Seleccione el nuevo tema y haga clic en Guardar.

Ten en cuenta que si modificas mucho la estructura te verás en la necesidad de añadir código HTML extra a los archivos .tpl de la plantilla.

Después también tendrás que considerar los módulos y en la mayoría de los casos deberás acceder a sus respectivas hojas de estilos para darles el aspecto deseado.

Como crear una plantilla en Prestashop 1.6.x