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. You can access event properties in liquid with {{event.<property>}}, 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 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, not campaigns, newsletters, or transactional messages. You can add trigger attributes after you connect to an API-triggered broadcast.

To use trigger attributes:

1. Connect your message to an API-triggered broadcast.
2. Wait until someone enters the broadcast.

When you navigate back to your Design Studio message and open the Personalization panel, we automatically surface a person who has entered the API-triggered broadcast in the last 30 days.

Yes, this means, to add trigger data through the Personalization panel, the broadcast must have already been activated and triggered. We know this isn’t ideal, so in the future, we’re looking to add a Manual Data type that lets you add liquid for API-triggered broadcasts (and transactional messages) that have not been triggered yet.

Trigger data for API-triggered broadcasts uses the liquid key trigger. Learn more about trigger attributes.

Manual Data

The Manual Data type isn’t available yet, but we intend to develop it so you can add liquid for API-triggered broadcasts and transactional messages that have not been triggered yet. This way, you’re not reliant on previewing a person who has already entered that broadcast or received that transactional message (which may have not been sent yet!).

Let us know if you have any feedback about this feature!