Editor de theme para PrestaShop

Qué es

El Editor de theme es el Studio de nuestros themes de PrestaShop: un editor a pantalla completa, que se abre desde el back office, con una vista previa en vivo de tu tienda real, para cambiar su aspecto y su estructura. Colores, fuentes, la cabecera, la ficha de producto, el minicarrito, la newsletter, el pie, el espacio entre áreas. Va dentro de nuestros themes (el primero es Aura) y no se vende por separado.

¿En qué se diferencia de otras formas de personalizar un theme? Un constructor de páginas te da libertad en una página, pero suele añadir su propia capa de marcado, scripts y peticiones, y casi nunca sabe qué es una ficha de producto o una cabecera. Editar .tpl y CSS a mano te da control, pero cada cambio necesita un desarrollador, vaciar la caché y un riesgo en la siguiente actualización. El Studio está en medio: el theme declara qué se puede cambiar, con límites sensatos, y tú lo cambias de forma visual. Nada es un lienzo libre, así que nada rompe el diseño.

Un recorrido por el Studio

El panel lateral tiene cuatro áreas: Cabecera, Página, Pie y Estilo, cada una con grupos, y un buscador que encuentra cualquier ajuste por su nombre. La vista previa es tu tienda real, con el ancho de ordenador, tableta o móvil. Lo que cambias es un borrador que solo ve el empleado que usa el Studio. Los visitantes no ven nada hasta que pulsas Guardar, y cada paso se puede deshacer y rehacer. Los textos se editan por idioma y puedes fijar un margen antes y después de casi todas las áreas.

Constructores de cabecera y de ficha de producto

El constructor de cabecera trata la barra superior y la cabecera como una sola zona. Arrastra el logo, el menú, el buscador, el idioma, la moneda, la cuenta, la lista de deseos, el carrito y hasta tres botones propios entre la barra superior, la cabecera, una fila inferior, una posición flotante u ocultos. Parte de un diseño (clásico, una sola barra, logo centrado, tienda) y ajústalo. El buscador tiene sus propias opciones, desde el tamaño y las esquinas hasta reducirse a un botón redondo que se abre sobre sus vecinos, y todos los controles de la cabecera comparten un mismo aspecto.

La ficha de producto es un menú: estructura (cinco maquetaciones, una de ellas de tres columnas), fotos, botón de compra, botón de lista de deseos, detalles en acordeón, pestañas o todo abierto, y un mismo aspecto para las secciones bajo el producto, además de seis diseños ya preparados. El mapa de la página muestra dónde vive cada bloque (columna de información, columna lateral, fila a todo el ancho, secciones) y te deja arrastrarlo a otro sitio, en el mapa o en la vista previa en vivo.

Paleta y fuentes

El theme trabaja con una paleta: color principal, secundario, superficies suaves, texto y fondo. Componentes como el menú, los botones del slider, el buscador, los controles de la cabecera, la newsletter y los botones te dejan elegir entre los colores de la paleta, no cualquier color, y así es como una tienda sigue siendo coherente tras diez cambios hechos por tres personas.

Las fuentes vienen de Google Fonts, pero tus visitantes nunca hablan con Google. La primera vez que eliges una fuente, tu tienda descarga sus archivos y los sirve ella misma, con solo los subconjuntos Latin y la fuente del texto precargada. No hay petición a terceros ni nada que añadir por ello a tu texto de cookies o de privacidad.

Huecos de Content Blocks

Algunos sitios del mapa de la ficha de producto son huecos Tu contenido: encima o debajo del botón de compra, en la columna lateral, a todo el ancho, tras los detalles. Los alimenta Content Blocks Pro, nuestro constructor de bloques. El mapa muestra los bloques de cada hueco con un enlace para editarlos o crear uno. Una franja de confianza, una guía de tallas o un banner se colocan en la ficha de producto sin tocar ninguna plantilla.

Exportar, importar y diseños de tienda por sector

Desde la página del módulo, Exportar descarga un zip con los valores del theme en todos los idiomas, el orden de las secciones de la home, qué módulos nuestros están activos y el contenido del slider, el menú y los bloques con sus imágenes y vídeos. Importar lo aplica a otra tienda. Los enlaces a categorías, productos y páginas viajan por aquello a lo que apuntan (URL amigable, referencia de producto), así que se vuelven a encontrar; un enlace a algo que la otra tienda no tiene se deja vacío y se avisa.

Eso te da dos usos. Puedes pasar un diseño terminado de preproducción a producción en minutos. Y puedes entregar diseños de tienda completos: una tienda de bicicletas, de moda, de lencería, de relojes, cada una como un paquete con su aspecto, imágenes, textos y bloques listos para importar.

Compatibilidad y rendimiento

El Studio funciona en PrestaShop 8.2 y 9 con PHP 8.1 o superior y no usa overrides. Los valores que guardas llegan a la tienda como un único <style> en línea pequeño de unos cientos de bytes en la cabecera de la página, sin peticiones extra y sin JavaScript para las opciones. Mientras no cambies nada, no se imprime nada. Nuestros themes se prueban contra presupuestos de peso (JavaScript, CSS, fuentes, peticiones) que no pueden superar los de Hummingbird, el theme sobre el que se construyen.

Para quién es

• Comerciantes que quieren cambiar el aspecto de su tienda sin abrir un ticket con un desarrollador.
• Agencias que entregan muchas tiendas: montan un diseño, lo exportan y lo importan en la siguiente, y dan al cliente un editor que sabe usar.
• Vendedores y diseñadores de themes que quieren ofrecer diseños de tienda completos por sector, con el editor, los módulos y el contenido en un solo paquete.

El Studio forma parte de nuestros themes, así que lo tienes con el theme. Además tiene un contrato para módulos: cualquiera de nuestros addons puede añadir su propio panel, y el slider, el menú, los bloques y las opiniones ya lo hacen.