html
personalizar
novo produto
catálogo online

Usando HTML para personalizar os detalhes de seus produtos

Adicione o código ao texto no campo de descrição do produto.

Não se preocupe pois o código aparecerá no app, mas no catálogo seus clientes verão apenas o texto personalizado.

💡 Se você não gosta de telas muito poluídas, separe as personalizações por linha, isso não afetará o resultado final. Para testar seu código conforme ele é criado, o escreva n plataforma plataforma de codificação W3 e clique em Run para ver o resultado final.

  • Use títulos para criar uma hierarquia. Faça o título o primeiro item da frase e use <h1> seu texto aqui </h1> para o maior texto. Siga a numeração para os textos menores, por exemplo <h2> seu texto aqui </h2>, <h3> seu texto aqui </h3> e assim por diante;
  • Para separar linhas você precisa usar <br> no final da frase e se quiser mais espaço, adicione um segundo ou terceiro <br>;
  • Para usar parágrafos, insira <p> seu texto aqui </p>;
  • Se você usar fontes específicas, use <font style = "font-family: nome da fonte aqui">;
  • Para alterar o tamanho do texto, use <font style = "font-size: tamanho da fonte aqui px">;
  • Se você quiser que seu texto tenha espaçamento duplo entre as palavras, adicione <tt> seu texto aqui </tt> a ele;
  • Para criar estilos de texto clássicos, use <b> seu texto aqui </b> para negrito, <i> seu texto aqui </i> para itálico e <u> seu texto aqui </u> para sublinhar as palavras;
  • As cores podem ser adicionadas ao seu texto usando <font color = "nome da cor aqui"> no início da frase. Você pode usar o HEX da cor ou seu nome em inglês;
  • Para riscar informações como preços, adicione <strike> seu texto aqui </strike>;
  • Você pode listar itens usando <li> seu texto aqui </li>. No topo da lista, especifique se é <ol> para números ou <ul> para marcadores;
  • Emojis ou emoticons podem ser usados ​​no texto sem código, basta adicioná-los à frase conforme o desejar e certifique-se de que não sejam personalizados, pois podem não ser reconhecidos em alguns navegadores;
  • GIFs também podem ser usados, mas precisam ser inseridos no código <a> <img src = "link da imagem aqui"> </a>. Para obter o link da imagem, basta clicar com o botão direito sobre ele e selecionar Abrir imagem em uma nova guia, copiar o link e colá-lo no código. E lembre-se de ter certeza de que é um GIF de fonte gratuita.

Vamos testar? Copie e cole o texto abaixo na descrição de um produto em seu aplicativo ou na plataforma de codificação W3 para ver o código em ação. 😎

<h1> <font color = "#323f4c"> Dominando HTML com o <font color = "#00d5b1"> Kyte <font color = "#323f4c">!</h1>
<h2> <font color = "#454e5f"> Eis algumas dicas para personalizar seu texto: </h2>
<ol>
<li><tt> Faça seu texto com espaço duplo; </tt></li>
<li><b> O escreva em negrito; </b></li>
<li><i> Ou itálico; </i></li>
<li><u> Sublinhe algumas palavras; </u></li>
<li><strike> Ou corte tudo. </strike></li>
<br>
<ul>
<li><font color = "blue"> Se <font color = "crimson"> você <font color = "green"> tiver <font color = "brown"> paciência, 🥱 </li>
<li><font color = "black"> Escreva <font color = "orange"> cada <font color = "black"> palavra <font color = "orange"> de <font color = "black"> uma <font color = "orange"> cor. <font color = "black">🍭 </li>
<br><br>
<font color = "#323f4c">
<font style="font-family:magneto"> Mude
<font style="font-family:mv boli"> o estilo
<font style="font-family:papyrus"> do seu texto. <br>
<font style="font-family:stencil"><font style="font-size:30px"> Use letras grandes
<font style="font-family:pristina"><font style="font-size:15px"> ou pequeninas. 🐭 <br>
<font color = "#00d5b1">
<font style="font-family:monotype corsiva"><font style="font-size:25px"> E deslumbre seus clientes com GIFs animados.
<a><img src="https://i.pinimg.com/originals/68/8e/9e/688e9eb45c2f5cc82361d5c305ccc0ca.gif" width="050" height="050"></a>
Dicas & Hacks
html
personalizar
novo produto
catálogo online

Courses

No items found.

+ 40 mil

Lojas utilizam o Kyte

Presença Global

Em mais de 180 países!

Atendimento 5 estrelas

Clientes felizes diariamente

Instale o Kyte grátis...

... Em qualquer celular!