How to Add Custom Text field on Shopify Product Page

Como Adicionar um Campo de Texto Personalizado na Página de Produto do Shopify

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

Com o tema Dawn, adicionar um atributo de produto personalizado ou caixa de texto foi simplificado. Você pode adicionar vários elementos de IU do Shopify, apenas certifique-se de que o nome e o ID sejam únicos. Siga as instruções abaixo.

Se você tiver temas GRATUITOS do Shopify 2.0, por favor, use a ferramenta gratuita de geração de campos aqui.

Observação: Se você tiver a página de produto Dawn-Debut, isso também funcionará.

Se você tiver um tema diferente. Isso não será aplicável, mas é possível. Envie-me uma mensagem se precisar de ajuda.

1. Vá para gerador de elementos de IU do Shopify.

2. Escolha o line-item-property. Certifique-se de clicar em "mostrar no checkout" se desejar que as informações sejam exibidas no momento do checkout. Clique em "copiar para a área de transferência"

3. Vá para sua Loja online > Temas > Ações > Editar código

4. Vá para a pasta de Seção e abra o main-product.liquid

5. Encontre este código abaixo. Deve estar sob o "{%- when 'buy_buttons' -%}

 

Para Dawn versão 8.0 e acima, abra o buy-buttons.liquid na pasta Snippet e encontre o mesmo código.

6. Cole o código após {% form ...... %}. Veja a imagem abaixo, onde colar.

product-attribute

 

Veja o código personalizado para estilo personalizado.

Adicione o código em azul ao seu código de Elemento de IU do Shopify

Para texto-curto (veja a imagem abaixo de como fica):




text-short

Para texto-longo (veja a imagem abaixo de como fica):

 

text-long

 

Para dropdown (veja a imagem abaixo de como fica):



drop-down

Adicionar um carregador de arquivos.

Para tornar os campos obrigatórios. Você precisa encontrar o código abaixo:


Em seguida, exclua `novalidate: 'novalidate'`. Depois adicione o atributo `required` ao seu campo de entrada.

Exemplo:



drop-down

Adicionar um carregador de arquivos.

Para tornar os campos obrigatórios. Você precisa encontrar o código abaixo:


Em seguida, exclua `novalidate: 'novalidate'`. Depois adicione o atributo `required` ao seu campo de entrada.

Exemplo:

 

Outra maneira é usar o bloco Liquid personalizado usando o editor de temas.

1. Acesse sua loja online > Temas > Personalizar

2. Vá para o modelo de produto. Em informações do produto, clique em "adicionar bloco" e encontre "Liquid personalizado".

3. Na caixa de texto, coloque o código que você tem para o campo de texto, mas adicione o código abaixo na área de texto ou entrada. Certifique-se de adicionar o código antes de ">", veja o exemplo abaixo

 

Veja o exemplo abaixo e o código adicionado está em negrito

 

Isso é tudo (",)

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

33 comentários

@LAUREN – You might have paste the code in a wrong place. You should be able to see the code on checkout.

@DANIELA M OSORIO – You have to make a template and section for it. I have a video tutorial here on how. https://youtu.be/bg7l0lZcyOU

Made4Uo

Hi there, I have followed all of these steps but the information entered by customers isn’t showing up in the back end (i.e. in the orders under admin or in the email confirmation that gets sent to me). Is there somewhere else the information would be displayed? Thanks!

Lauren

this was so helpful and really easy to do compared to some of the other tutorials, thank you. i wanted to ask if there was a way to add it to just one product as opposed to all of the products?

daniela M osorio

Deixe um comentário