Add-on Prestashop Product Designer/Customizer – Manual do Usuário

1.0 Introdução

Como proprietário de uma loja, você sempre pensou em multiplicar as conversões, mas não na experiência de compra dos seus clientes. Um cliente feliz e satisfeito é aquele que retorna à loja em busca de mais produtos. Portanto, se você deseja fidelizar seus clientes, torne a experiência deles memorável integrando o addon Designer/Customizador de Produtos do Prestashop à sua loja virtual. Com a ajuda do Módulo de design de produto personalizado da PrestashopOs lojistas do PrestaShop podem oferecer opções de personalização de produtos online intuitivas e criativas aos seus clientes, permitindo que eles transformem a versão básica do produto em um design moderno, elegante e exclusivo. O complemento de personalização de produtos do PrestaShop permite que o administrador exiba o painel de personalização quando o usuário clica no botão “Personalizar” na página do produto. Os clientes podem facilmente adicionar textos coloridos com efeitos, fazer upload de imagens com filtros e adicionar um código QR para atender às suas necessidades.

1.1 Recursos impressionantes do complemento de personalização de produtos do Prestashop

Não são necessários conhecimentos técnicos de programação para configurar ou modificar as definições do módulo de Design de Produto Personalizado do Prestashop. Tudo é muito fácil com este módulo. Vamos conferir rapidamente os diferentes recursos oferecidos por este complemento do Prestashop.

• O complemento Designer/Personalizador de Produtos do Prestashop ajuda a oferecer uma ampla gama de produtos personalizáveis ​​em sua loja online. Usando o complemento Designer/Personalizador de Produtos do Prestashop, os clientes podem comprar facilmente e aproveitar os benefícios dos produtos online expandidos, que podem ser personalizados de acordo com suas necessidades.
• O Designer de Produtos Online adiciona uma visualização de design para os produtos, permitindo que os potenciais compradores personalizem o produto em tempo real. O módulo de configurador de produtos permite que o administrador do Prestashop adicione um conjunto diferente de opções de personalização para cada produto na loja.
• Com a integração do módulo de design de produtos do Prestashop, os clientes podem acessar o painel de personalização de qualquer produto que desejem comprar, como camisetas, canecas, anéis ou qualquer outro tipo de produto que possa ser personalizado de acordo com suas necessidades.
• O complemento de personalização de produtos do Prestashop exibe um botão “Personalizar” para cada produto personalizável na loja. O administrador pode habilitar as opções de personalização apenas para os produtos desejados.
• A funcionalidade completa do complemento Designer/Personalizador de Produtos do Prestashop pode ser ativada ou desativada. Quando este módulo está desativado, as opções padrão de personalização do produto são exibidas na página do produto.
• O módulo avançado de personalização de produtos exibe o cálculo do preço da personalização em tempo real na página do produto.
• Com o complemento de design de produto personalizado do Prestashop, o administrador pode definir os lados do design do produto que estarão disponíveis para o usuário.
• O módulo de configuração de produtos permite que o administrador habilite ou desabilite as opções de download de arquivos PDF para os clientes na interface do usuário.
• O módulo de Personalização Avançada de Produtos do Prestashop oferece a opção de adicionar imagens predefinidas a um produto. Essas imagens predefinidas geralmente são agrupadas. Os clientes podem carregar e definir qualquer imagem de sua preferência.
• Com este módulo de design de produtos para Prestashop, o cliente pode usar de forma flexível as fontes, cores e filtros desejados para o produto.
• Este módulo avançado de personalização de produtos permite ao administrador definir preços para diferentes opções de personalização.
• O módulo de personalização de produtos do Prestashop também oferece a opção de personalizar o produto usando um código QR, para o qual o administrador pode definir um preço separado.
• O complemento de design de produto personalizado do Prestashop adiciona automaticamente um preço fixo de design completo ao preço final personalizado de um produto.
• O complemento Prestashop Product Designer/Customizer oferece suporte à compatibilidade com várias lojas e vários idiomas.
• O complemento de designer de produtos personalizados para Prestashop é responsivo para dispositivos móveis e compatível com vários temas do Prestashop.

1.2 Tecnologia para o Desenvolvimento

• Idioma: PHP
• Estrutura: Prestashop

Guia de Instalação 2.0 para o módulo Personalizador Avançado de Produtos

O administrador da loja pode seguir estes passos simples para instalar o complemento de personalização de produtos do Prestashop em sua loja virtual: 1. Primeiro, baixe o pacote do complemento na loja da 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 da sua loja Prestashop através de um gerenciador de FTP (como o Filezilla ou o WinSCP – baixe aqui: https://filezilla-project.org/). Você encontrará os arquivos e pastas conforme mostrado na imagem abaixo:

O complemento de design de produtos personalizados do Prestashop já está instalado e pronto para uso. Agora, o administrador pode configurar as diversas opções de acordo com as necessidades do seu site Prestashop.

3.0 Interface administrativa do módulo de personalização avançada de produtos do Prestashop

Logo após a instalação bem-sucedida de Complemento para Designer / Customizador de Produto Prestashop Em seu site, você pode configurar as definições do painel de personalização de produtos de acordo com suas necessidades. No painel de administração ou dashboard, clique em “Módulos e Serviços” e, em seguida, no botão “Configurar” localizado ao lado de Knowband Product Designer/Customizer.

Aqui, na próxima interface, você encontrará as configurações completas do módulo Designer/Personalizador de Produto, juntamente com suas subseções, conforme listado abaixo.

Este módulo de Personalização de Produtos da Knowband consiste em quatro subseções, que serão discutidas em detalhes a seguir: 1. Configuração; 2. Fontes; 3. Cores; 4. Grupo de Imagens. Cada aba do módulo de Personalização de Produtos Avançado do Prestashop será explicada abaixo:

Configuração 3.1

Nas configurações do complemento de personalização de produtos do Prestashop, você pode realizar as configurações básicas do painel de personalização exibido aos clientes na interface do produto.

• Ativar/Desativar: Com esta opção, você pode ativar ou desativar completamente a funcionalidade do módulo de Personalização Avançada de Produtos do Prestashop para os clientes.
• Exibir a opção de baixar o PDF no carrinho: Você pode ativar ou desativar esta opção para baixar a imagem do projeto em PDF na página de pedidos do administrador.
• Exibir pré-visualização do design no PDF da fatura: Ative ou desative esta opção para exibir ou ocultar a pré-visualização do design no PDF da fatura.
• Número máximo de slides: Com essa opção, você pode definir o número máximo de páginas do produto que podem ser personalizadas na interface do usuário.

Fontes 3.2

Nesta seção do módulo de design de produtos do Prestashop, o proprietário da loja tem a opção de adicionar diversas fontes para que o cliente possa escolher e imprimir um texto estilizado no produto. A primeira interface mostrada abaixo exibe uma lista das fontes disponíveis no front-end. É possível adicionar uma nova fonte, modificar ou excluir uma já existente.

Aqui você pode realizar as outras duas ações da seguinte forma:

1. Adicionando uma nova fonte

Para adicionar um novo estilo de fonte, siga estes passos: Clique na aba Fontes e depois no botão “+” (Adicionar Fonte) no painel administrativo. A interface abaixo será exibida.

• 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 exatamente como está no Google Fonts.
• Incorporar @import Fonte: Para usar a fonte do Google, você precisa incorporar a classe `import Font`. Para isso, você precisa:
• Clique no link “Google Fonts” fornecido logo abaixo da opção. A tela abaixo será exibida.
• Escolha a fonte desejada e clique no botão “+” para adicionar o estilo de fonte escolhido.

• Ao adicionar uma fonte, uma janela pop-up será exibida com a lista da família de fontes selecionada. Clique na aba Incorporar e, em seguida, no botão @Importar.
• Copie o URL de importação da fonte e cole-o no campo “Incorporar fonte de importação”.

2. Editar uma fonte existente

Se você deseja editar a fonte existente, basta clicar no botão Editar localizado ao lado do estilo da fonte. Você verá as seguintes opções:

• Ativo: Ative ou desative o estilo da fonte.
• Estilo de fonte: Edite o título da fonte usando esta opção.
• Incorporar @Importar fonte: Modifique o URL de importação para essa fonte específica.

3.3 Colors

Nesta seção de Módulo de configuração de produtosVocê 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 esta opção, selecione a cor desejada para ser exibida na página de personalização do produto.
• Ativo: Ativa ou desativa a cor.

2. Editar uma cor existente

• Código de cores: Com esta opção, selecione a cor desejada para ser exibida na página de personalização do produto.
• Ativo: Ativa ou desativa a cor existente.

3.4 Grupos de Imagens

Para um produto selecionado, o cliente pode escolher qualquer imagem padrão fornecida pelo proprietário da loja ou pode carregar uma nova imagem personalizada para a customização do produto. As imagens padrão foram categorizadas em grupos de imagens. Esses grupos de imagens existentes podem ser editados ou você pode adicionar um novo grupo de imagens.

1. Adicionando um novo grupo de imagens

• Nome do grupo de imagens: Você pode definir o nome desejado para o grupo de imagens.
• Enviar Imagem: Você pode carregar e definir uma imagem para o logotipo do grupo.
• Ativo: Esta opção irá ativar ou desativar o grupo de imagens.

2. Editar um grupo de imagens existente

• Nome do grupo de imagens: Você pode definir o nome desejado para o grupo de imagens.
• Enviar Imagem: Você pode carregar e definir uma imagem para o logotipo do grupo.
• Ativo: Esta opção irá ativar ou desativar o grupo de imagens.

Para visualizar, adicionar ou excluir imagens dentro de qualquer grupo de imagens, clique na opção “Visualizar imagens” correspondente ao grupo de imagens.

A seguinte interface será exibida.

Aqui, você pode adicionar uma nova imagem, excluir ou alterar as imagens existentes dentro de um grupo.

4.0 Configurações de personalização para produtos do site

As configurações de fontes, cores e grupos de imagens discutidas nas seções 3.2, 3.3 e 3.4 são aplicáveis ​​a todos os produtos do site. Essas configurações podem ser chamadas de configurações globais. Além disso, as configurações também podem ser feitas em nível de produto. Essas configurações são específicas para o produto que o administrador configurou no painel administrativo. Abaixo, descrevemos as configurações de personalização de produtos individuais. O administrador do site pode aplicar essas configurações de forma diferente para qualquer produto na loja. Para configurar as opções de personalização de produtos individuais, siga os passos abaixo: 1. No painel administrativo, acesse a opção “Catálogo” na barra de menu à esquerda da interface.

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 de produtos da loja é mostrada abaixo:

Ao clicar no botão “Editar” de um produto, você encontrará as seguintes configurações. Selecione a aba Designer/Personalizador de Produto.

Agora, as configurações completas do designer/personalizador de produtos estão divididas em quatro grupos, a saber:

• Configuração
• Preços
• Texto
• Sides

Configuração 4.1

• Ativar/Desativar: Esta opção permite ativar ou desativar o painel de personalização do produto na página do produto no front-end.
• Requisitos para a personalização do produto: Ative esta opção se desejar tornar obrigatória a personalização do produto para os clientes.
• Tamanho da imagem a ser enviada: Esta opção define o tamanho máximo para o upload de imagens.
• Preço da imagem carregada: Esta opção definirá o preço para o envio de uma imagem.
• Exibir a opção para baixar PNG: Ative ou desative a opção de baixar imagens PNG.
• Permitir o envio de imagens: Ative ou desative a opção de upload de imagens na página de personalização do produto.
• Redimensionar o texto: Ative esta opção para permitir o redimensionamento do texto.
• Exibir Rotador no texto: Ative esta opção para permitir a rotação do texto.
• Opções de exibição para código QR: Ative ou desative a opção para adicionar código QR ao produto.
• Exibir transparência para imagens: Ative esta opção para exibir a transparência das imagens.
• Filtros de exibição para imagens: Com essa opção, você pode ativar ou desativar os filtros de imagem.
• Filtros para imagens: Selecione vários filtros que deseja exibir na interface do usuário na página de personalização do produto.

Preços 4.2

• Preço fixo do texto: Esta opção permite definir um preço fixo para o texto.
• Habilitar custo por caractere: Você pode habilitar essa opção se quiser cobrar um custo por caractere.
• Projeto completo com preço fixo: Esta opção permite definir um preço fixo para o projeto completo. Este preço é adicionado ao custo total da personalização.
• Preço do código QR: Você pode definir um preço para o código QR usando esta opção.

4.3 Text

• Exibir bloco de texto: Você pode mostrar ou ocultar a opção de bloco de texto na página de personalização do produto.
• Comprimento máximo do texto: Utilizando esta opção, você pode definir um comprimento máximo para o texto.
• Comprimento mínimo do texto: Utilizando esta opção, você pode definir um comprimento mínimo para o texto.
• Permitir transparência do texto: Você pode ativar ou desativar esta opção para transparência do texto.
• Permitir curva de texto: Você pode ativar ou desativar essa opção para a curva de texto.

Lados 4.4

• Ativar a lateral: Com esta opção, você pode ativar ou desativar a lateral.
• Nome do lado: Esta opção permite que você defina o nome da lateral.
• Imagem lateral: Esta opção permite que você carregue uma imagem mostrando a lateral do produto. Essas configurações são para um lado específico do produto. Você pode fazer as mesmas configurações para os outros lados do produto também.
  Nota: Aqui, você só pode configurar o número de lados conforme mencionado nas “configurações” do módulo de personalização do produto. Por exemplo, se você definiu o “número máximo de lados” como 2, só poderá configurar as opções para o lado 1 e o lado 2.

Como configurar fontes, cores e grupos de imagens?

Ao alterar as configurações de personalização de um produto, você encontrará opções para selecionar diferentes fontes, cores e grupos de imagens no canto superior direito da tela. Você encontrará três opções:

1. Configurar fontes
Todas as fontes adicionadas na seção 3.2 estão listadas aqui nesta interface. Você pode ativar ou desativar qualquer fonte diretamente.

2. Configurar cores
Todas as cores adicionadas na seção 3.3 estão listadas aqui nesta interface. Você pode ativar ou desativar qualquer cor diretamente.

3. Configurar grupos de imagens

Todos os grupos de imagens adicionados na seção 3.4 estão listados aqui nesta interface. Você pode ativar ou desativar qualquer grupo de imagens diretamente. Ao clicar no botão “Visualizar Imagens”, você verá a seguinte tela.

5.0 Interface frontal de Módulo de design de produto personalizado do Prestashop

Após a instalação e configuração do Designer de Produtos Online para a loja, a aba de configurações do Designer/Personalizador de Produtos será exibida nas configurações gerais dos produtos da loja. Se desejar ativar ou desativar a página de personalização de um produto, basta configurar as opções do produto em “Catálogo de Produtos” no painel administrativo. Quando o módulo Designer/Personalizador de Produtos estiver ativado para um produto, um botão “Personalizar” será exibido na página do produto, conforme mostrado abaixo:

Ao clicar no botão Personalizar, será exibida uma janela pop-up com diversas opções de design e personalização do produto. O cliente poderá adicionar cores, textos, imagens ou códigos QR personalizados ao produto, de acordo com suas necessidades de compra.

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

2. Imagem: Os clientes podem adicionar uma imagem ao produto. Podem escolher qualquer imagem padrão do grupo de imagens, carregar a sua própria imagem ou adicionar um código QR ao produto.

2a. Escolha uma imagem

2b. Carregar imagem

Vamos supor que o cliente esteja adicionando a imagem enviada na parte de trás do moletom com capuz. 2c. Adicionar código QR

3. Texto

Economizando na personalização do produto

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

Página de resumo do carrinho de compras para produto personalizado. A imagem abaixo mostra como o produto personalizado é exibido na página do carrinho com diferentes opções para os clientes após clicarem no botão “Salvar personalização”.

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

Página de histórico de pedidos com fatura

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

Visualização de Pedidos no Painel de Administração: O administrador pode visualizar a fatura do pedido e todas as configurações referentes à personalização do produto no painel administrativo. Os detalhes de um pedido podem ser visualizados na seção “Pedidos” do Painel de Administração.

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 “Ver detalhes”, o administrador verá as informações completas do produto personalizado em uma janela pop-up, conforme mostrado abaixo.

O administrador pode clicar na opção “Visualizar” para ver a imagem personalizada adicionada ao produto, que ficará semelhante à imagem abaixo.

Tutorial: Assista ao guia em vídeo

Para ajudar você a configurar e usar o Módulo de Designer/Personalizador de Produtos do PrestaShopPreparamos um documento detalhado. Vídeo tutorial do YouTubeEste vídeo mostra passo a passo a instalação, configuração e utilização do módulo.

Veja o tutorial aqui:

Para obter assistência adicional, personalizações ou esclarecer dúvidas, entre em contato com nossa equipe de suporte em:
[email protected]