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

{% assign bulletlist = article.text | split: ";" %}

Step 3

We can now loop our variable.

{% assign bulletlist = article.text | split: ";" %}
{% for bullet in bulletlist %}

{{ bullet }} 

{% endfor %}

Full Example

 <tr>
	<td class="w-20" style="width:30px;"> </td>
        <td align="left">
        	<table cellspacing="0" cellpadding="0" border="0">
        	{% assign bulletlist = big_article.text | split: ";" %}
        	{% for bullet in bulletlist %}
        		<tr>
        			<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;">
        			&bull;
        			</td>
				<td style="width:10px;">&nbsp;</td>
        			<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;">
        			{{ bullet }}
        			</td>
        		</tr>
			<tr>
        			<td colspan="3" height="5" style="height:5px; font-size:1px; mso-line-height-rule:exactly; line-height:1px;">&nbsp;</td>
        		</tr>
		{% endfor %}
        	</table>
        </td>
        <td class="w-20" style="width:30px;"> </td>
</tr>