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

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.

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>

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>

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

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>

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

Isso é tudo (",)