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.
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):
Para texto-longo (veja a imagem abaixo de como fica):
Para dropdown (veja a imagem abaixo de como fica):
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:
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!
33 comentários
Hi @Ashley,
You have to create a template if that is what you want. Fortunately, as mentioned, the code still works in higher version as mentioned in the blog.
With the new 9.0 version of dawn I only want to add the text box to certain products. But since we are no longer adding the ui code to the custom product code, these tutorials don’t work. I followed this tutorial and now I have a text box on all my products.
Hi @KAYLA ,
For Dawn 8.0 version, the product form is under the buy-buttons.liquid in the Snippet folder
Hi they just released dawn 8.0 and I am trying to add the text box to product. I cant find this line to put the code under. {%- form ‘product’, product, id: product_form_id, class: ‘form’, novalidate: ‘novalidate’, data-type: ‘add-to-cart-form’ -%}
Is there maybe a new line code that I need to find to place the code for the text box under?
Hi,
Please follow the tutorial here https://youtu.be/bg7l0lZcyOU to create a product template, then you can edit the custom-product section to add the textbox