Sell services the people need the most
Build to last
Shopify features and tools
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' -%}

{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}

 

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):

<p class="line-item-property__field">
<label for="seu-nome">Seu nome</label><br>
<input id="seu-nome" type="text" name="properties[Seu nome]" style="width: 100%; line-height: 2;">
</p>



text-short

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

<p class="line-item-property__field">
<label for="seu-nome">Seu nome</label><br>
<textarea id="seu-nome" name="properties[Seu nome]" style="width:100%"></textarea>
</p>

 

text-long

 

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

<p class="line-item-property__field">
<label>Seu nome</label><br>
<select id="seu-nome" name="properties[Seu nome]" style="font-size: 1.5rem; width: 100%; padding: 2%;">
<option value="Vermelho">Vermelho</option>
<option value="Branco">Branco</option>
<option value="Azul">Azul</option


drop-down

Adicionar um carregador de arquivos.

<p class="line-item-property__field"> <label>Carregue sua imagem aqui </label> <input type="file" name="pic" accept="image/*"> </p>

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

{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}

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

Exemplo:

<p class="line-item-property__field"> <label>Carregue sua imagem aqui </label> <input type="file" name="pic" accept="image/*" required> </p>


drop-down

Adicionar um carregador de arquivos.

<p class="line-item-property__field"> <label>Carregue sua imagem aqui </label> <input type="file" name="pic" accept="image/*"> </p>

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

{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}

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

Exemplo:

<p class="line-item-property__field"> <label>Carregue sua imagem aqui </label> <input type="file" name="pic" accept="image/*" required> </p>

 

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

form="product-form-{{ section.id }}"

 

Veja o exemplo abaixo e o código adicionado está em negrito
<p class="line-item-property__field">
<label for="your-name">Seu nome</label><br>
<textarea id="your-name" name="properties[Seu nome]" style="width:100%" form="product-form-{{ section.id }}"></textarea>
</p>

 

Isso é tudo (",)

Copied!

Struggling with instructions?

Don't worry, we've got you covered for a reasonable price.

Contact us through "Chat with us" for a quote.

Relax as we handle it for you!

Voltar para o blogue

31 comentários

Hi ALLIE HEMMINGS,

You need to create a product template and edit that template. Please check our video tutorial on how https://youtu.be/bg7l0lZcyOU?si=4KJ9Hdub0NxPuOns

Made4Uo

I’m wanting to add a line item property to one product only, and don’t want it to appear on other product pages. How would I go about doing this? Thanks so much for your awesome tutorials!

Allie Hemmings

Hi Nadia,

We had posted an answer in Shopify community similar to your problem. You can check the solution on the link provided.
https://community.shopify.com/c/online-store-and-theme/custom-liquid-field-in-product-form/td-p/2314479

Made4Uo

Hello! I want to add a custom message field to only specific products (one collection). I created a new product template for these products, but I don’t know where to place the code so that it only applies to the new product template that I made. If I add the code as custom liquid in the theme editor, the customization message won’t appear at checkout. Please help!

Nadia

Hi @Dani,

Please follow the video tutorial. I mentioned this

Made4Uo

Deixe um comentário