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>
Last modified 9mo ago