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
Hello, is there a tutorial or code on how to add a custom text box to specific products only and not all products?
Hi @Wes,
Please create a new product template, then edit the section you assign to it instead. Watch this on how, https://youtu.be/bg7l0lZcyOU
Hi @Thomaz Szeckir,
Unfortunately, I do not have a warehouse theme so it hard to figure out how the theme is written. It could be in the template folder or section folder
Hi @Vitaliy,
You have to add a javascript code to do this so it listens with the changes of the variants
Is it possible to add conditioning logic to only display on selected variants?
Hello, I saw your video “Add Custom Textbox or Dropdown to Dawn Product Page – No APP needed” but I can’t find the place where I have to put the code, I am using the WareHouse theme.
Hi! This is very helpful, but I would like to only apply the engraving option to certain items. How do I do this?