Want to use variable content in MailChimp? I’ve just created a custom template that makes use of the variable content and after a ironing out a few issues it all worked as expected.
You need to make sure that:
1. the mc:repeatable attribute on each element match up
2. each of the repeatable elements are exactly adjacent to each other
3. the mc:edit on each section is unique (especially if you want to change colours)
Here’s some code that worked for me:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | <table border="0" cellpadding="0" cellspacing="0" id="templateContainer"> <tr> <td align="center" valign="top" class="contentWrapper"> <!-- BEGIN BODY // --> <!-- // Begin Module: Item - no top border with image \\ --> <table class="bodyContent" border="0" cellpadding="0" cellspacing="0" width="100%" mc:repeatable="siwc_600" mc:variant="content with left image - no top border"> <tr> <td colspan="3" height="30"></td> </tr> <tr> <td align="center" valign="top"> <img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/placeholder_180.gif" style="max-width:180px;" mc:label="image" mc:edit="liwc600_image00"/> </td> <td width="20"></td> <td valign="top"> <div mc:edit="liwc600_content00"> <h1><a href="#" target="_blank" style="text-decoration:none" rel="noopener noreferrer">Content with no top border</a></h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquam risus ligula, at dignissim dui condimentum ac. Proin a tortor id eros molestie pretium sit amet at eros. Vivamus faucibus mauris ullamcorper arcu dignissim feugiat.<br/><br/><a href="#" target="_blank" style="font-weight:bold; text-decoration:none" rel="noopener noreferrer">Read more</a> </div> </td> </tr> <tr> <td colspan="3" height="30"></td> </tr> </table> <!-- // End Module: Item - no top border with image \\ --> <!-- // Begin Module: Item - no top border witout image \\ --> <table class="bodyContent" border="0" cellpadding="0" cellspacing="0" width="100%" mc:repeatable="siwc_600" mc:variant="content with no image - no top border"> <tr> <td height="30"></td> </tr> <tr> <td valign="top"> <div mc:edit="riwc600_content00"> <h1><a href="#" target="_blank" style="text-decoration:none" rel="noopener noreferrer">Content with no top border</a></h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquam risus ligula, at dignissim dui condimentum ac. Proin a tortor id eros molestie pretium sit amet at eros. Vivamus faucibus mauris ullamcorper arcu dignissim feugiat. Mauris sagittis est diam, et congue erat varius vel. Integer iaculis pharetra sapien, sed varius metus blandit nec.<br/><br/><a href="#" target="_blank" style="font-weight:bold; text-decoration:none" rel="noopener noreferrer">Read more</a> </div> </td> </tr> <tr> <td height="30"></td> </tr> </table> <!-- // End Module: Item - no top border without image \\ --> <!-- // Begin Module: Left Image with Content \\ --> <table class="bodyContent" border="0" cellpadding="0" cellspacing="0" width="100%" mc:repeatable="siwc_600" mc:variant="content with left image"> <tr> <td colspan="3" height="2" bgcolor="#ededed"></td> </tr> <tr> <td colspan="3" height="30"></td> </tr> <tr> <td align="center" valign="top"> <img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/placeholder_180.gif" style="max-width:180px;" mc:label="image" mc:edit="liwc600_image00"/> </td> <td width="20"></td> <td valign="top"> <div mc:edit="liwc600_content01"> <h1><a href="#" target="_blank" style="text-decoration:none" rel="noopener noreferrer">Standard content with border</a></h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquam risus ligula, at dignissim dui condimentum ac. Proin a tortor id eros molestie pretium sit amet at eros. Vivamus faucibus mauris ullamcorper arcu dignissim feugiat. Mauris sagittis est diam, et congue erat varius vel. Integer iaculis pharetra sapien, sed varius metus blandit nec.<br/><br/><a href="#" target="_blank" style="font-weight:bold; text-decoration:none" rel="noopener noreferrer">Read more</a> </div> </td> </tr> <tr> <td colspan="3" height="30"></td> </tr> </table> <!-- // End Module: Left Image with Content \\ --> <!-- // END BODY --> </td> </tr> |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
