All Collections
Making the most of your Kyte
Best practices
Using HTML to customize your product details
Using HTML to customize your product details

You can use HTML code to personalize text in Kyte.

Updated over a week ago

You don't need to be a developer to make your catalog more attractive just use some of the codes we put together for you. Assemble the code directly into the description field within the product details, don't worry as only the custom text will appear in the online catalogue.

If you have difficulty with very busy screens, separate the customizations by line and test your code from time to time on conversion platforms.

Codes

  1. Use headings to create a hierarchy:

    • Make the title the first item of the sentence and use <h1> your text here </h1> for larger text

    • Follow the numbering for smaller texts, for example <h2> your text here </h2>, <h3> your text here </h3> and so on

  2. To separate lines you need to use <br> at the end of the sentence, if you want more space, add a second or third <br>

  3. To use paragraphs, enter <p> your text here </p>

  4. If you use specific fonts, use <font style="font-family: font name here">

  5. To change text size use <font style="font-size: font size here px">

  6. If you want your text to have double spacing between words, add <tt> your text here </tt> to it

  7. To create classic text styles:

    1. Use <b> your text here </b> for bold

    2. Use <i> your text here </i> for italics

    3. Use <u> your text here </u> to underline words

  8. Colors can be added to your text by using <font color="color name here"> at the beginning of the sentence. You can use the HEX of the color or its name in English

  9. To strike out information such as pricing, add <strike> your text here </strike>

  10. You can list items using <li> your text here </li>, at the top of the list specify whether it is <ol> for numbers or <ul> for bullets points

  11. Emojis or emoticons can be used in the text without code, just add them to the sentence as you wish

  12. GIFs can also be used, but they need to be inserted in the <a> <img src = " image link here "> </a> code

    • To get the image link right click on it, select Open image in new tab, copy the link and paste it in the code

Do you want to try it out?

Copy and paste the text below into a product description to see the code in action. 😎

<h1> <font color = "#323f4c"> Mastering HTML with <font color = "#00d5b1"> Kyte <font color = "#323f4c">!</h1>
<h2> <font color = "#454e5f"> Here are some tips to customize your text: </h2>
<ol>
<li><tt> Make your text double spaced; </tt></li>
<li><b> Make it bold; </b></li>
<li><i> Or italic; </i></li>
<li><u> Underline a few words; </u></li>
<li><strike> Or strike it all off. </strike></li>
<br>
<ul>
<li><font color = "blue"> If <font color = "crimson"> you <font color = "green"> are <font color = "brown"> patient, 🥱 </li>
<li><font color = "black"> Make <font color = "orange"> each <font color = "black"> word <font color = "orange"> a <font color = "black"> different <font color = "orange"> colour. <font color = "black">🍭 </li>
<br><br>
<font color = "#323f4c">
<font style="font-family:magneto"> Change
<font style="font-family:mv boli"> the style
<font style="font-family:papyrus"> of your text. <br>
<font style="font-family:stencil"><font style="font-size:30px"> Make it big
<font style="font-family:pristina"><font style="font-size:15px"> or small. 🐭 <br>
<font color = "#00d5b1">
<font style="font-family:monotype corsiva"><font style="font-size:25px"> And dazzle your customers with animated GIFs.
<a><img src="https://i.pinimg.com/originals/68/8e/9e/688e9eb45c2f5cc82361d5c305ccc0ca.gif" width="050" height="050"></a>
Did this answer your question?