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.

Helpful Free links

Migrating to Shopify Transferring Domain to Shopify Master sections and blocks Free Essential tools Custom App Creation Shopify theme templates Add custom CSS to themes Master product variants in Shopify Free Shopify Themes How to customize Shopify themes Automate your store processes Improve store's search Free apps to enhance your store Upload and manage files Facebook ads for your Shopify Shopify Support Stay updated with Shopify changes Join Shopify Community for free help

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