1.0 Introducción
Como propietario de una tienda, siempre ha pensado en multiplicar las conversiones de su tienda, pero no en la experiencia de compra de sus clientes. Un cliente feliz y satisfecho es el que regresa a la tienda en busca de algunos artículos más. Entonces, si desea que los clientes regresen a su tienda, haga que la experiencia del cliente dure para siempre integrando el complemento Prestashop Product Designer / Customizer en su tienda de comercio electrónico. Con la ayuda del módulo Prestashop Custom Product Design, los comerciantes de la tienda pueden ofrecer a sus clientes opciones de personalización del producto en línea intuitivas y creativas para que puedan convertir la versión básica del producto en un diseño moderno, elegante y único. El complemento de personalización del producto Prestashop permite que el administrador muestre la página del panel de personalización del producto mientras el usuario hace clic sobre el botón Personalizar en la página del producto. Los clientes pueden agregar fácilmente textos ricos en colores con efectos, cargar sus imágenes con filtros, agregar un código QR para que sea adecuado para sus necesidades.
1.1 Striking Features of Prestashop Product Customization Addon
No se requieren tecnicismos de codificación para configurar o modificar las configuraciones del módulo de diseño de producto personalizado de Prestashop. Todo viene fácil con este módulo. Permite comprobar rápidamente las diferentes características que ofrece este complemento Prestashop.
- El complemento Prestashop Product Designer / Customizer ayuda a ofrecer una amplia gama de productos personalizables en su tienda en línea. Al utilizar el complemento de diseñador de productos personalizados Prestashop, los clientes pueden comprar y aprovechar los beneficios de los productos en línea extendidos que pueden personalizarse según sus necesidades.
- El Diseñador de productos en línea agrega una vista de diseñador para los productos para que los compradores potenciales tengan la oportunidad de personalizar el producto en tiempo real. El módulo configurador de productos le permite a Prestashop admin agregar un conjunto diferente de opciones de personalización para cada producto diferente en la tienda.
- Con la integración del módulo del diseñador de productos Prestashop, los clientes pueden acceder al panel de personalización del producto con cualquier producto que deseen comprar, como camisetas, tazas, anillos o cualquier otro tipo de producto que se pueda personalizar según sus necesidades.
- El complemento de personalización de productos Prestashop muestra un botón Personalizar para cada producto personalizable en la tienda. El administrador puede habilitar las opciones de personalización solo para los productos deseados.
- La funcionalidad completa de Prestashop Product Designer / Customizer addon se puede habilitar o deshabilitar. Cuando este módulo está deshabilitado, las opciones de personalización estándar del producto se muestran en la página del producto.
- El módulo avanzado de personalización del producto 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 producto personalizado Prestashop, el administrador puede configurar los lados del diseño del producto que están disponibles para el usuario.
- El módulo del configurador de productos permite a los administradores habilitar o deshabilitar las opciones de descarga de archivos PDF para los clientes en la interfaz.
- El módulo de personalización ampliada del producto de Prestashop ofrece una opción para agregar imágenes predefinidas para un producto. Las imágenes predefinidas se definen generalmente en grupos. Los clientes pueden subir y configurar cualquier imagen propia.
- El cliente puede utilizar de manera flexible las fuentes, colores y filtros deseados para el producto utilizando este módulo de diseñador de producto Prestashop.
- Este módulo de personalizador de productos avanzado permite a los administradores definir los precios para diferentes opciones de personalización.
- El módulo de personalización del producto Prestashop también ofrece la opción de personalizar el producto utilizando un código QR para el cual el administrador puede definir un precio separado.
- El complemento de diseño de producto personalizado de Prestashop agrega automáticamente un Precio fijo de diseño completo al precio final personalizado de un producto.
- El complemento Prestashop Product Designer / Customizer es compatible con múltiples tiendas y con múltiples idiomas.
- El complemento de diseño personalizado del producto Prestashop es móvil y compatible con varios temas de Prestashop.
Tecnología 1.2 para el Desarrollo
- Idioma: PHP
- Marco de referencia: Prestashop
Guía de instalación de 2.0 para el módulo Advanced Product Customizer
El administrador de la tienda puede seguir estos sencillos pasos para instalar el complemento de personalización del producto Prestashop en su tienda de comercio electrónico: 1. En primer lugar, descargue el paquete adicional de la tienda Knowband. 2. Obtendrá un archivo comprimido que contiene el código fuente y el manual del usuario. Descomprima el paquete completo en el directorio raíz de su tienda Prestashop a través del administrador de FTP (como Filezilla o WinSCP).
El complemento de diseño de producto personalizado Prestashop ahora está instalado y listo para su uso. Ahora el administrador puede configurar los distintos ajustes de configuración de acuerdo con su sitio Prestashop.
Interfaz de administración 3.0 del módulo Prestashop Advanced Product Customizer Customizer
Justo después de la instalación exitosa del complemento Prestashop Product Designer / Customizer en su sitio web, puede configurar los ajustes del panel de personalización del producto según sus necesidades. En el panel de administración o panel de control, haga clic en "Módulos y servicios" y luego en el botón "Configurar" que se encuentra al lado de Knowband Product Designer / Customizer.
Aquí, en la siguiente interfaz, encontrará la configuración completa del módulo Diseñador de productos / Personalizador junto con las subsecciones que se enumeran a continuación.
Este módulo de personalización de productos de Knowband consta de cuatro subsecciones que se han tratado más a fondo. 1.Configuration 2.Fonts 3.Colors 4.Image Group Cada pestaña del módulo Prestashop Custom Customization Module se ha tratado a continuación:
Configuración de 3.1
Bajo los ajustes de configuración del complemento de personalización del producto Prestashop, puede realizar los ajustes básicos para el panel de personalización que se muestra en la interfaz a los clientes.
- Habilitar deshabilitar: Con esta opción, puede habilitar o deshabilitar completamente la funcionalidad del módulo Prestashop Extended Customization Customization para clientes.
- Mostrar la opción para descargar PDF en el carrito: Puede habilitar o deshabilitar esta opción para descargar la imagen de diseño en PDF en la Página de pedido de administrador.
- Mostrar vista previa de diseño en 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 tienen permitido la personalización desde el frontend.
Fuentes 3.2
Bajo esta sección del módulo del diseñador de productos Prestashop, el propietario de la tienda tiene la opción de agregar varias fuentes que el cliente puede elegir para imprimir un texto con estilo en el producto. La primera interfaz que se muestra a continuación muestra una lista de las fuentes existentes que están disponibles en el frontend. Se puede agregar una nueva fuente o se puede modificar o eliminar la fuente existente.
Aquí puedes realizar las otras dos acciones como:
1. Añadiendo una nueva fuente
Para agregar un nuevo estilo de fuente, realice los siguientes pasos: Haga clic en la pestaña Fuentes y luego en el botón "+" (Agregar fuente) en el panel de fondo. Aparecerá la siguiente interfaz.
- Activo: Esta opción habilitará o inhabilitará la fuente.
- Título de la fuente: Con esta opción, puede configurar el título de la fuente como se menciona en Google Font.
- Insertar fuente @import: Para poder utilizar la fuente de Google, debe incrustar la clase de fuente de importación. Para esto, tienes que:
- Haga clic en el enlace "Fuentes de Google" que se encuentra justo debajo de la opción. Se le 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, se le mostrará una ventana emergente que le mostrará la familia de fuentes que ha seleccionado. 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 Insertar fuente @import.
2. Editar una fuente existente
Si desea editar la fuente existente, simplemente haga clic en el botón Editar que aparece junto al estilo de fuente. Verás 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 fuente @Import: Modificar la URL de importación para esa fuente en particular.
3.3 Colores
En esta sección del módulo Configurador de productos, puede definir su propia paleta de colores y permitir a sus clientes elegir cualquier color para el producto seleccionado. La siguiente interfaz le muestra una lista de los colores existentes que se pueden editar o puede agregar un nuevo color si es necesario.
1. Añadiendo un nuevo color.
- Código de color: con esta opción, elija el color que desea que se muestre en la página de personalización del producto.
- Activo: activa o desactiva el color.
2. Editar un color existente
- Código de color: con esta opción, elija el color que desea que se muestre en la página de personalización del producto.
- Activo: activa o desactiva el color existente.
Grupos de imágenes 3.4
Para un producto seleccionado, el cliente puede seleccionar las imágenes predeterminadas proporcionadas por el propietario de la tienda o pueden cargar una nueva imagen personalizada para la personalización del producto. Las imágenes por defecto se han categorizado como grupos de imágenes. Estos grupos de imágenes existentes pueden editarse o incluso puede agregar un nuevo grupo de imágenes.
1. Añadiendo 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: Puedes subir y configurar una imagen de logo de grupo de imágenes.
- Activo: Esta opción habilitará o inhabilitará 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: Puedes subir y configurar una imagen de logo de grupo de imágenes.
- Activo: Esta opción habilitará o inhabilitará 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.
Aparecerá la siguiente interfaz.
Aquí, puede agregar una nueva imagen, eliminar o cambiar las imágenes existentes dentro de un grupo.
Configuración de personalización de 4.0 para productos del sitio
Los ajustes de configuración para fuentes, colores, grupos de imágenes se describen en la sección 3.2, 3.3. Y 3.4 es aplicable para todos los productos del sitio. Estas configuraciones pueden ser referidas como configuraciones globales. Aparte de esto, la configuración también se puede realizar a nivel de producto. Estas configuraciones son específicas del producto que el administrador ha configurado desde el back-office. A continuación se analizan los ajustes de personalización del producto para productos individuales. El administrador del sitio puede aplicar estas configuraciones de manera diferente para cualquier producto en la tienda. Para configurar las opciones de personalización del producto para productos individuales, siga los pasos enumerados: 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 editar o configurar el producto. La pantalla para los productos de la tienda se muestra a continuación:
Al hacer clic en el botón "Editar" de un producto, encontrará los siguientes ajustes de configuración. Seleccione la pestaña Product Designer / Customizer.
Ahora, la configuración completa del diseñador / personalizador del producto se divide en cuatro grupos, a saber:
- Configuración
- Precios
- Texto
- Sides
Configuración de 4.1
- Habilitar deshabilitar: Esta opción habilitará o inhabilitará 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.
- Cargar tamaño de imagen: Esta opción establecerá el tamaño máximo para la carga de la imagen.
- Subir imagen precio: Esta opción establecerá el precio para subir una imagen.
- Muestra la opción para descargar PNG: Habilitar o deshabilitar la opción para descargar la imagen PNG.
- Permitir subir la imagen: Active o desactive la opción de carga de imágenes en la página del personalizador de productos.
- Redimensionar el texto: Habilite esta opción para permitir el cambio de tamaño del texto.
- Mostrar Rotator al texto: Habilite esta opción para permitir la rotación de texto.
- Opción de visualización para el código QR: Habilite o deshabilite su opción para agregar código QR en el producto.
- Transparencia de la pantalla para las 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, puede activar o desactivar los filtros de imagen.
- Filtros para Imágenes: Seleccione los múltiples filtros que desea mostrar en el frontend en la página de personalización del producto.
Precios de 4.2
- Precio fijo de texto: Esta opción le permite establecer un precio fijo para el texto.
- Habilitar costo por personaje: Puede habilitar esta opción si desea cobrar el costo por personaje.
- Precio fijo de diseño completo: Esta opción le permite establecer un precio fijo para el diseño completo. Este precio se añade al costo total de personalización.
- Código QR Precio: Puede establecer un precio para el código QR utilizando esta opción.
Texto 4.3
- Mostrar bloque de texto: 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: Con 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 la 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, puede habilitar o deshabilitar el lado.
- Nombre de lado Esta opción le permite establecer el nombre para el lado.
- Imagen lateral: Esta opción le permite subir una imagen que muestra el lado del producto. Estas configuraciones son para un lado de un producto. También puede hacer la misma configuración para otros lados de un producto.
Aviso: Aquí, solo puede configurar los ajustes del número de lados como se menciona en los "ajustes de configuración" del módulo de personalización del producto. Por ejemplo, si ha establecido el recuento de "número máximo de lados" como 2, solo puede configurar los ajustes para el lado 1 y el lado 2.
¿Cómo configurar fuentes, colores y grupos de imágenes?
Mientras cambia la configuración de personalización de un producto, encontrará las opciones para seleccionar diferentes fuentes, colores, grupos de imágenes en la parte superior derecha de la pantalla. Encontrarás tres opciones como:
1. Configurar fuentes
Todas las fuentes que se han agregado en la sección 3.2 se enumeran aquí en esta interfaz. Puedes habilitar o deshabilitar directamente cualquier fuente.
2. Configurar colores
Todos los colores que se han agregado en la sección 3.3 se enumeran aquí en esta interfaz. Puedes habilitar o deshabilitar directamente cualquier color.
3. Configurar grupos de imágenes
Todos los grupos de imágenes que se han agregado en la sección 3.4 se enumeran aquí en esta interfaz. Puede habilitar o deshabilitar directamente cualquier grupo de imágenes. Al hacer clic en el botón "Ver imágenes", verá la siguiente pantalla.
Interfaz frontal 5.0 del módulo de diseño de producto personalizado Prestashop
Una vez que el Diseñador de productos en línea se haya instalado y configurado 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 del producto para un producto, simplemente puede configurar los ajustes del producto en el "Catálogo de productos" en la oficina administrativa. Cuando el módulo del Diseñador de productos / Personalizador está habilitado para un producto, mostrará un botón "Personalizar" en su página de producto como se muestra a continuación:
Al hacer clic en el botón Personalizar, al cliente se le mostrará una ventana emergente que consta de varias configuraciones de diseño y personalización del producto. Los clientes pueden agregar cualquier color, texto personalizado, imagen personalizada o código QR para un producto según sus necesidades de compra.
Sus clientes pueden realizar cualquier tipo de personalización como: 1.Color
2.Image Los clientes pueden agregar una imagen al producto. Pueden elegir cualquier imagen predeterminada del grupo de imágenes o pueden cargar su propia imagen o pueden agregar un código QR al producto.
2a. Elige una imagen
2b. Cargar imagen
Supongamos que el cliente está agregando la imagen cargada en la parte posterior de Hoodie. 2c. Añadir código QR
3.Text
Ahorro de personalización del producto
Del mismo modo, el cliente puede aplicar personalizaciones a otros productos de la tienda, como fundas para tazas y teléfonos.
Página de resumen del carrito de compras para productos personalizados La siguiente imagen de frente 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 del pedido desde el panel de administración El administrador puede ver la factura del pedido y toda la configuración relacionada con la personalización del producto desde el back-office. Los detalles de un pedido se pueden ver 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 a continuación.
