Prestashop Product Designer / Customizer Addon – Manual do usuário

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

Designer de produto Prestashop / Addon personalizador

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.

Designer de produto Prestashop / Addon personalizador

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.

picture3

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.

picture4Prestashop Product Designer / Customizer Addon

  • 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.

picture5

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.

picture6

  • 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.

picture7

  • 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.

picture8

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.

picture9

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.

picture10

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.

picture11

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.

picture12

1. Adicionando um novo grupo de imagens

picture13

  • 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

picture14

  • 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.

picture15

Você será mostrado a seguinte interface.

picture16

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.

picture17

2.Clique na opção "Produtos" em "Catálogo".

picture18

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:

picture19

Ao clicar no botão "Editar" de um produto, você poderá encontrar as seguintes configurações. Escolha a guia Designer de produto / personalizador.

picture20

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

picture21

  • 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

picture22

  • 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

picture23

  • 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

picture24

  • 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?

picture25

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.

picture26

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.

picture27

3. Configurar grupos de imagens

picture28
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.

picture29

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:

picture30

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.

picture31

Seus clientes podem realizar qualquer tipo de personalização, como: 1.Color

picture32

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.

picture33

2a. Escolha uma imagem

picture34

2b. Enviar Imagem

picture35

Vamos supor que o cliente esteja adicionando a imagem enviada no verso do Hoodie. 2c. Adicionar código QR

picture36

3.Text

picture37

picture38

Salvando Personalização de Produto

picture39

picture40

Da mesma forma, o cliente pode aplicar personalizações a outros produtos da loja, como canecas e capas de telefone.

picture41

picture42

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".

picture43
O cliente pode visualizar a fatura deste produto personalizado, conforme mostrado abaixo.

picture44

picture45
Página do histórico de pedidos com fatura

picture46
Ao clicar no botão Detalhes, o cliente verá a seguinte tela:

picture47

picture48

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.

picture49

Ao clicar no botão Visualizar correspondente a um produto, o administrador pode verificar os detalhes completos do pedido do produto personalizado.

picture50

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.

picture51

picture52

picture53

O administrador pode clicar na opção "Visualizar" para ver a imagem personalizada adicionada ao produto, que fica abaixo.

picture54


Joe Parker

We boast of the best in the industry plugins for eCommerce systems and has years of experience working with eCommerce websites. We provide best plugins for platforms like - Magento, Prestashop, OpenCart and Shopify . We also provide custom module development and customization services for the website and modules..

Leave a Reply

Your email address will not be published. Required fields are marked *