- Take A Goal-centric, User-friendly Approach
<\/a><\/li>- Embed CSS Styles into The HTML Code
<\/a><\/li>- Arrange Content Blocks within Rows
<\/a><\/li>- Coding for Image, Text, And CTA Button
<\/a><\/li>- Adding The Email Footer
<\/a><\/li>- Upload Your Template to Mailchimp
<\/a><\/li>- Test Your Email for Rendering across Clients <\/a><\/li><\/ul>\n\n\n\n
Read more<\/strong>: A Complete Guide to Mailchimp\u2019s New Email Builder<\/a><\/p>\n\n\n\n
How to Code Custom Mailchimp Templates<\/strong><\/h2>\n\n\n\n
1. Take A Goal-centric, User-friendly Approach<\/h3>\n\n\n\n
To begin with, identify your goal. What is it you\u2019re trying to achieve with a custom coded email template? Much of coding depends on having a prior idea about the placement of various components in your email. <\/p>\n\n\n\n
For instance, if you\u2019re creating a promotional email which offers a gift card, it would contain a CTA button either on the hero image or just after. Again, if you\u2019re showcasing a brand\u2019s product line, you\u2019re thinking of multiple CTAs across the email. <\/p>\n\n\n\n
Perhaps you want to embed the images and CTAs in a Z-pattern to improve readability, and so on. All this is part and parcel of knowing how to code a Mailchimp template.\u00a0<\/p>\n\n\n
![\"\"](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2017\/12\/Mailchimp-design-coding.jpg\")
<\/a><\/div><\/div>\n\n\n\n2. Embed CSS Styles into The HTML Code<\/h3>\n\n\n\n
Mailchimp automatically incorporates the CSS styles in your code <\/a>into the HTML code of the email template. So there\u2019s no need for a separate CSS file. This reduces code bloat. <\/p>\n\n\n\n
Consider the following code snippet. When you save this code in Mailchimp, the CSS styles defined in the <style><\/strong> tag will be integrated or \u201cinlined\u201d into the HTML code of the email template. Besides limiting code bloat, this also ensures consistent rendering across email clients that may not support CSS stylesheets. <\/p>\n\n\n\n
![\"CSS](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/05\/image8.jpg\")
<\/figure><\/div>\n\n\n\nRead more<\/strong>: How To Embed Mailchimp Survey & Polls In Emails To Boost Your Campaign ROI<\/a><\/p>\n\n\n\n
3. Arrange Content Blocks within Rows<\/h3>\n\n\n\n
Like we mentioned earlier, having a prior idea about the placement of various components in your email is crucial while coding. This idea will guide your coding, ensuring each block operates as intended within the layout. Now, to give a structure to your code, you need to think about how the content blocks in the email will operate. <\/p>\n\n\n\n
Take editable blocks, for instance. These are sections within your email that the designer can modify without needing to fiddle with the code. Likewise if the designer wants to change the order of these editable blocks. These blocks should be placed within rows for better organization, as shown below. <\/p>\n\n\n\n
![\"](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/05\/image7.jpg\")
<\/figure><\/div>\n\n\n\n4. Coding for Image, Text, And CTA Button<\/h3>\n\n\n\n
Keep in mind that whenever coding Mailchimp HTML templates, you\u2019ll need to add mc:edit<\/strong>. In the following example, the attribute is added within the <image><\/strong> tag. <\/p>\n\n\n\n
(mc:edit<\/strong> is not part of standard HTML. It\u2019s a custom attribute that is used within Mailchimp email templates. In this regard, feel free to read Mailchimp\u2019s proprietary Template Language<\/a> documentation.)\u00a0<\/p>\n\n\n\n
![\"Coding](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/05\/image6.jpg\")
<\/figure><\/div>\n\n\n\nN.B.<\/strong> Mailchimp tends to strip out the attributes that define the height and width of images. Now this creates a problem if you want to use retina images i.e. images that have twice the number of pixels per inch than regular images. In the absence of attributes, the images will appear larger than intended, leading to disrupted viewing. There are two ways to deal with the problem. One, you can scale down the retina images before<\/em> uploading them to Mailchimp. Two, you can add the image size attributes manually after<\/em> editing the Mailchimp template.<\/p>\n\n\n\n
![\"Non-retina](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/05\/image10.jpg\")
<\/figure><\/div>\n\n\n\nLike images, you can add an editable section for the body copy as shown below. <\/p>\n\n\n\n
![\"Coding](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/05\/image11.jpg\")
<\/figure><\/div>\n\n\n\nFinally, the CTA button. Note that you can only use padded buttons in custom Mailchimp templates. Any styles you may have applied to the anchor tags of your custom button might be removed by Mailchimp\u2019s rendering environment. This once again reminds us of the importance of adhering to an ESP\u2019s native penchants. <\/p>\n\n\n\n
The click real estate will be limited to the CTA text. The viewer can\u2019t click on the space surrounding the text. Outside the text, the pointing hand will resolve into the default cursor. Below is an example of HTML code for adding a padded CTA button in a Mailchimp email template.<\/p>\n\n\n\n
![\"Coding](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/05\/image5.jpg\")
<\/figure><\/div>\n\n\n\n5. Adding The Email Footer<\/h2>\n\n\n\n
You might not have to make the footer section editable if the legal information doesn\u2019t require changes. However, if the designer wishes to incorporate a creative footer, ensure you include \u201cmc:edit=footer<\/strong>\u201d in your code. <\/p>\n\n\n\n
Also, remember to insert *|UNSUB|*<\/strong> in the code to generate the unsubscribe link, which is a legal requirement.<\/p>\n\n\n\n
![\"](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/05\/image3.jpg\")
<\/figure><\/div>\n\n\n\nSpeaking of merge tags, make sure you always add the following merge tags in your code:<\/p>\n\n\n\n
- *|MC_PREVIEW_TEXT|*<\/strong> : To generate the appropriate preview text mid-campaign-setup
<\/li>- *|ARCHIVE|*<\/strong> : To generate the \u2018View Online\u2019 link
<\/li>- *|UPDATE_PROFILE|*<\/strong> : To give your subscribers the option to update their personal information or manage their email preferences
<\/li><\/ul>\n\n\n\n*|TWITTER:FULLPROFILE|*<\/strong> : Or any other social media channel integration for that matter. In the present case, the \u201cFULL PROFILE\u201d argument will populate the email with your brand\u2019s X avatar, followers, follow link, and the latest tweets. <\/p>\n\n\n\n
6. Upload Your Template to Mailchimp<\/h2>\n\n\n\n
Once the HTML code is ready, <\/p>\n\n\n\n
- Log in to your Mailchimp account
<\/li> - Go to \u2018Content,\u2019 and choose \u2018Email templates.\u2019 <\/li><\/ul>\n\n\n\n
![\"Upload](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/05\/image2-1.png\")
<\/figure><\/div>\n\n\n\n- Click \u2018Create template\u2019<\/li><\/ul>\n\n\n\n
![\"Creating](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/05\/image9.png\")
<\/figure><\/div>\n\n\n\n- Select \u2018Code your own\u2019<\/li><\/ul>\n\n\n\n
![\"Mailchimp](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/05\/image4-1024x79.png\")
<\/figure><\/div>\n\n\n\n- Choose \u2018Import Zip\u2019 to upload a zip file with your template code<\/li><\/ul>\n\n\n\n
![\"Import](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/05\/image1.png\")
<\/figure><\/div>\n\n\n\n- Name your template, and click \u2018Upload\u2019
<\/li> - Make changes to your code or design
<\/li> - Once you\u2019re done editing your template, click \u2018Save and Exit\u2019<\/li><\/ul>\n\n\n
![\"Need](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2021\/03\/5.jpg\")
<\/a><\/div><\/div>\n\n\n\n7. Test Your Email for Rendering across Clients<\/h2>\n\n\n\n
Testing is the key to understanding how an ESP operates. In particular, examining how an ESP naturally behaves in coding provides valuable insights for developers to navigate around any limitations of the builder in future projects.<\/p>\n\n\n\n
From removing code to ensuring proper rendering, it’s essential to test your emails before sending them to your design team. In Mailchimp, you can easily test your template by sending a test email to your own email address. Learn more about previewing and testing your emails in Mailchimp<\/a>. <\/p>\n\n\n\n
Order Custom Coded Mailchimp Templates for A Decent Buck! <\/h2>\n\n\n\n
- Name your template, and click \u2018Upload\u2019
- Choose \u2018Import Zip\u2019 to upload a zip file with your template code<\/li><\/ul>\n\n\n\n
- Select \u2018Code your own\u2019<\/li><\/ul>\n\n\n\n
- Click \u2018Create template\u2019<\/li><\/ul>\n\n\n\n
- *|ARCHIVE|*<\/strong> : To generate the \u2018View Online\u2019 link
- Embed CSS Styles into The HTML Code