Shopify features and tools
Adding Contact Form to a Shopify Product Page for FREE. No API, No APP - Made4uo - Great Gift Deals

Adicionando formulário de contato do Shopify à página do produto

Log in or Sign up to ensure access to FREE code across multiple devices.

Tenho procurado uma maneira de fazer com que os clientes entrem em contato comigo quando tiverem dúvidas sobre o produto. Não é necessário nenhum APP, nem API ou assinatura. O formulário de contato incluirá o título do produto, o SKU do produto, o nome do cliente, o e-mail do cliente e, claro, a mensagem.

Utilizei EmailJS para realizar o envio de email utilizando a conta Gmail. Portanto, é necessária uma conta do Gmail. EmailJS tem 200 emails grátis/mês. Consulte preços do Emailjs.

Isso é compatível com temas do Shopify, como Debut, Supply e Simple . Ainda não experimentei outros temas.

Verifique nosso formulário de contato GRATUITO atualizado do Shopify .

Pré-requisito:

  • Conta do Gmail
  • Conta EmailJS

Você não precisa de nenhuma experiência em codificação para concluir isso. Basta seguir 8 etapas simples abaixo.

Para iniciar:

1. Primeiro, precisamos do ID do serviço, ID do modelo e ID do usuário do EmailJS. Siga este link para configurar seu EmailJS.
2. Vá para Shopify -> Loja Online -> Temas -> Ações -> então Editar Código.
3. Crie um snippet e nomeie-o como "product-modal-contact-form", na pasta Snippet
4. Cole o CÓDIGO abaixo.

5. Você precisa alterar o código destacado e editar os itens em negrito para o nome da sua loja e clicar em SALVAR.
6. Vá para a pasta Section e abra o arquivo product-template-liquid. Encontre o código abaixo, geralmente na linha 242.



7. Após o código acima, cole o código abaixo.


8. Seu código deve ser semelhante ao abaixo


Você pode experimentá-lo agora em seu site. Você pode ver a cota disponível na parte superior do painel EmailJS. Por favor, não hesite em entrar em contato comigo se tiver dúvidas.

Atualização 29/09/21. Corrigir o problema de tamanho do botão e o botão do PayPal exibido ao abrir o formulário

Copied!

Lutando com instruções?

Não se preocupe, nós oferecemos cobertura por um preço razoável. Entre em contato conosco através de "Converse conosco" para obter um orçamento.

Relaxe enquanto nós cuidamos disso para você!

Voltar para o blogue

5 comentários

Hi @Terry Marie,

You should see the z-index property in the step#4 code

Made4Uo

How do I increase the z-index property for my popup in my styles? I have other icons/boxes overlapping the questions popup box. That is what Emailjs support suggested I try. Any feedback? Thank you!

Terry Marie

Hello testing :)

Terry Marie

Hi. I’m sorry if your facing this issue. This is how you delete it.

1. In your online store. Go to themes.
2. Go to the theme you have emailJS.
3. Click Actions, then edit code
4. At the right side of your screen, you will see the theme folders. Find the product-template-liquid.
5. Open the folder. Then in your keyboard. Click Ctrl f at the same time, so the search input will come out. In the search box, paste this code {% render ‘product-modal-contact-form’ }.
6. Find the { render ‘product-modal-contact-form’ %} and delete it, then click SAVE
7. In your Theme folders. Find the Snippet folder.
8. Open the file, product-modal-contact-form
9. At the right corner, click the delete file button. That’s it

Made4uo

How do i delete EmailJS from my website?? I no longer want to use it but I have NO IDEA how to delete it… can you please please help me? Like a step by step guide, which is as easy as this guide :) Thank you!!

Terry Marie

Deixe um comentário