Support

Template Language: Working With Variant Selectors

Topic: Custom Templates & Language | Updated: 05/15/2013

Variant Selectors let you switch between any number of different content structures (blocks of HTML) within your email.

This template example has a left-image module and a right-image module that can be selected via the drop-down menu, then repeated and selected again. In this particular template, it allows you to create a "ping-pong" layout, where each image-and-text module mirrors the previous.
variant example

You can set variable content blocks with the use of the mc:repeatable and mc:variant tags. 

mc:repeatable="product" mc:variant="content with left image"

The mc:repeatable tag is familiar, save for one detail: it's taking a name (in this case, product). That's an important difference between a normal mc:repeatable tag, where no name is required. The app uses this name to track the repeated variant, so it's very important that the name be included and that it be identical on the two items you want to alternate between.

The next tag is mc:variant. You'll see that it's also taking a name; "content with left image" in the top module, "content with right image" on the bottom one. This tag sets the text that shows on the Variant Selector drop-down menu:

variant display

Here's a simplified example:

<table>
    <tr>
        <td>
            <div mc:repeatable="catsdogsbirdsfish"
            mc:variant="meow meow meow!">
                <h1>Meow!</h1>
                Cats are the best!
            </div>
            <div mc:repeatable="catsdogsbirdsfish"
            mc:variant="woof woof woof!">
                <h1>Woof!</h1>
                Dogs are the best!
            </div>
            <div mc:repeatable="catsdogsbirdsfish"
            mc:variant="tweet tweet tweet!">
                <h1>Tweet!</h1>
                Birds are the best!
            </div>
            <div mc:repeatable="catsdogsbirdsfish"
            mc:variant="glub glub glub!">
                <h1>Glub?</h1>
                I don't know what sounds fish make,
                but they are the best!
            </div>
        </td>
    </tr>
</table>

Since the four divs are adjacent to each other and are correctly tagged up, they'll be pulled as selectable variants within the app. You can use the Variant Selectors on pretty much any number of chunks of code: we haven't placed any limits on the number of variants you can set so, theoretically, you can do this to infinity+1*.

*We'd rather you didn't.

See more examples on Fabio's blog post.

Note

The variant selector drop down menu will only appear when a template is applied to a campaign, but you won't see it if you're editing a template in the Templates area of your account.

Related Articles