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

@Katelyn,

You need to create a product template and edit the said template instead.

Made4Uo

Hi, I have added this code to the buy-buttons.liquid due to having Dawn 9.0. The code works but all off my products don’t need this line item property. How do I only add the line item property to selected products.

Katelyn

Hi @Alvin,

Definitely can update the product price. It needs to be connected to a javascript code.

Made4Uo

Hi
Thanks for updated instructions for Dawn theme above 8. Managed to get it to work. Also looked at https://youtu.be/bg7l0lZcyOU to add custom product template.

Is there a way to Update the product price when there is a value entered in the custom text box ?

alvin

Hi @Dana,
Please follow the instructions added in this blog.

@Neeraj Sorry. You have to add an app that works on the backend to do that

Made4Uo

Deixe um comentário