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!

Fundamentals - Previous

Merge Tags

Next - How To

Round buttons

Last modified 4mo ago

Copy link

Contents