20

Add & preview liquid in the visual editor

In Design Studio, you can personalize your emails using liquid, a templating language that lets you pull in data about your recipients, events, objects, and more. This article shows you have to add liquid using the Personalization panel in the visual editor.

Use the Personalization panel to add the data you want into your messages without having to memorize our syntax or remember all of your attributes.

After you add your liquid, enter Preview mode to check that your data renders as you’d expect!

Add liquid

You can add liquid to text-based standard componentsA pre-built block that helps you build beautiful, engaging messages as quickly as possible in Design Studio. in two ways:

• Using the Personalization panel, which helps you insert attributes without remembering syntax
• Manually, by typing liquid directly into the canvas

To add conditions, loops, or other logic, you’ll still need to write liquid manually. Check out our liquid docs for help.

To use the Personalization panel:

1. Click the personalization icon in the canvas toolbar. A left-hand panel will open.

   

   
2. Under Previewing As, find a person with example data you want to add to your message. Either choose an email from the dropdown or click the magnifying glass to search by their profile attributes.
3. Under Data Type, choose what kind of data you want to add.
4. Hover over an attribute and click .
5. Choose how you want to add the data. If you click Add, we’ll add your liquid wherever your cursor is. Click Copy for more flexibility then paste it into a text area of your canvas.

    Add or copy with a fallback so your messages don’t fail to send

   Emails fail to send if a recipient doesn’t have the data specified in the liquid. You can remedy this by including a fallback conditional or filter!

Conditionally render content

You may want to conditionally render content to localize your messages or customize your email’s responsiveness.

You can use liquid inside a component to conditionally change content in your message. You can also use liquid outside a component to conditionally render components altogether.

To conditionally render entire components, you’ll need to switch to the code editor. Here’s an example of how to conditionally render images:

{% if customer.language == "es" %}
  <x-image src="image-spanish" />
{% else %}
  <x-image src="image-default" />
{% endif %}

Note that the liquid conditional wraps around the components.

Preview liquid

To preview your liquid with sample data, turn on Preview in the canvas toolbar.

Then click the personzalization icon if the left-hand panel isn’t already open. In Preview mode, you can view sample data, but not add any new liquid.

Preview people who have your attribute data and who don’t so you know how your fallback content renders.

From here, you can also preview across device sizes, with visual impairments in mind, and more.

Review liquid errors

If there’s an issue with your liquid syntax, you’ll see “Errors found” in red at the top of the preview. Click this to see a list of issues.

Sample data won’t render if any of your liquid has errors. Messages with liquid errors will also fail to send, so make sure you fix any issue you find.

Learn more about liquid errors and how to fix them.

Understand data types

You can add attributes stored on people, eventsSomething that a person in your workspace did. Events can trigger campaigns, add people to segments, etc, and you can use properties from events to personalize messages., relationshipsThe connection between an object and a person in your workspace. For instance, if you have Account objects, people could have relationships to an Account if they’re admins., objectsAn object is a non-person entity that you can associate with one or more people—like a company, account, or online course., or triggers for API-triggered broadcasts and transactional messages through the Personalization panel.

Some data types may be disabled in the Personalization panel. This could mean:

• The person you’re previewing doesn’t have any data for that type. For example, they don’t have a specific profile attribute.
• The message isn’t connected to an automation that provides the data, like a campaign.

Try switching to a different person who has the right data, or double-check that your message is connected to the correct automation.

Profile attributes

You can add profiles attributes to any Design Studio message. People data is available across any type of campaign, broadcast, and transactional message.

After you add profile attribute data using the Personalization panel, you’ll see the liquid key customer on the canvas.

Any other data—events, relationships to objects, trigger attributes, use their own keys.

Events

You can add event data after you connect to a campaign that’s triggered by an event. You can only add attributes from the trigger event; you can’t add any other event data performed by the person you’re previewing.

When you navigate back to your Design Studio message and open the Personalization panel, we automatically surface a person who has performed the event in the trigger. Click the Data Type dropdown and choose Events to find available attributes.

Event trigger data uses the liquid key event. Learn more about event trigger attributes.

Relationships

You can add relationshipThe connection between an object and a person in your workspace. For instance, if you have Account objects, people could have relationships to an Account if they’re admins. and objectAn object is a non-person entity that you can associate with one or more people—like a company, account, or online course. attributes to any Design Studio message. This data is available across any type of campaign, broadcast, and transactional message. You must first set up objects to then relate them to people.

Note, you can’t currently add trigger data for objects or relationship-triggered campaigns through the Personalization panel. But you can add it manually to a text-based component.

When referencing trigger data for object or relationship-triggered campaigns, you’ll use the trigger key. For non-trigger data, you’ll use the objects and/or relationship keys.

Trigger

The Trigger data type only applies to API-triggered broadcasts. It’s easier to preview trigger data from the broadcast itself because you can add a test payload. In Design Studio, you can only filter for someone who’s already triggered your broadcast, which may take more steps.

To preview data from previous sends in Design Studio, the message must be connected to a broadcast that’s already been triggered. Then in Design Studio, you can preview liquid with previously sent trigger data:

1. Click in the canvas toolbar to open the Personalization panel.
2. Choose Trigger under Data Type. Then select a previous send to pull in data from the previous 30 days.
3. Click Preview to check your trigger liquid.

Trigger data for API-triggered broadcasts uses the liquid object trigger. Learn more about trigger keys.

Transactional

The Transactional data type lets you test trigger data for transactional messages.

To test transactional trigger data within Design Studio, you first need to connect your email to a transactional message. Then you can add attributes and values to the Personalization panel under Transactional Data (JSON). This represents the message_data object in the transactional API request.

Turn on Preview in the canvas toolbar to see your liquid render with the sample data.

You can also test trigger data within the transactional message editor.