All Collections
Editor Questions
How-To Questions
How to customize your Bullet list in the template?
How to customize your Bullet list in the template?

This article provides additional information about modifying or changing the bullet list in Stripo emails.

Anna avatar
Written by Anna
Updated over a week ago

Let's imagine that you created an email template and added a Bullet list there.

In this article, you will learn how to customize and edit the display of the Bullet list, and below I will show you how this can be done.

How can I customize my Bullet list?

  • Let's start with the space decreasing between lines.

If you would like to increase the space between the lines, you can add the style="margin-bottom:10px;" code to the tag <li> in the code editor. If you would like to decrease it, please just use style="margin-bottom:0px;"

For example:

  • Also, you can move the list to the right side from the container's border.

For this, please insert to the <li style="margin-left:20px;">. You can change the number of pixels.

  • And on the left side as well:

To do so, please go to the CSS section of the code, and you should insert
ul { margin-left: 5px; padding-left: 5px;}
Then the bullets will be aligned to the left side:

  • The next tip is to change the bullets and text color in the list.

The first step is to insert text to tag <p>. After this, we can add the style attribute to each tag separately. For example, I set up different colors for bullets and text:

<li style="color:#cc0000">    
<p style="color:#6aa84f"> Text 2 </p>

  • One more thing that we wanted to highlight is changing the type of the bullet itself

For this, please insert the list-style-type: '✓'; part to the tag <li> this way
<li style="list-style-type:'✓';">. You can change the check mark here with any HTML item or even an emoji.

This is the code example:

And here is what it can look like in the editor:

How to continue ordering the <ol></ol> list if you have it in separate text blocks?

Sometimes there may be a case to have the ordered list first and some other sub-content (<ul></ul> unordered list, text, etc.), and then you would like to continue the ordering using the ordered list <ol></ol>, but the count starts for the number 1:

To continue the count in the ordered list you should add the attribute start="2":

<ol start="2">


<p style="font-size: 20px;">Get the best sale ever</p>



<p style="font-size: 20px;">Enjoy</p>



Next, your items will be numbered as 3, 4...etc.

Thank you for taking the time to read our articles. We hope you will find this information helpful.

If you have any additional questions, please email us at

We would be glad to talk with you.

Did this answer your question?