1.0 Introdução
Como proprietário de uma loja, você sempre pensou em multiplicar suas conversões de loja, mas não sobre a experiência de compra de seus clientes. Um cliente feliz e satisfeito é aquele que retorna à loja em busca de mais itens. Portanto, se você quiser devolver os clientes em sua loja, faça a experiência do cliente durar para sempre integrando o add-on Prestashop Product Designer / Customizer em sua loja de comércio eletrônico. Com a ajuda do módulo Prestashop Custom Product Design, os comerciantes das lojas podem oferecer opções de personalização de produtos on-line intuitivas e criativas para seus clientes, para que possam transformar a versão básica do produto em um design moderno, elegante e exclusivo. O addon de personalização do produto Prestashop permite que o administrador mostre a página do painel de personalização do produto enquanto o usuário clica no botão Personalizar na página do produto. Os clientes podem facilmente adicionar textos coloridos ricos com efeitos, carregar suas imagens com filtros, adicionar um código QR para torná-lo adequado às suas necessidades.
1.1 Características impressionantes do addon de personalização de produto Prestashop
Nenhum técnico de codificação é necessário para configurar ou modificar as configurações do módulo Prestashop Custom Product Design. Tudo vem fácil com este módulo. Vamos verificar rapidamente os diferentes recursos oferecidos por este addon Prestashop.
- O PrestonS Product Designer / Customizer addon ajuda a oferecer uma ampla gama de produtos personalizáveis em sua loja on-line. Usando o addon de designer de produto personalizado Prestashop, os clientes podem facilmente comprar e aproveitar os benefícios dos produtos on-line estendidos, que podem ser personalizados de acordo com suas necessidades.
- O Online Product Designer adiciona uma visualização de designer para produtos, para que os compradores em potencial tenham a oportunidade de personalizar o produto em tempo real. O módulo de configuração de produto permite que o administrador do Prestashop adicione um conjunto diferente de opções de personalização para cada produto diferente na loja.
- Com a integração do módulo de design de produto Prestashop, os clientes podem acessar o painel de personalização do produto com qualquer produto que desejarem comprar, como camisetas, canecas, anéis ou qualquer outro tipo de produto que possa ser personalizado de acordo com suas necessidades.
- O addon da personalização do produto de Prestashop mostra um botão da personalização para cada produto customizável na loja. O administrador pode ativar as opções de personalização apenas para os produtos desejados.
- A funcionalidade completa do addon Prestashop Product Designer / Customizer pode ser ativada ou desativada. Quando este módulo está desativado, as opções padrão de personalização do produto são mostradas na página do produto.
- O módulo personalizador de produto avançado mostra o cálculo do preço de personalização em tempo real na página do produto.
- Com o addon de designer de produto personalizado Prestashop, o administrador pode definir os lados do design do produto que estão disponíveis para o usuário.
- O módulo configurador de produto permite que o administrador ative ou desative as opções de download de arquivos PDF para os clientes no frontend.
- O módulo Prestashop Extended Product Customization oferece uma opção para adicionar imagens pré-definidas para um produto. As imagens pré-definidas são geralmente definidas em grupos. Os clientes podem fazer upload e definir qualquer imagem própria.
- O cliente pode usar de forma flexível fontes, cores e filtros desejados para o produto usando este módulo de design de produto Prestashop.
- Esse módulo personalizador de produto avançado permite que o administrador defina preços para diferentes opções de personalização.
- O módulo de personalização do produto Prestashop também oferece a opção de personalizar o produto usando o código QR, para o qual o administrador pode definir um preço separado.
- O addon de designer de produto personalizado Prestashop adiciona automaticamente um Preço fixo de projeto completo ao preço final personalizado de um produto.
- O addon Prestashop Product Designer / Customizer suporta compatibilidade com vários armazenamentos e multilíngües.
- O addon de designer de produto personalizado Prestashop é responsivo e compatível com diversos temas do Prestashop.
Tecnologia 1.2 para Desenvolvimento
- Língua: PHP
- Estrutura: Prestashop
Guia de Instalação do 2.0 para o módulo Advanced Product Customizer
O administrador da loja pode seguir estas etapas simples para instalar o addon de personalização do produto Prestashop em sua loja de comércio eletrônico: 1. Em primeiro lugar, baixe o pacote addon da loja Knowband. 2. Você receberá um arquivo compactado contendo o código-fonte e o manual do usuário. Descompacte o pacote completo no diretório raiz do seu armazenamento Prestashop através do gerenciador FTP (como o Filezilla ou o WinSCP
O addon de designer de produtos personalizados Prestashop está agora instalado e pronto para uso. Agora o administrador pode configurar as várias configurações de acordo com o site Prestashop.
3.0 Admin Interface do módulo Prestashop Advanced Product Customizer
Logo após a instalação bem-sucedida do addon Prestashop Product Designer / Customizer em seu site, você pode definir as configurações do painel de personalização do produto conforme suas necessidades. No painel de administração ou no painel de controle, clique em "Módulos e serviços" e, em seguida, no botão "Configurar" fornecido ao lado de Designer / personalizador de produto da Knowband.
Aqui, na próxima interface, você encontrará as configurações completas do módulo Designer de produto / personalizador juntamente com suas subseções, conforme listado abaixo.
Este módulo de Personalização de Produtos Knowband consiste em quatro subseções que foram discutidas mais adiante. 1.Configuration 2.Fonts 3.Colors 4.Image Group Cada Guia do módulo Prestashop Extended Product Customization foi discutido abaixo:
Configuração 3.1
Sob as configurações do addon de personalização do produto Prestashop, você pode executar as configurações básicas do painel de personalização mostradas no frontend para os clientes.
- Habilitar desabilitar: Com essa opção, você pode ativar ou desativar completamente a funcionalidade do módulo Prestashop Extended Product Customization para clientes.
- Exibe a opção de baixar o PDF no carrinho: Você pode ativar ou desativar esta opção para baixar a imagem de desenho em PDF na página de ordem do administrador.
- Mostrar visualização do design na fatura PDF: Ative ou desative esta opção para exibir ou ocultar a visualização do design no PDF da fatura.
- Número máximo de slides: Usando essa opção, você pode definir o número máximo de lados do produto que podem ser personalizados no frontend.
Fontes 3.2
Sob esta seção do módulo de designer de produto Prestashop, o dono da loja tem a opção de adicionar várias fontes que o cliente pode escolher para imprimir um texto estilizado no produto. A primeira interface mostrada abaixo mostra uma lista de fontes existentes que estão disponíveis no frontend. Uma nova fonte pode ser adicionada ou a fonte existente pode ser modificada ou excluída.
Aqui você pode executar as outras duas ações como:
1. Adicionando uma nova fonte
Para adicionar um novo estilo de fonte, execute as seguintes etapas: Clique na guia Fontes e, em seguida, no botão "+" (Adicionar Fonte) no painel de back-end. Você será mostrado a interface abaixo.
- Ativo: Esta opção irá ativar ou desativar a fonte.
- Título da fonte: Usando essa opção, você pode definir o título da fonte como mencionado na fonte do Google.
- Incorporar @import Font: Para usar a fonte do Google, você precisa incorporar a classe Font de importação. Para isso, você precisa:
- Clique no link "Google Fonts" fornecido logo abaixo da opção. A tela abaixo será mostrada para você.
- Escolha qualquer fonte desejada e clique no botão Adicionar "+" para esse estilo de fonte.
- Ao adicionar uma fonte, você será mostrado um pop-up que irá listar a família de fontes que você selecionou. Clique na aba Embed e, em seguida, no botão @Import.
- Copie o URL @import para essa fonte e cole-a no campo Embed @import Font.
2. Editar uma fonte existente
Se você quiser editar a fonte existente, basta clicar no botão Editar dado ao lado do estilo da fonte. Você verá as seguintes opções:
- Ativo: Ativar ou desativar o estilo da fonte.
- Estilo de fonte: Edite o título da fonte usando esta opção.
- Coloque @Import Font: Modifique o URL de importação para essa fonte específica.
3.3 Colors
Nesta seção do módulo configurador de produtos, você pode definir sua própria paleta de cores e permitir que seus clientes escolham qualquer cor para o produto selecionado. A interface a seguir mostra uma lista de cores existentes que podem ser editadas ou você pode adicionar uma nova cor, se necessário.
1. Adicionando uma nova cor
- Código de cores: com essa opção, escolha uma cor desejada para ser mostrada na página de personalização do produto.
- Ativo: ative ou desative a cor.
2. Editar uma cor existente
- Código de cores: com essa opção, escolha uma cor desejada para ser mostrada na página de personalização do produto.
- Ativo: ative ou desative a cor existente.
Grupos de imagens 3.4
Para um produto selecionado, o cliente pode selecionar qualquer imagem padrão fornecida pelo proprietário da loja ou fazer upload de uma nova imagem personalizada para a personalização do produto. As imagens padrão foram categorizadas como grupos de imagens. Esses grupos de imagens existentes podem ser editados ou você pode até adicionar um novo grupo de imagens.
1. Adicionando um novo grupo de imagens
- Nome do grupo de imagem: Você pode definir um nome desejado para o grupo de imagens.
- Enviar Imagem: Você pode fazer upload e definir uma imagem do logotipo do grupo de imagens.
- Ativo: Esta opção irá ativar ou desativar o grupo de imagens.
2. Editar um grupo de imagens existente
- Nome do grupo de imagem: Você pode definir um nome desejado para o grupo de imagens.
- Enviar Imagem: Você pode fazer upload e definir uma imagem do logotipo do grupo de imagens.
- Ativo: Esta opção irá ativar ou desativar o grupo de imagens.
Para visualizar, adicionar ou excluir as imagens dentro de qualquer grupo de imagens, clique na opção "Visualizar imagens" correspondente ao grupo de imagens.
Você será mostrado a seguinte interface.
Aqui, você pode adicionar uma nova imagem, excluir ou alterar as imagens existentes em um grupo.
Configurações de personalização 4.0 para produtos do site
As definições de configuração para fontes, cores, grupos de imagens discutidos na seção 3.2, 3.3. E o 3.4 é aplicável a todos os produtos do site. Essas configurações podem ser chamadas de configurações globais. Fora isso, as configurações também podem ser feitas em um nível de produto. Essas configurações são específicas do produto que o administrador configurou no back-office. Abaixo, discutimos as configurações de personalização de produtos individuais. O administrador do site pode aplicar essas configurações de maneira diferente para qualquer produto na loja. Para definir as configurações de personalização do produto para produtos individuais, siga as etapas listadas: 1.No painel de administração, vá para a opção "Catálogo" na Barra de Menus da interface da esquerda.
2.Clique na opção "Produtos" em "Catálogo".
Você verá uma lista de produtos da loja, juntamente com uma opção para editar ou configurar o produto. A tela para produtos da loja foi mostrada abaixo:
Ao clicar no botão "Editar" de um produto, você poderá encontrar as seguintes configurações. Escolha a guia Designer de produto / personalizador.
Agora, as configurações completas de designer / personalizador de produto são divididas em quatro grupos, a saber:
- Configuration
- Preço
- Texto
- Sides
Configuração 4.1
- Habilitar desabilitar: Essa opção ativará ou desativará o painel de personalização do produto na página do produto no frontend.
- Obrigatório para personalização de produtos: Ative esta opção se você quiser exigir a personalização do produto para os clientes.
- Carregar Tamanho da Imagem: Esta opção definirá o tamanho máximo para o upload da imagem.
- Upload Image Price: Esta opção irá definir o preço para o upload de uma imagem.
- Exibe a opção de baixar o PNG: Ativar ou desativar a opção de baixar a imagem PNG.
- Permitir upload de imagem: Ativar ou desativar a opção de upload de imagem na página do customizador de produto.
- Redimensione o texto: Ative esta opção para permitir o redimensionamento de texto.
- Exibir rotador para o texto: Ative esta opção para permitir a rotação de texto.
- Opção de exibição para QR Code: Ativar ou desativar sua opção para adicionar o código QR no produto.
- Exibir transparência para imagens: Ative esta opção para exibir a opção de transparência para imagens.
- Exibir filtros para imagens: Com esta opção, você pode ativar ou desativar filtros de imagem.
- Filtros para Imagens: Selecione vários filtros que você deseja exibir no frontend na página de personalização do produto.
Preços 4.2
- Preço fixo de texto: Esta opção permite que você defina um preço fixo para o texto.
- Ativar custo por personagem: Você pode ativar essa opção se quiser cobrar o custo por personagem.
- Preço fixo do projeto completo: Esta opção permite que você defina um preço fixo para o design completo. Este preço é adicionado ao custo total de personalização.
- QR Code Preço: Você pode definir um preço para o código QR usando essa opção.
4.3 Text
- Bloco de texto de exibição: Você pode mostrar ou ocultar a opção de bloqueio de texto na página de personalização do produto.
- Comprimento máximo do texto: Usando essa opção, você pode definir um tamanho máximo para o texto.
- Comprimento Mínimo do Texto: Usando essa opção, você pode definir um tamanho mínimo para o texto.
- Permitir transparência de texto: Você pode ativar ou desativar essa opção para transparência de texto.
- Permitir curva de texto: Você pode ativar ou desativar essa opção para a curva de texto.
Lados 4.4
- Ativar o lado: Com esta opção, você pode ativar ou desativar o lado.
- Nome do lado: Esta opção permite definir o nome do lado.
- Imagem lateral: Esta opção permite que você envie uma imagem mostrando o lado do produto. Essas configurações são para um lado de um produto. Você pode fazer as mesmas configurações para os outros lados de um produto também.
Observação: Aqui, você só pode definir as configurações do número de lados conforme mencionado nas "configurações" do módulo personalizador de produto. Por exemplo, se você tiver definido o "número máximo de lados" como 2, você só poderá definir as configurações para o lado 1 e o lado 2.
Como configurar fontes, cores e grupos de imagens?
Enquanto você está alterando as configurações de personalização de um produto, você encontrará as opções para selecionar diferentes fontes, cores, grupos de imagens no canto superior direito da tela. Você encontrará três opções como:
1. Configurar fontes
Todas as fontes que foram adicionadas na seção 3.2 estão listadas aqui nesta interface. Você pode ativar ou desativar diretamente qualquer fonte.
2. Configurar cores
Todas as cores que foram adicionadas na seção 3.3 estão listadas aqui nesta interface. Você pode ativar ou desativar diretamente qualquer cor.
3. Configurar grupos de imagens
Todos os grupos de imagens que foram adicionados na seção 3.4 estão listados aqui nesta interface. Você pode ativar ou desativar diretamente qualquer grupo de imagens. Ao clicar no botão "Visualizar imagens", você verá a tela a seguir.
5.0 Interface Frontal do Módulo de Design de Produto Personalizado Prestashop
Depois que o Online Product Designer for instalado e configurado para a loja, a guia de configurações do Product Designer / Customizer será mostrada nas configurações gerais dos produtos da loja. Se você quiser ativar ou desativar a página de personalização do produto para um produto, basta configurar as configurações do produto no "Catálogo de produtos" no back-office. Quando o módulo Designer de produto / personalizador está ativado para um produto, ele mostrará um botão "Personalizar" na página do produto, conforme mostrado abaixo:
Ao clicar no botão Personalizar, o cliente mostrará uma tela pop-up que consistirá em várias configurações de design e personalização do produto. Os clientes podem adicionar qualquer cor, texto personalizado, imagem personalizada ou código QR para um produto de acordo com suas necessidades de compras.
Seus clientes podem realizar qualquer tipo de personalização, como: 1.Color
2.Image Os clientes podem adicionar uma imagem ao produto. Eles podem escolher qualquer imagem padrão do grupo de imagens ou podem fazer upload de sua própria imagem ou adicionar um código QR ao produto.
2a. Escolha uma imagem
2b. Enviar Imagem
Vamos supor que o cliente esteja adicionando a imagem enviada no verso do Hoodie. 2c. Adicionar código QR
3.Text
Salvando Personalização de Produto
Da mesma forma, o cliente pode aplicar personalizações a outros produtos da loja, como canecas e capas de telefone.
Página de resumo do carrinho de compras para produtos personalizados A imagem de frontend abaixo mostra como o produto personalizado é exibido na página do carrinho com opções diferentes para os clientes depois de clicar no botão "Salvar personalização".
O cliente pode visualizar a fatura deste produto personalizado, conforme mostrado abaixo.
Página do histórico de pedidos com fatura
Ao clicar no botão Detalhes, o cliente verá a seguinte tela:
Visualização do pedido do painel de administração O administrador pode visualizar a fatura do pedido e toda a configuração relacionada à personalização do produto no back-office. Os detalhes de um pedido podem ser visualizados na seção Pedidos do Painel do administrador.
Ao clicar no botão Visualizar correspondente a um produto, o administrador pode verificar os detalhes completos do pedido do produto personalizado.
Ao clicar no botão Visualizar detalhes, o administrador verá os detalhes completos do produto personalizado na forma de uma tela pop-up, conforme mostrado abaixo.
O administrador pode clicar na opção "Visualizar" para ver a imagem personalizada adicionada ao produto, que fica abaixo.
