1

Welcome to Design Studio!

Design Studio is a flexible email design system that helps you create beautiful, responsive emails faster than ever before.

In Design Studio, you can:

• Build emails with our visual, block-based editor. You can also modify the HTML/CSS as you see fit by switching to the code editor!
• Build emails using reusable blocks. We offer out-of-the-box blocks called standard componentsA pre-built block that helps you build beautiful, engaging messages as quickly as possible in Design Studio.. You can also create your own reuseable blocks called custom componentsA custom block of code with content and properties you can reuse across messages made in Design Studio..
• Assign global styles that span your emails and override them for individual messages.
• Collaborate with teammates by sending test messages, requesting feedback, and more.

Check out our roadmap for what we’re developing and submit any feedback through Design Studio!

Build your emails visually or with code

In Design Studio, every email has two editors: the visual editor and code editor.

• In the visual editor, you can drag and drop components onto the canvas to build an email. Click a component to open the Properties menu and style it. Open the Personalization panel to add liquid.
• In the code editor, you can access and modify the HTML/CSS and add components too. It comes with a set of developer tools to help you validate your code, manage content, and test accessibility.

If you’re creating an email from scratch, start with our visual editor! If you need to import an email or paste in HTML, use the code editor.

Reusable content and formatting

We offer two types of components to help you scale your design system and reuse content across emails:

• Standard components are out-of-the-box elements commonly needed in emails: headings, paragraphs, columns, buttons, etc.
• Custom components are elements you code from scratch to create custom, reusable content across your emails.

You’ll find available components in the Insert menu of the visual editor.

How to localize emails

Currently, you can’t localize Design Studio messages, but you can accomplish this with message duplication and branching in a campaign:

1. In Design Studio, create your message in one language.
2. Duplicate the message for each language variant.
3. Translate each message.
4. In your campaign, add a multi-split branch to your workflow.
5. Create as many paths as there are language variants. Add a condition to each path that filters users based on how you identify people’s lanuage preferences.
6. Add an email block to each branch then connect the appropriate Design Studio message to each one.

This campaign is now set up to send the correctly translated, Design Studio email based on people’s language preferences.

Assign global styles

Use Styles to create emails in Design Studio that follow your brand guidelines!

1. Add your brand’s colors, fonts, spacing, and radii.
2. Assign your styles to text, links, and buttons. Your components will automatically inherit these styles!

Global styles apply to emails made in Design Studio within a single workspace.

Review your emails

We offer a number of tools to help you review your emails so you can be confident your recipients are getting the best email possible.

Preview settings

While editing a message in Design Studio, you can preview:

• Desktop vs mobile views
• Light vs dark mode
• With images blocked
• For different visual abilities (color blindness)
• With sample data to ensure your liquid renders personalized information

Send a test message

Send a test message to yourself and colleagues to ensure your message looks as you’d expect in inboxes.

Collaborate with teammates

Collaborate with teammates to make sure you’re aligned on how you’re marketing to your leads and customers.

Teammates with access to Customer.io can submit rounds of feedback and manage versions.

Teammates without access to Customer.io can be sent an export or screenshots with your latest edits.

Connect to an automation

Connect your Design Studio message to a campaign, broadcast, or transactional message to start sending. Currently, you can connect one Design Studio message to one automation.

If you make changes to a message after connecting it, you then have to publish changes to update your connected automations.

Coming soon

We’re actively working on improving Design Studio to make the best editing experience possible. Soon, you’ll be able to:

• Save components without having to code
• Set up dark mode for your message without having to code
• Responsiveness: control what content and styles appear across device dimensions
• Dynamic content: conditionally display data without code