Create Editable Styles with MailChimp’s Template Language

When coding custom templates with MailChimp's template language, set declarations within your CSS code to define areas that can be styled from the Design step of the Campaign Builder. Below, you'll find more information on editable template styles.

Area Declarations

Add the following declarations to your CSS to define the areas where styles should be editable:

Required

  • @tab: defines from which tab on the Design step the styles can be set.

Optional

  • @section: defines from which tab subsection on the Design step styles can be set. This is optional, but recommended when you have a number of editable styles. Too many editable styles in one section or grouped in no sections can make it harder to find edit options.
  • @tip: guidance to be shown in the property inspector indicating how best to use styles or controls.
  • @style declaration takes a CSS rule set you've created and pulls it into the campaign text editor's drop-down menu and allows you to apply styles to your text in a quick and selective way.
  • @theme: if you would like the colors of your template to be changeable via the MailChimp color theme tool, use the following theme definitions in your CSS:
    • @theme page: defines the background color of the email.
    • @theme body: should be on the main body section of the campaign for text color and fonts
    • @theme header: should be used for the background color of the "view in this browser" section or left off entirely
    • @theme title: defines the foreground, size, and font of titles
    • @theme subtitle: defines the foreground, size, and font of subtitles
    • @theme footer: should be on the footer section of the template for background color.

Style Declarations

Use the following declaration to define a single editable style within an area of your template: 

/*@editable*/ property: value;

Style declaration blocks share a basic structure regardless of the element style targeted and the /*@editable*/ declaration repeats for each element you want to be editable within an area. In this example, a H1 tag is declared: 

/** * @tab Page *
@section main heading *
@tip Set the styling for all first-level headings in your emails. These should be the largest of your headings. *
@style heading 1 */ h1{ /*
     @editable*/ color:#202020 !important; display:block; /*
     @editable*/ font-family:Arial; /*
     @editable*/ font-size:34px; /*
     @editable*/ font-weight:bold; /*
     @editable*/ line-height:100%; /*
     @editable*/ text-align:left; }

Was this article helpful?
What can we do to improve articles like this?