Deigning shared assets using visual editor

With the visual editor, you can drag-drop HTML components into the design panel as visual components and design the template according to your requirements without knowing any HTML or CSS.

Create shared asset using visual editor

Follow the steps to create a new shared asset using a visual editor.

Go to Templates > Shared Assets.
Click +SHARED ASSET in the top right corner.
Select Visual Editor.
Name the shared asset.

Click the Create Shared Asset button to open the visual editor.

The visual editor

Opening the visual editor

To start designing your template, go to the Content tab at the top of your screen. This opens the Visual Editor—a straightforward, drag-and-drop interface for building and customizing your template visually. Here, you can add personalizations and recommendations to make your content engaging and tailored to your audience.

The left panel

The left panel in the template editor is organized into three key tabs—Rows, Content, and Settings—each offering tools to structure and style your template effectively:

Rows tab: Defines the basic layout of your template by allowing you to add various row types.
- Each row creates a horizontal section within the template, and you can stack multiple rows to build a complete layout.
- Rows support up to four columns, providing flexibility for organizing content. You can leave columns empty or fill them with elements as needed.
Content tab: Provides a selection of components you can drag and drop into the rows you’ve added.
- As you drag content components (like text, images, buttons, etc.) into place, they automatically adjust to the column width for seamless alignment.
- Selecting a content component displays its specific properties in the Content tab, allowing easy customization of each element.
Settings tab: Manages the overall styling and configuration for the entire template.
- Here, you can set global styles, including template width, fonts, background color, content alignment, and meta information like the title.
- These settings help establish a consistent look and feel across the template, with options to override styles per component if needed.

The center panel

The central Design Panel is where you bring your template to life:

Add text, images, tables, and other components to build your content.
You can personalize your design by adjusting each component’s properties as you go, making it easy to match your brand’s style and tone.

These tabs offer comprehensive control over your shared asset’s structure and appearance, making it easy to create a polished and tailored design.

Design the structure

Drag rows into the design panel to create the foundation of your shared asset. Each row acts as a horizontal section, helping you lay out the overall structure of your template. By stacking rows, you can design the entire layout of your asset, from header to footer, organizing content in a clear, visually appealing way.

Each row can contain up to four columns, giving you the flexibility to arrange content elements side by side. This feature allows you to mix and match elements—like text, images, and buttons—in a single row for a cohesive design. You can add as many rows as needed, regardless of the initial template, allowing for complete asset structure customization.

For instance, the template in the example below has three rows. The first row is divided into three columns, enabling multiple elements to sit next to each other in a structured layout.

Row and column customization options

Customize rows and columns to enhance the structure and style of your template:

Row settings:
- Background color: Set a color for the row’s background.
- Content area background color: Define a background color specific to the content area.
- Background image/video: Add an image or video as the row’s background.
- Vertical alignment: Align content within the row (top, center, bottom).
- Rounded corners: Apply rounded corners to the content area.
- Borders: Add borders around the content area for emphasis.
Mobile optimization:
- Do not stack on mobile: Maintain the row layout as it is on mobile devices.
- Reverse stack order on mobile: Reverse the stacking order for a better mobile layout.
- Hide on mobile: Hide specific rows on mobile for a streamlined experience.
Display Condition: Set custom display conditions for rows to tailor content to specific audiences within a single template.
Column customization:
- Customize columns: Add, delete, or resize columns within a row.
- Column settings:
  - Background color: Set a specific background color for each column.
  - Padding: Adjust padding for spacing around column content.
  - Border: Add borders to define column areas clearly.

These settings enable flexible and responsive layouts, making it easy to create visually appealing and audience-specific templates.

Add components

The Content tab offers various components to design your template through drag-and-drop. Selecting a component in the design panel reveals its properties in the Content tab, with some components also featuring an editor toolbar for more customization. Here’s a concise overview of available components:

Title: Add headings (H1, H2, H3) to organize your content.
Paragraph: Insert rich text with full formatting options (font, alignment, spacing). Supports Liquid merge tags for dynamic content.
List: Add ordered or unordered lists to structure text content.
Image: Upload or link images; edit properties, add URLs, and apply effects.
Button: Add a call-to-action (CTA) button with a customizable label, color, padding, and border.
Divider: Insert horizontal dividers (solid, dashed, dotted) or transparent spacers to separate sections.
Spacer: Add vertical space between components.
Social: Add social media icons (e.g., Facebook, Twitter) with links to your profiles. Customize by adding or removing icons.
HTML: Insert custom HTML for advanced customization if you’re comfortable with coding.
Video: Embed a video using a URL (e.g., YouTube or Vimeo) to auto-generate previews.
Icons: Add multiple icons in one component; use logos, ratings, or other visuals linking to relevant pages.
Menu: Add navigational links for easy access to different site pages.
AI+ Items: Include recommendations powered by AI+, if enabled, for personalized content.
Shared Asset: Include another shared asset within a shared asset.

These components allow you to build a structured, visually engaging shared asset that is ready for personalization and audience engagement.

Configure template settings

Use the Settings tab to define the shared asset’s default style and alignment. If necessary, you can adjust these global settings for specific rows, columns, or individual components.

Content Area Alignment: Set alignment to either left or center for the overall content.
Background Color: Set the message’s default color; it can be customized at the row, column, or content block level.
Content Area Background Color: Define the background color for the content area.
Background Image: Add an image as a background for the content area.
Default Font: Specify the default font for all content components, with overrides available per component.
Link Color: Set a default link color that is adjustable at the component level in the Content tab.
Title: Enter a title.

These settings establish a cohesive look across your template, ensuring consistency while allowing for specific customizations where necessary.

Conditional display of rows

The Display Condition feature in shared assets allows you to create targeted content by defining custom conditions for each row. This means specific rows are shown only to users who meet certain criteria, enabling a single shared asset to reach multiple audiences with personalized content. This feature is handy for cases like localization, where content needs customization based on user demographics or preferences.

Steps to Set a Display Condition:

Use Liquid syntax and personalization attributes to define your condition.
Enter the Liquid expression for the condition in the Before field.
Complete the condition with {% endif %} in the After field.

Example Scenario: Imagine a shared asset for a holiday campaign targeting male and female audiences with tailored promotions.

Row 1 (Female Audience): This row includes content for female customers only, using the condition {% if user.gender == "female" %}.
Row 2 (Male Audience): This row displays content specifically for male customers, using the condition {% if user.gender == "male" %}.

Using the Display Condition feature, you can customize shared assets to deliver relevant content to different audience segments within the same asset.

Include links

Shared assets can include various links, enhancing engagement by allowing users to interact directly with content. Link click activity is tracked in the shared asset report.

Supported link types:

HTTP: Example: http://www.example.com
HTTPS: Example: https://www.example.com
Mailto: Opens the default email app to send an email. Example: <a href="mailto:someone@example.com">Send email</a>
Tel: Initiates a phone call. Example: <a href=”tel:+1954123555”>Call us</a>

SMS: Opens SMS to send a text. Example: <a href="sms://+14035550185">Send SMS</a>

Deep links: Links for mobile users.
Dismiss: Used in Popup templates to add a dismiss action for content rows.

Comments for collaboration

The Comment icon lets you add or view comments within the shared asset. This feature is ideal for collaborative work, enabling team members to share feedback and make suggestions on specific elements.

Click on the comment icon to add, edit, or resolve comments. This feature supports streamlined team collaboration.

Edit history

You can undo or redo up to the last 15 changes or use the History Timeline at the bottom right corner of the screen to access and restore earlier versions of your shared asset.

Each entry in the History Timeline provides:

Change Type: An icon that represents the type of content modified (e.g., text, image).
Description: A summary of the change made.
Timestamp: The exact time the modification occurred.
Highlighting: Selecting an entry highlights the associated row or content area, making it easier to locate changes.

Note: The edit history is reset if you close and reopen the shared asset, so please make sure to finalize or review changes before closing.

Previewing shared assets and associated templates

In the Properties tab for your shared asset, you’ll find a convenient way to preview how it appears both individually and within templates that use it, all within the same screen.

This asset: Select this option to view the shared asset independently, allowing you to focus solely on its design and content.
Email template: Select this option to see how the shared asset looks when embedded within any of its associated templates. You can choose from a dropdown list of templates, eliminating the need to navigate away to each template separately.

This streamlined preview functionality makes it easy to assess and refine how your shared asset will appear across various templates from one place. In the preview panel, you can also toggle between Desktop, Tablet, and Mobile views to ensure consistency across devices.