Manual del usuario del complemento Diseñador/Personalizador de productos de Prestashop

1.0 Introducción

Como propietario de una tienda, siempre ha pensado en multiplicar las conversiones, pero no en la experiencia de compra de sus clientes. Un cliente feliz y satisfecho es aquel que regresa a la tienda en busca de más artículos. Por lo tanto, si desea que los clientes regresen a su tienda, haga que la experiencia del cliente perdure para siempre integrando el complemento Prestashop Product Designer/Customizer en su tienda de comercio electrónico. Con la ayuda de… Módulo de diseño de producto personalizado de PrestashopLos comerciantes pueden ofrecer opciones intuitivas y creativas de personalización de productos en línea a sus clientes, lo que les permite transformar la versión básica del producto en un diseño moderno, elegante y único. El complemento de personalización de productos de Prestashop permite al administrador mostrar el panel de personalización del producto al hacer clic en el botón “Personalizar” en la página del producto. Los clientes pueden agregar fácilmente textos con colores vibrantes y efectos, subir imágenes con filtros y añadir un código QR para adaptarlo a sus necesidades.

1.1 Características destacadas del complemento de personalización de productos de Prestashop

No se requieren conocimientos técnicos de programación para configurar o modificar la configuración del módulo de Diseño de Producto Personalizado de Prestashop. Todo es muy sencillo con este módulo. Veamos rápidamente las diferentes funciones que ofrece este complemento de Prestashop.

El complemento Diseñador/Personalizador de Productos de Prestashop te ayuda a ofrecer una amplia gama de productos personalizables en tu tienda online. Con el complemento Diseñador/Personalizador de Productos de Prestashop, los clientes pueden comprar fácilmente y disfrutar de los beneficios de los productos online ampliados, que se pueden personalizar según sus necesidades.
El Diseñador de Productos Online añade una vista de diseño para que los compradores potenciales puedan personalizar el producto en tiempo real. El módulo Configurador de Productos permite al administrador de Prestashop añadir un conjunto diferente de opciones de personalización para cada producto de la tienda.
Con la integración del módulo de diseño de productos de Prestashop, los clientes pueden acceder al panel de personalización de productos con cualquier producto que deseen comprar, como camisetas, tazas, anillos o cualquier otro tipo de producto que pueda personalizarse según sus necesidades.
El complemento de personalización de productos de PrestaShop muestra un botón “Personalizar” para cada producto personalizable de la tienda. El administrador puede habilitar opciones de personalización solo para los productos que desee.
Se puede habilitar o deshabilitar toda la funcionalidad del complemento Diseñador/Personalizador de Producto de Prestashop. Al deshabilitarlo, se muestran las opciones estándar de personalización del producto en la página del producto.
El módulo de personalización avanzada de productos muestra el cálculo del precio de personalización en tiempo real en la página del producto.
Con el complemento de diseño de productos personalizados de Prestashop, el administrador puede configurar los lados del diseño del producto que están disponibles para el usuario.
El módulo configurador de productos permite al administrador habilitar o deshabilitar las opciones de descarga de archivos PDF para los clientes en la interfaz.
El módulo de Personalización Extendida de Productos de Prestashop permite añadir imágenes predefinidas a un producto. Estas imágenes suelen estar agrupadas. Los clientes pueden subir y configurar cualquier imagen que deseen.
El cliente puede utilizar de forma flexible las fuentes, colores y filtros deseados para el producto utilizando este módulo de diseño de productos de Prestashop.
Este módulo de personalización avanzada de productos permite al administrador definir precios para diferentes opciones de personalización.
El módulo de personalización de productos de Prestashop también ofrece una opción para personalizar el producto mediante un código QR para el cual el administrador puede definir un precio separado.
El complemento de diseño de productos personalizados de Prestashop agrega automáticamente un precio fijo de diseño completo al precio final personalizado de un producto.
El complemento Diseñador/Personalizador de productos de Prestashop admite compatibilidad con múltiples tiendas y varios idiomas.
El complemento de diseño de productos personalizados de Prestashop responde a dispositivos móviles y es compatible con varios temas de Prestashop.

1.2 Tecnología para el desarrollo

Idioma: PHP
Estructura: Prestashop

2.0 Guía de instalación del módulo Personalizador avanzado de productos

El administrador de la tienda puede seguir estos sencillos pasos para instalar el complemento de personalización de productos de Prestashop en su tienda online: 1. Primero, descargue el paquete del complemento desde la tienda Knowband. 2. Recibirá un archivo comprimido con el código fuente y el manual de usuario. Descomprima el paquete completo en el directorio raíz de su tienda Prestashop mediante un gestor FTP (como Filezilla o WinSCP; descárguelo aquí: https://filezilla-project.org/). Encontrará los archivos y carpetas como se muestra en la siguiente imagen:

El complemento de diseño de productos personalizado para Prestashop ya está instalado y listo para usar. El administrador puede configurar los distintos ajustes según su sitio web de Prestashop.

3.0 Interfaz de administración del módulo Personalizador avanzado de productos de Prestashop

Justo después de la instalación exitosa de Complemento Prestashop Product Designer / Customizer En su sitio web, puede configurar el panel de personalización de productos según sus necesidades. En el panel de administración, haga clic en “Módulos y servicios” y luego en el botón “Configurar” junto al Diseñador/Personalizador de productos de Knowband.

Aquí, en la siguiente interfaz, encontrará la configuración completa del módulo Diseñador de producto/Personalizador junto con sus subsecciones como se enumeran a continuación.

Este módulo de personalización de productos de Knowband consta de cuatro subsecciones que se han analizado más a fondo. 1. Configuración 2. Fuentes 3. Colores 4. Grupo de imágenes Cada pestaña del módulo de personalización de productos extendidos de Prestashop se ha analizado a continuación:

Configuración de 3.1

En la configuración del complemento de personalización de productos de Prestashop, puede realizar la configuración básica para el panel de personalización que se muestra en la interfaz a los clientes.

Activar/Desactivar: Con esta opción, puede habilitar o deshabilitar completamente la funcionalidad del módulo de personalización de producto extendida de Prestashop para los clientes.
Mostrar la opción de descargar PDF en el carrito: Puede habilitar o deshabilitar esta opción para descargar la imagen del diseño en formato PDF en la página de pedidos de administración.
Mostrar vista previa del diseño en la factura PDF: Habilite o deshabilite esta opción para mostrar u ocultar la vista previa del diseño en la factura PDF.
Número máximo de diapositivas: Con esta opción, puede establecer el número máximo de lados del producto que se pueden personalizar desde la interfaz.

Fuentes 3.2

En esta sección del módulo de diseño de productos de Prestashop, el propietario de la tienda puede añadir varias fuentes que el cliente puede elegir para imprimir texto con estilo en el producto. La primera interfaz que se muestra a continuación muestra una lista de las fuentes disponibles en la interfaz. Se puede añadir una nueva fuente, modificar o eliminar la existente.

Aquí puedes realizar las otras dos acciones como:

1. Agregar una nueva fuente

Para agregar un nuevo estilo de fuente, siga estos pasos: Haga clic en la pestaña Fuentes y luego en el botón “+” (Agregar fuente) en el panel. Se mostrará la siguiente interfaz.

Activo: Esta opción habilitará o deshabilitará la fuente.
Título de la fuente: Con esta opción, puede configurar el título de la fuente tal como se menciona en Google Font.
Incrustar @import Fuente: Para usar la fuente de Google, debes integrar la clase de fuente de importación. Para ello, debes:
Haga clic en el enlace “Fuentes de Google” que aparece justo debajo de la opción. Se mostrará la siguiente pantalla.
Elija la fuente que desee y haga clic en el botón Agregar “+” para ese estilo de fuente.

Al agregar una fuente, aparecerá una ventana emergente con la familia de fuentes seleccionada. Haga clic en la pestaña “Incrustar” y luego en el botón “Importar”.
Copie la URL @import para esa fuente y péguela en el campo Incrustar fuente @import.

2. Editar una fuente existente

Si desea editar la fuente existente, simplemente haga clic en el botón Editar junto al estilo de fuente. Verá las siguientes opciones:

Activo: Habilitar o deshabilitar el estilo de fuente.
Estilo de fuente: Edite el título de la fuente usando esta opción.
Incrustar @Import Fuente: Modificar la URL de importación para esa fuente en particular.

3.3 Colores

En esta sección de Módulo configurador de productosPuede definir su propia paleta de colores y permitir que sus clientes elijan cualquier color para el producto seleccionado. La siguiente interfaz muestra una lista de colores existentes que puede editar o agregar uno nuevo si es necesario.

1. Agregar un nuevo color

Código de color: con esta opción, elija el color deseado para que se muestre en la página de personalización del producto.
Activo: habilita o deshabilita el color.

2. Editar un color existente

Código de color: con esta opción, elija el color deseado para que se muestre en la página de personalización del producto.
Activo: habilita o deshabilita el color existente.

3.4 Grupos de imágenes

Para un producto seleccionado, el cliente puede seleccionar cualquier imagen predeterminada proporcionada por el propietario de la tienda o cargar una nueva imagen personalizada para personalizar el producto. Las imágenes predeterminadas se han categorizado como grupos de imágenes. Estos grupos de imágenes existentes se pueden editar o incluso se puede agregar un nuevo grupo.

1. Agregar un nuevo grupo de imágenes

Nombre del grupo de imágenes: Puede establecer un nombre deseado para el grupo de imágenes.
Cargar imagen: Puede cargar y configurar una imagen de logotipo para un grupo de imágenes.
Activo: Esta opción habilitará o deshabilitará el grupo de imágenes.

2. Editar un grupo de imágenes existente

Nombre del grupo de imágenes: Puede establecer un nombre deseado para el grupo de imágenes.
Cargar imagen: Puede cargar y configurar una imagen de logotipo para un grupo de imágenes.
Activo: Esta opción habilitará o deshabilitará el grupo de imágenes.

Para ver, agregar o eliminar las imágenes dentro de cualquier grupo de imágenes, haga clic en la opción “Ver imágenes” correspondiente al grupo de imágenes.

Se le mostrará la siguiente interfaz.

Aquí puedes agregar una nueva imagen, eliminar o cambiar las imágenes existentes dentro de un grupo.

4.0 Configuración de personalización para productos del sitio

Las opciones de configuración de fuentes, colores y grupos de imágenes, descritas en las secciones 3.2, 3.3 y 3.4, se aplican a todos los productos del sitio. Estas opciones se denominan “Ajustes globales”. Además, también se pueden configurar a nivel de producto. Estas opciones son específicas del producto que el administrador ha configurado desde el back-office. A continuación, se detallan las opciones de personalización para cada producto. El administrador del sitio puede aplicar estas opciones de forma diferente a cada producto de la tienda. Para configurar las opciones de personalización de cada producto, siga estos pasos: 1. En el panel de administración, vaya a la opción “Catálogo” en la barra de menú izquierda de la interfaz.

2. Haga clic en la opción “Productos” en “Catálogo”.

Verá una lista de productos de la tienda junto con una opción para editarlos o configurarlos. La pantalla de productos de la tienda se muestra a continuación:

Al hacer clic en el botón “Editar” de un producto, encontrará las siguientes opciones de configuración. Seleccione la pestaña “Diseñador/Personalizador de productos”.

Ahora, la configuración completa del diseñador/personalizador de productos se divide en cuatro grupos, a saber:

Configuration
Precios
Texto
Adicionales

Configuración de 4.1

Activar/Desactivar: Esta opción habilitará o deshabilitará el panel de personalización del producto en la página del producto en la interfaz.
Requerido para la personalización del producto: Habilite esta opción si desea exigir la personalización del producto para los clientes.
Tamaño de la imagen de carga: Esta opción establecerá el tamaño máximo para cargar imágenes.
Precio de subir imagen: Esta opción establecerá el precio por cargar una imagen.
Mostrar la opción para descargar PNG: Habilitar o deshabilitar la opción para descargar imágenes PNG.
Permitir cargar imágenes: Habilitar o deshabilitar la opción de carga de imágenes en la página de personalización del producto.
Cambiar el tamaño del texto: Habilite esta opción para permitir el cambio de tamaño del texto.
Rotador de pantalla para el texto: Habilite esta opción para permitir la rotación de texto.
Opción de visualización para código QR: Habilitar o deshabilitar su opción para agregar código QR al producto.
Transparencia de visualización para imágenes: Habilite esta opción para mostrar la opción de transparencia para las imágenes.
Filtros de visualización para imágenes: Con esta opción puedes habilitar o deshabilitar filtros de imagen.
Filtros para imágenes: Seleccione varios filtros que desea mostrar en la interfaz de la página de personalización del producto.

Precios de 4.2

Precio fijo del texto: Esta opción le permite establecer un precio fijo para el texto.
Habilitar costo por personaje: Puedes habilitar esta opción si deseas cobrar un costo por personaje.
Diseño completo Precio fijo: Esta opción permite establecer un precio fijo para el diseño completo. Este precio se suma al coste total de personalización.
Precio del código QR: Puede establecer un precio para el código QR utilizando esta opción.

Texto 4.3

Bloque de texto para mostrar: Puede mostrar u ocultar la opción de bloque de texto en la página de personalización del producto.
Longitud máxima del texto: Usando esta opción, puede establecer una longitud máxima para el texto.
Longitud mínima del texto: Con esta opción, puede establecer una longitud mínima para el texto.
Permitir transparencia del texto: Puede habilitar o deshabilitar esta opción para la transparencia del texto.
Permitir curva de texto: Puede habilitar o deshabilitar esta opción para la curva de texto.

4.4 lados

Habilitar el lado: Con esta opción podrás habilitar o deshabilitar el lateral.
Nombre del lado: Esta opción le permite establecer el nombre del lado.
Imagen lateral: Esta opción le permite subir una imagen que muestre el lateral del producto. Esta configuración es válida para un solo lado del producto. Puede configurarla también para los demás lados.
Nota: Aquí solo puede configurar el número de lados, como se indica en la sección “Configuración” del módulo de personalización del producto. Por ejemplo, si ha establecido el número máximo de lados en 2, solo podrá configurar los lados 1 y 2.

¿Cómo configurar fuentes, colores y grupos de imágenes?

Al cambiar la configuración de personalización de un producto, encontrará opciones para seleccionar diferentes fuentes, colores y grupos de imágenes en la parte superior derecha de la pantalla. Encontrará tres opciones:

1. Configurar fuentes
Todas las fuentes añadidas en la sección 3.2 se listan en esta interfaz. Puede habilitar o deshabilitar cualquier fuente directamente.

2. Configurar colores
Todos los colores añadidos en la sección 3.3 se listan en esta interfaz. Puede activar o desactivar cualquier color directamente.

3. Configurar grupos de imágenes

Todos los grupos de imágenes añadidos en la sección 3.4 se listan en esta interfaz. Puede activar o desactivar cualquier grupo directamente. Al hacer clic en el botón “Ver imágenes”, verá la siguiente pantalla.

5.0 Interfaz frontal de Módulo de diseño de productos personalizados de Prestashop

Una vez instalado y configurado el Diseñador de Productos Online para la tienda, la pestaña de configuración del Diseñador de Productos/Personalizador se muestra en la configuración general de los productos de la tienda. Si desea habilitar o deshabilitar la página de personalización de un producto, simplemente configure los ajustes en el “Catálogo de Productos” del back-office. Cuando el módulo Diseñador de Productos/Personalizador esté habilitado para un producto, este mostrará el botón “Personalizar” en su página de producto, como se muestra a continuación:

Al hacer clic en el botón “Personalizar”, se mostrará una ventana emergente con diversas opciones de diseño y personalización del producto. Puede agregar cualquier color, texto, imagen o código QR según sus necesidades.

Sus clientes pueden realizar cualquier tipo de personalización como: 1.Color

2. Imagen: Los clientes pueden agregar una imagen al producto. Pueden elegir cualquier imagen predeterminada del grupo, subir la suya propia o agregar un código QR.

2a. Elige una imagen

2b. Subir imagen

Supongamos que el cliente agrega la imagen cargada en la parte posterior de la sudadera. 2c. Agregar código QR.

3.Text

Guardar la personalización del producto

De manera similar, el cliente puede aplicar personalizaciones a otros productos de la tienda como tazas y fundas de teléfono.

Página de resumen del carrito de compras para producto personalizado La siguiente imagen de interfaz muestra cómo se muestra el producto personalizado en la página del carrito con diferentes opciones para los clientes después de hacer clic en el botón “Guardar personalización”.

El cliente puede ver la factura de este producto personalizado como se muestra a continuación.

Página de historial de pedidos con factura

Al hacer clic en el botón Detalles, el cliente verá la siguiente pantalla:

Vista de pedidos desde el panel de administración. El administrador puede ver la factura del pedido y toda la configuración de personalización del producto desde el back-office. Los detalles de un pedido se pueden consultar en la sección “Pedidos” del panel de administración.

Al hacer clic en el botón Ver correspondiente a un producto, el administrador puede verificar los detalles completos del pedido del producto personalizado.

Al hacer clic en el botón Ver detalles, el administrador verá los detalles completos del producto personalizado en forma de una pantalla emergente como se muestra a continuación.

El administrador puede hacer clic en la opción “Vista previa” para ver la imagen personalizada agregada al producto que se ve como se muestra a continuación.

Tutorial: Mira la guía en video

Para ayudarle a configurar y utilizar el Módulo de diseño/personalización de productos de PrestaShopHemos preparado un detallado Vídeo tutorial de YouTubeEste vídeo le guía a través de la instalación, configuración y uso del módulo paso a paso.

Mira el tutorial aquí:

Para obtener ayuda adicional, personalizaciones o consultas, comuníquese con nuestro equipo de soporte en:
support@knowband.com