Bullet lists
Normal bullets in emails (<ul>/<ol>) are not supported in all email clients, and renders different in many clients. In this article, we are gonna show you how you can create a custom bullet list, that will look the same across all platforms.

Step 1

Add your setting. In this case, we call the setting article Add an input and chose Multi-line Text and call it text. Now we can add the code

Step 2

Make your first variable. We create the variable bulletlist for our Mutli-line Text field article.text Each bullet will be splitted with a semicolon
1
{% assign bulletlist = article.text | split: ";" %}
Copied!

Step 3

We can now loop our variable.
1
{% assign bulletlist = article.text | split: ";" %}
2
{% for bullet in bulletlist %}
3
4
{{ bullet }}
5
6
{% endfor %}
Copied!

Full Example

1
<tr>
2
<td class="w-20" style="width:30px;"> </td>
3
<td align="left">
4
<table cellspacing="0" cellpadding="0" border="0">
5
{% assign bulletlist = big_article.text | split: ";" %}
6
{% for bullet in bulletlist %}
7
<tr>
8
<td class="w-left" align="left" style="font-family: 'Avenir Next', Arial, Helvetica, sans-serif; color:#{{ textColor }}; font-weight: 500; font-size: 16px; line-height:20px;">
9
&bull;
10
</td>
11
<td style="width:10px;">&nbsp;</td>
12
<td class="w-left" align="left" style="font-family: 'Avenir Next', Arial, Helvetica, sans-serif; color:#{{ textColor }}; font-weight: 500; font-size: 16px; line-height:20px;">
13
{{ bullet }}
14
</td>
15
</tr>
16
<tr>
17
<td colspan="3" height="5" style="height:5px; font-size:1px; mso-line-height-rule:exactly; line-height:1px;">&nbsp;</td>
18
</tr>
19
{% endfor %}
20
</table>
21
</td>
22
<td class="w-20" style="width:30px;"> </td>
23
</tr>
Copied!