Este PrestaShop es muy nuevo (de hecho, ni siquiera es la versión estable) y va a ser complicado encontrar temas para él durante un tiempo (y mucho más gratuitos), así que vamos a ver cómo crearnos uno, pero antes una advertencia:

La superstición de que cualquiera puede diseñar una página web

Tras años de dedicarme a esto, me he topado con una gran cantidad de supersticiosos que creen en que cualquier persona sin ningún conocimiento técnico ni de diseño puede diseñar una página web bonita y práctica. Es completamente falso.

Si no es tu caso, te recomiendo que te conformes con la plantilla por defecto, busques otra gratuita o de pago, o contrates a un diseñador.

Si sigues este micro tutorial, asumiré que, como mínimo, tienes conocimientos (aunque sean básicos) de FTP, CSS, y HTML. También deberías estar familiarizado con Firebug o alguno de sus derivados, y no vendría mal odiar Internet Explorer y tener algunas nociones de Javascript y PHP con Smarty.

¡Ahm, y no nos olvidemos del buen gusto!

Duplicar el tema por defecto

Esto es lo primero que habrá que hacer, para tener algo sobre lo que trabajar. Para ello, desde el back end:

  1. Ve a Preferencias > Temas.
  2. Pulsa Añadir nuevo.
  3. Dale un nombre a la plantilla, por ejemplo Prueba 1.
  4. Dale un nombre al directorio en que la guardarás, por ejemplo prueba1.
  5. Elige el tema del que quieres partir, normalmente default.
  6. Guarda.

Verás que ya tienes creado tu nuevo tema Prueba 1, y podrás seleccionarlo. De momento no es más que un duplicado del tema default. Ahora vamos a modificarlo.

Accede a la carpeta en que instalaste PrestaShop (si lo tienes en un hosting, seguramente tendrás que acceder por FTP), y dentro de la carpeta themes encontrarás una carpeta llamada prueba1, que será la copia de default que hemos creado. Trabajaremos sobre ella.

Entendiendo el árbol de ficheros

Resumiré un poco los tipos de fichero que encontraremos:

  • .tpl: Plantillas Smarty.
  • .xml: Configuraciones.
  • preview.jpg: Miniatura de la plantilla, la que se ve al seleccionarla en el back end.

El resto os deben ser bastante conocidos, y si no, tenéis una completa explicación en la documentación oficial de PrestaShop para diseñadores.

Realizando los cambios

Claro, ahora hay 200 plantillas y chorrocientos CSS, mas los que están en los módulos directamente (no están en el tema). Bueno, ya depende del tiempo y ganas que tengas, pero personalmente encontré que lo más sencillo era:

  1. Abrir el fichero css/global.css.
  2. Añadir @import url('custom.css'); al principio.
  3. Crear el susodicho fichero custom.css en la carpeta css.
  4. Abrir css/custom.css y escribir ahí todos los cambios que quisiera.

Si optas por esta opción, te encontrarás con el problema de que, al hacer el paso 2 al principio del fichero, cualquier cambio será reemplazado y parecerá que no sirve. Esto es porque ante selectores iguales, CSS toma el último declarado, y el tuyo está al principio del todo, por lo que pasa a ser el menos importante de todos.

Tienes 2 soluciones posibles:

  • Puedes añadir !important a cualquier cláusula para forzar fácilmente a que sobrescriba a las demás.
  • Puedes hacer el selector más específico que el que viene por defecto. Por ejemplo, si quieres sobrescribir el selector .block h4, puedes hacerlo con body .block h4.