> This page is part of the [Customer.io documentation](https://docs.customer.io). For the complete index, see [llms.txt](https://docs.customer.io/llms.txt).
> Last updated: May 13, 2026

# Rules: Display content based on conditions

[BetaThis feature is new and we're actively working on it.](/beta-experimental-features/#beta-features)

If you want content to show based on a [recipient’s language preferences](/journeys/localize-ds-messages/) or the [device they’re using](/journeys/responsive-styles/), add **rules** to your component.

In Design Studio, you can conditionally display content in a few ways:

*   Create conditions based on customer data or workflow data like journeys and triggers.
*   Loop through and list data.
*   Hide content based on screen size.

 Connect your email to a workflow first

If you want to conditionally display content that depends on workflow data like journeys and triggers, you’ll need to connect your Design Studio email to a campaign, broadcast, or transactional message to preview your rules.

## Conditionally display components[](#conditionally-display-components)

To conditionally show an entire component, follow these steps:

1.  Click a component on your canvas.
2.  In the Properties menu, click the *Rules* tab.
3.  Click **Add rule**.
4.  Define your condition by writing a prompt or by manually adding variables and operators:
    *   Describe the condition and click **Generate**. The agent will recommend liquid for you.
        
        [![The agent panel in the visual editor. The user has described a condition and the agent has recommended liquid for them.](https://docs.customer.io/images/ds-rule-conditional.png)](#2f29dcf4f1669b2bd65ae18a5088361a-lightbox)
        
    *   Or click **Manual input** and select your conditions from the dropdowns. You can combine conditions with AND/OR by clicking **Add condition**. [Learn more about building conditions manually](#build-conditions-manually).
        
        [![The manual input tab in the Rules panel. The user can select their conditions from the dropdowns.](https://docs.customer.io/images/ds-rule-conditional-manual.png)](#c255a2b9ec2635f13f0f227fde8caa42-lightbox)
        
5.  Click **Add**.

To check that the email hides and shows the component when you expect, turn on [Preview mode](/journeys/liquid-visual-editor/#preview-liquid).

In the layers menu, this icon tells you which components have display rules: .

[![The Layers menu in the visual editor. The user can see which components have display rules.](https://docs.customer.io/images/ds-rule-conditional-layers.png)](#bb7e7d539395b6d956db962af5f77fb3-lightbox)

## Loop through and list data[](#loop-through-and-display-data)

You can also use rules to loop through a list of data, rather than manually typing liquid, and add a component for each item.

1.  Click a component on your canvas.
2.  In the Properties menu, click the *Rules* tab.
3.  Click **Add rule**.
4.  Define your condition by writing a prompt or by manually adding variables and operators:
    *   Describe the condition and click **Generate**. The agent will recommend liquid for you.
    *   Or click **Manual input**, select **Loop through a list** under *Statement type*, and select your conditions from the dropdowns. [Learn more about building conditions manually](#build-conditions-manually).
        
        [![The manual input tab in the Rules panel. The user can select their conditions from the dropdowns.](https://docs.customer.io/images/ds-rule-loop.png)](#15eed3f96641c1fb3ce389db25b5af46-lightbox)
        
5.  Click **Add**.

To check that the email displays your items correctly, turn on [Preview mode](/journeys/liquid-visual-editor/#preview-liquid).

Each item becomes its own component, so if you added a `for` loop rule to a Paragraph component, and it returns three items for a person, then the email will include three paragraph components (not three paragraphs within one component).

In the layers menu, this icon tells you which components have display rules: .

[![The Layers menu in the visual editor. The user can see which components have display rules.](https://docs.customer.io/images/ds-rule-conditional-layers.png)](#bb7e7d539395b6d956db962af5f77fb3-lightbox)

## Build conditions manually[](#build-conditions-manually)

When you build a condition through the **Manual Input** tab of the rules builder, the variable dropdown lists data available to your workflow (if it’s connected) and the customer you’re previewing.

If you connected the email to a workflow, the dropdown includes customer data and variables unique to your workflow like trigger and journey attributes.

[![The manual input tab in the Rules panel. The user can select their conditions from the dropdowns.](https://docs.customer.io/images/ds-rule-loop.png)](#15eed3f96641c1fb3ce389db25b5af46-lightbox)

In the example above, the email is part of an event-triggered campaign, so you can select attributes associated with the `event` trigger object.

If you haven’t yet connected the email to a workflow, the dropdown only includes `customer` and `objects` data, but you can manually add variables by typing into the field and clicking **Create**.

[![The manual input tab in the Rules panel. The user can manually add variables by typing into the field and clicking Create.](https://docs.customer.io/images/ds-rule-loop-manual-add.png)](#eddb80f1a25e28fd4bee903f26104264-lightbox)

The customer and object attributes change depending on the profile you’re previewing. Open the Personalization panel by clicking in the canvas toolbar to filter for different customers.

## Rules with objects or relationships[](#rules-with-objects-or-relationships)

You can use the Rule builder to add conditions related to object and relationship data—both trigger and non-trigger data.

If you’ve based a condition on object or relationship attributes not related to the campaign’s trigger, make sure you understand the limitations first (see below) and preview the email with a variety of customers to make sure the liquid renders as you’d expect.

 Before you use non-trigger liquid for objects and relationships, consider that:

Referencing objects is relative

Referencing an object is relative to:

1.  The number of objects a person is related to in your object type and
2.  The order the objects were *created* in

This means that `{{objects.online_classes[0]}}` could refer to an English class for one person and a Math class for another; you can’t reference a specific object or relationship across all people in your campaign.

`[0]` corresponds to the most recently created object that a person is related to and `[9]` corresponds to the oldest object that a person is related to.

You cannot reference more than 10 objects of the same type

If a person is related to more than 10 objects of the same type, like 11 classes, then only the 10 *most recently created* could render in a message.

For example, `{{objects.online_classes}}` renders based on the *date each object was created*, NOT when a person was related to the object. This means that if you just related the *oldest* online class to a person with relationships to 10 other classes, then this class would not render in the list because the 10 other classes were created more recently.

We know this isn’t the easiest to use - thanks for bearing with us as we improve this experience!

## Hide content based on device type[](#hide-content-based-on-device-type)

To conditionally show a component based on the device a customer is using:

1.  Click a component on your canvas.
2.  In the Properties menu, click the *Rules* tab.
3.  Under *Device rules*, click or to hide the content accordingly.
    *   Select to hide the component on screens less than or equal to 600px wide.
    *   Select to hide the component on screens greater than 600px wide.

By default, the preview hides the content you’ve specified. Click to show the content. The hidden content is more opaque when previewing the screen size it should be hidden from:

[![Design Studio visual editor. A heading is hidden on mobile. The preview is for mobile with hide content disabled so the heading is opaque.](https://docs.customer.io/images/design-studio-ve-properties-hide-on-opaque.png)](#fb47b4b4467251c747df2e40c6d9f32c-lightbox)

 Hiding a component hides any elements nested within it

Before you hide a parent component like a box or a section, make sure there isn’t information within it that should remain visible. If you have HTML tags nested within a standard component, those tags will inherit the hide property of the parent standard component as well.

In the layers menu, this icon tells you which components have device rules: .

To remove visibility rules, click the counter-clockwise arrow icon, or select .

### Email client support[](#email-client-support)

The **Hide on** property works for all [email clients that support `@media` queries](https://www.caniemail.com/features/css-at-media/), in addition to Thunderbird.

For email clients that don’t support `@media` queries except Outlook, your emails will fall back to what you defined should be hidden on mobile. In the case of Outlook, your emails will fall back to the desktop version.

## Conditionally display content *within* a component[](#conditionally-display-content-within-a-component)

If you only want part of a paragraph or other text-based component to display based on conditions, you can add liquid logic within the text field.

You can type liquid directly into a text-based component on your canvas or ask the agent to generate the liquid for you.

To check that the email hides and shows the component when you expect, turn on [Preview mode](/journeys/liquid-visual-editor/#preview-liquid).