# Overview The Unified Content Editor lets you create and design simple, efficient, and visually appealing email templates. You can create responsive, personalized, and brand-compliant emails, ensuring a better experience and engagement. This guide will walk you through the different features of the UCE, including product blocks, customization options, and how to save and reuse content across emails. #### Key Features The UCE offers a range of features to help marketers build effective email templates. Some of the key features are: - **Product Display**: Display products in emails by selecting them directly from your catalog or from users' abandonment carts. - **Customization Options**: Easily adjust text, background colors, images, and more to match your brand. - **Responsiveness**: Ensure your email looks great on desktop and mobile devices. - **Personalization**: Include personalized content based on customer data, like product recommendations or browsing behavior. #### Use Case [block:parameters] { "data": { "h-0": "**Use Case**", "h-1": "**Efficient Email Template Design for Seasonal Campaigns**", "0-0": "**Scenario:**", "0-1": "An e-commerce brand launches seasonal email campaigns, targeting different customer segments with specific offers and promotions.", "1-0": "**Problem:**", "1-1": "Manually designing and customizing each email for the specific segment and season is time-consuming and can lead to inconsistencies.", "2-0": "**Solution:**", "2-1": "Using the Unified Content Editor, the brand creates a responsive, customizable master template that can be easily adapted for different segments and seasonal promotions. Product blocks, personalized content, and brand-compliant elements are integrated for efficient updates.", "3-0": "**Example:**", "3-1": "The brand modifies the product blocks and seasonal imagery within the master template, and all targeted campaigns (e.g., Winter Sale, Summer Clearance) are automatically updated with the latest offers and visuals.", "4-0": "**Benefits:**", "4-1": "✔ Quick and easy template updates for seasonal campaigns. \n✔ Personalization and branding consistency across multiple segments. \n✔ Enhanced customer engagement with visually appealing, targeted emails." }, "cols": 2, "rows": 5, "align": [ "left", "left" ] } [/block] # Set Up a New Email Template You can create various email campaign templates tailored to specific marketing needs. To start, create a new email template in the Unified Content Editor. [block:image] { "images": [ { "image": [ "https://files.readme.io/0877fee8bcbf4b04b862d49166d5e158f8923c6e4b18718d14b8b775d327a41a-2025-02-25_04-45-12.gif", "", "Create Template" ], "align": "center", "sizing": "80% ", "border": true, "caption": "Create Template" } ] } [/block] 1. Log in to your Netcore CE dashboard. 2. Navigate to **Content** > **Email** > **Create New Template** to create a new template. 3. Enter **Template's name**, **Select/Add category**, and Select **Unified editor**. 4. Click **Save & Next** to create the template. # Unified Content Editor Follow this to create templates from scratch using the **Editor**.

5. Layout

# Layout It helps you arrange basic elements, such as text, images, or buttons, in a visually appealing way. Refer to the table below for the various layouts for your message. You can drag and drop any layout on the canvas. The right pane has two sections: **General** and **Style**, each offering different options. [block:image] { "images": [ { "image": [ "https://files.readme.io/a884caee2e3401b262e6cf6e5b860e252d7121aaff19a17d51cc1a3a300b9cc9-2025-02-26_13-10-05.gif", "", "Edit Template with **General** and **Style** Options" ], "align": "center", "sizing": "80% ", "border": true, "caption": "Edit Template with **General** and **Style** Options" } ] } [/block] Refer to the table below to learn more about the **General** option of the **Main page**. Click on the blank space on the canvas to open up this section [block:parameters] { "data": { "h-0": "Options", "h-1": "Field Name", "h-2": "Description", "0-0": "**General**", "0-1": "**Color**", "0-2": "It allows you to set the background color of the email body. For Example, HEX code:**#eef4e9**", "1-0": "", "1-1": "**Layout**", "1-2": "It allows you to set the width of the email layout. Available options are:

Width 500px
Width 600px
Width 700px \nRecommended width is **Width 700px**.", "2-0": "", "2-1": "**Mobile display setting**", "2-2": "It allows users to open a desktop view on mobile devices without any changes. Toggle the button to show the same email content of a desktop in a mobile view.", "3-0": "**Style**", "3-1": "**Border Settings**", "3-2": "Allows you to adjust border thickness, style, color, and corner radius with Border Settings.
- **Border thickness**: It sets the width of the border in pixels.
- **Border sides**: Applies the border to all four sides of the email body.
- **Border style**: Specifies the line style of the border.
- **Border radius**: Controls the roundness of the border corners.
- **Border radius**: Defines the color of the border." }, "cols": 3, "rows": 4, "align": [ "left", "left", "left" ] } [/block] Refer to the table below to learn more about **General** options. | General Options | Description | Elements Available | | :-------------------- | :--------------------------------------------------------------------------- | :-------------------------------------------------------------- | | **Padding** | Adjust the spacing within the template. | Heading, Paragraph, Image, Divider, Spacer, and Social. | | **Alignment** | Align the selected element within the template. | Heading, Paragraph, Image, and Button. | | **Opacity** | Control the transparency within the template. | Heading, Paragraph, Image, Divider, Spacer, Button, and Social. | | ** Border thickness** | Adjust the thickness of the selected element within the template. | Spacer, Image, Divider, and Button | | **Responsive** | Select whether you want to hide the element on mobile devices or a computer. | Divider | Refer to the table below to know more about **Style** options. [block:parameters] { "data": { "h-0": "Style Options", "h-1": "Descriptions", "h-2": "Available for", "0-0": "**Background**", "0-1": "Allows you to set background color or image.", "0-2": "Heading, Paragraph, Image, and Social", "1-0": "**Gradient Picker**", "1-1": "Allows you to create gradual changes of color within the template using the **Gradient Type** and **Gradient Direction**.**Gradient type**: It refers to the specific manner in which colors transition within a gradient.
- **Radial**: Radiates outward from a center point in a circular pattern.
- **Linear**: Transitions in a straight line (horizontal, vertical, or diagonal).
- **Repeat Radial**: Repeats the radial pattern across the element.
- **Repeat Linear**: Repeats the linear pattern along the specified direction.
- **Border Thickness**: Adjust the width of the border.
- **Border Style**: Choose from Solid, Dash, or Dotted for different border appearances.
- **Border Radius**: Determine the curvature of the border's corners.
- **Border Colour**: Select the colour of the border.

6. Basic Elements

# Basic Elements You can start your template with basic elements like text, image, divider, spacer, etc. [block:image] { "images": [ { "image": [ "https://files.readme.io/6bdb0feec39da056a0a685e3567d51a97bb2a519e9aaeffb4783d4e7986a0354-image.png", null, "Create your Email Tempate using Basic Elements" ], "align": "center", "sizing": "40% ", "border": true, "caption": "Create your Email Tempate using Basic Elements" } ] } [/block] Refer to the table below to know the description of basic elements. [block:parameters] { "data": { "h-0": "Section", "h-1": "Elements", "h-2": "Descriptions", "0-0": "**Basic Elements**", "0-1": "**Heading**", "0-2": "Select this option to add a heading to your template.", "1-0": "", "1-1": "**Paragraph**", "1-2": "Select this option to add a message to your template.", "2-0": "", "2-1": "**Image**", "2-2": "Select this option to insert an image into your template. Customize your template's visuals with these image editing tools

**Add Image**: Insert an image into your template.

**Image Size**: Adjust the size of the inserted image.

**Link Image to URL**: Make the image clickable by adding a URL, directing users to a specific page when they click on it.

**Open Redirect URL in**: Choose whether the linked URL opens in a new or similar tab.

**Personalize Image**: Customize the image with personalized content.", "3-0": "", "3-1": "**Video**", "3-2": "Select this option to insert a video into your template. Videos help make your message more engaging and interactive. Customize your template's visuals with these image editing tools

**Video URL**: Add the URL of the video you want to embed (for example, **YouTube**, **Vimeo**, or **MP4 link**).

**Thumbnail**: Upload an image to display as the video thumbnail before playback.

**Alternative Text for Video**: Add alt text to describe the video for accessibility and cases where the video cannot be displayed.

Playback Options (availability may vary depending on video type). \n \n👍 **Note**: Playback options depend on the video type. **Vimeo videos** support all controls, while **YouTube** and **MP4** videos support only the play button.", "4-0": "", "4-1": "**Divider**", "4-2": "Select this option to separate content sections in your template.", "5-0": "", "5-1": "**Spacer**", "5-2": "Select this option to add a spacer to your template.", "6-0": "", "6-1": "**Button**", "6-2": "Select this option to integrate a button into your template.

**Redirect URL**: Set the destination URL to which the button will redirect when clicked.
**Button fill colour**: Choose the background color for the button to enhance visual appeal.
**Button type**: Select the shape and style of the button. The options include:
1. Rectangle filled: A solid rectangle button.
2. Rectangle outline: A rectangle button with an outlined border.
3. Rounded rectangle outline: A rectangle button with rounded corners and an outlined border.
4. Rounded rectangle filled: A rectangle button with rounded corners and a solid fill.
**Button size**: Adjust the overall dimensions of the button. The options include:
1. Small: A compact button size.
2. Default: The standard button size.
3. Medium: A slightly larger button size than the default.
4. Large: A significantly larger button size.
5. Custom size: Define the custom width and height for the button.

", "7-0": "", "7-1": "**Social Links**", "7-2": "Select this option to add social media links to your template. You can add up to 16 icons. \nClick on the box icon to enable or disable the display associated with each social media icon. \n \n

**Icon size**: Customize the appearance of the icons by selecting the desired size (small, medium, large, or custom size) from a dropdown menu.

**Icon style**: Choose the style of the icons (squares, circles, or rounded) by selecting an option from a dropdown menu.

", "8-0": "", "8-1": "**HTML block**", "8-2": "You can add your own HTML code to templates created in the editor. This lets you customize the template further, adding unique elements unavailable through the editor’s default features.", "9-0": "", "9-1": "**Table**", "9-2": "You can customize the number of rows and columns, set border styles, and add solid or gradient backgrounds. You can also alternate row colors and change the header’s font, color, and alignment for better design." }, "cols": 3, "rows": 10, "align": [ "left", "left", "left" ] } [/block]

7. Widgets

# Widgets > 👍 Playback options depend on the video type. Vimeo videos support all controls, while YouTube and MP4 videos support only the play button. The dashboard's **Widgets** allow you to manage coupon codes and products. You can upload, sort, and track coupon codes with alerts while adding products with their name, price, and CTA for easy display and management. Widgets allow you to create highly interactive and dynamic content, transforming your email campaigns into engaging experiences. With our **Editor**, you can easily add widgets to your emails, enabling actions like filling out forms or browsing products directly within the email. This interactivity enhances customer interaction and boosts engagement, making your campaigns more effective and impactful. Click [here](doc:amp-widgets) for a detailed overview of the various widgets available when creating your email. [block:image] { "images": [ { "image": [ "https://files.readme.io/47a55be216a35b862208fe14ff64368a70670abca8efd85fac4844d94ce4413c-Emailuce_Mozi_Widgets.png", "", "Add Product using Widgets" ], "align": "center", "sizing": "40% ", "border": true, "caption": "Add Coupons and Product using Widgets" } ] } [/block] | Section | Elements | Description | | :---------- | :---------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Widgets** | **Coupons** | This helps marketers upload, sort, and share email coupon codes. It alerts users when codes run low or close to expiry and provides real-time tracking and insights for easier management. | | | **Product** | You can add different products by entering their name, price, and call-to-action. It helps organize and manage product details easily for better display and user interaction. | ## Coupons You can add a coupon to your email template to enhance the personalization and effectiveness of email marketing campaigns. This allows marketers to include dynamic or static coupon codes directly within their email templates, providing targeted incentives to their audience. You can also generate a [Shopify coupon code](https://cedocs.netcorecloud.com/docs/create-custom-coupon). Refer [here](https://cedocs.netcorecloud.com/docs/coupon) to learn more about coupons and how to set them up. Locate the **Coupon** block from the context menu in the template editor. Drag and drop the Coupon block into the desired position within your email template. A configuration panel appears on the screen, allowing you to set up the coupon details. ### Basic Settings [block:parameters] { "data": { "h-0": "Basic settings", "h-1": "Descriptions", "0-0": "**Source**", "0-1": "Select whether your coupon type is **Generate a Shopify coupon code** or **Uploaded coupons in Netcore**.", "1-0": "**Price rules**", "1-1": "Select your preferred price rule from the dropdown. This field is displayed when **Generate a Shopify coupon code** is selected. Refer [here](https://cedocs.netcorecloud.com/docs/create-custom-coupon#price-rules) to understand the price rules.", "2-0": "**Type**", "2-1": "Select **Static** or **Dynamic** as your preferred coupon type.

[Static](https://cedocs.netcorecloud.com/docs/coupon#static-coupon-code) is a single, common code that is shared with multiple users. Everyone who uses the code receives the same discount.
[Dynamic](https://cedocs.netcorecloud.com/docs/coupon#dynamic-coupon-code) is a unique code created for each user or transaction. Every code offers the same discount and can be used by unique users.

" }, "cols": 2, "rows": 3, "align": [ "left", "left" ] } [/block] ### Layouts settings | Layouts settings | Descriptions | | :--------------- | :--------------------------------------------- | | **Padding** | Adjust the spacing within the template. | | **Alignment** | Align the selected coupon within the template. | ### Coupon Text | Options | Description | | :-------------- | :------------------------------------------------------------------------------------------------------------------- | | **Font style** | Choose the font style for the coupon text from the dropdown list. | | **Font size** | Set the font size for the coupon text. | | **Text color** | Select the color of the coupon text using the color picker or by entering a hex code. | | **Text format** | You can use the formatting options to make the text bold, italic, underlined, strikethrough, or to clear formatting. | ### Coupon Styles | Options | Description | | :------------------- | :----------------------------------------------------------------------------------------------------------- | | **Block background** | Choose a color for the coupon block using the color picker or by entering a hex code. | | **Border radius** | Enter a value (usually in pixels) to set how rounded the corners should be. | | **Border style** | Select the desired border style from the dropdown menu to apply it to the coupon block. | | **Border color** | Select a color or enter a hex code to specify the border color. | | **Border thickness** | Enter a value (usually in pixels) to set the border's thickness. A higher value results in a thicker border. | ## Product Products can be directly added to email templates via the UCE. Locate the **Product** block from the context menu in the template editor. Drag and drop the **Product** block into the desired position within your email template. A configuration panel appears on the screen, allowing you to set up the product details. ### Video Tutorial Refer to the video below to understand how to use Product Picker in UCE on the Netcore CE dashboard. [block:html] { "html": "" } [/block] #### Basic details [block:image] { "images": [ { "image": [ "https://files.readme.io/5ebbe4f7cdbdeff55207075abcef857dba8c43ebb56e011a5623e014c0350aa3-image.png", null, "" ], "align": "center", "sizing": "30% ", "border": true } ] } [/block] [block:parameters] { "data": { "h-0": "Options", "h-1": "Descriptions", "0-0": "**Block Layout**", "0-1": "This displays a layout preview of how the product will appear in block format. \n \n**Note**: Selection of the second layout disables the list view in the product alignment. ", "1-0": "**Dynamic**", "1-1": "This displays products that update automatically based on predefined rules or triggers. ", "2-0": "**Static**", "2-1": "This displays the same products to all recipients. ", "3-0": "**Display products by**", "3-1": "These rules can be based on:

[Recommendations](https://cedocs.netcorecloud.com/docs/recommendations-in-email-through-unbxd-recs): Products tailored to the user’s preferences or behavior.
[Collection](https://cedocs.netcorecloud.com/docs/email-personalization#product-collection-in-emails-through-journey-20): Specific products/items shown in the collection with respect to the events to analyze user behavior, segment audiences, and create targeted campaigns.
[Merchandising triggers](https://cedocs.netcorecloud.com/docs/merchandising-triggers): Rules like **Price Drop** or **Stocks Running Out**.

You cannot use all product rule combinations in your template product block. Specifically, you cannot use both Collection and Merchandising Event rules together because they are trigger-based rules." }, "cols": 2, "rows": 4, "align": [ "left", "left" ] } [/block] ### Display Products | Options | Descriptions | | :----------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Product details to display** | This is a mandatory step to select the product details to include. You can choose up to seven details such as name, price, or description. You can also rearrange the order of the attributes as per your requirement. | | **Events** | Specifically, analyze user behavior, segment audiences, and create targeted campaigns in your app or website. Events include add-to-cart, product purchases, content views, or other actions. | | **Websites** | Source to collect and analyze the data and offer product recommendations to end users. This website link has your product catalog that you want to show your users in recommendations. This field is available only when you select **Recommendation** in **Display products by** dropdown. | | **Recommendation type** | Choose the type of product recommendations, such as personalized or curated suggestions, to display in the email. This field is available only when you select **Recommendation** in **Display products by** dropdown. | | **Button text** | Customize the text that appears on the call-to-action button in your email. | | **Button URL** | Select the destination URL for the button, directing users to a specific page or action. | | **Product header** | Add the top part of an email that shows important details about your **Total products**, **Total discount amount**, **Total retail price difference in percentage**, and other pricing information. | | **Product footer** | Add a footer in email that shows important details about your **Total Sales price difference**, **Total discount percent**, **Total discount amount**, and other pricing information. | | **Font style** | Choose the font type to define the text appearance in your email template. | | **Font size** | Select the size of the text to adjust its readability and visual hierarchy. | | **Alignment** | Align the text to the left, center, or right within your email for the desired layout. | | **Text Color** | Select the color of the text using a color picker or hex code to match your brand. | | **Text format** | Apply text formatting options like bold, italics, or underline to emphasize specific content. | ### Product Styles | Options | Description | | :------------------------ | :--------------------------------------------------------------------------------------------------------------------- | | **Block background** | Choose a color for the product block using the color picker or by entering a hex code. | | **Border radius** | Enter a value (usually in pixels) to set how rounded the corners should be. | | **Border style** | Select the desired border style from the dropdown menu to apply it to the product block. | | **Border color** | Select a color or enter a hex code to specify the border color. | | **Border thickness** | Enter a value (usually in pixels) to set the border's thickness. A higher value results in a thicker border. | | **Card Style** | Customize the appearance of product cards with background, borders, and spacing options to enhance visual appeal. | | **Image display options** | Choose product images that are displayed, such as in a grid, carousel, or individual format, to fit your email layout. | ### Layouts settings [block:parameters] { "data": { "h-0": "Layouts settings", "h-1": "Descriptions", "0-0": "**Padding**", "0-1": "Adjust the spacing within the template.", "1-0": "**Alignment**", "1-1": "Align the selected product within the template.", "2-0": "**No of product**", "2-1": "Select the number of products to include in the email from a dropdown menu. \nYou can select upto **10 products** to be displayed in a row.", "3-0": "**Image(s) in a row**", "3-1": "Specify the number of product images to display per row in the email from a dropdown menu.", "4-0": "**Product alignment**", "4-1": "You can select how products are displayed in the email: grid (rows and columns) or List (vertically arranged products)." }, "cols": 2, "rows": 5, "align": [ "left", "left" ] } [/block] > 📘 Important > > Make sure you preview and verify the layout of the template before sending out the Email. This ensures that your message looks right on all devices and screens.

# Saved Blocks Whenever you click on the **Favourite** icon, a **Saved block** display appears, allowing you to create and save **Saved blocks**. These reusable blocks are called **Global Widgets** (Blocks). Edit one, and the changes reflect everywhere it is used. When you regularly send email campaigns to customers about new products, sales, or promotions. The **Saved blocks** in the email editor allow you to create reusable sections (blocks) of your email templates. This can significantly save time and ensure consistency across multiple campaigns. - Save and reuse blocks across multiple campaigns, changing only the product details. - Ensures consistent design and structure across all campaigns. - Speeds up the email creation process, focusing only on content updates. ## Save a Block On the Unified Content Editor (UCE), locate the block you wish to save. 1. Hover over the block to display the toolbar options: Add, Copy, Delete, Save 2. Click the Star Icon (Save). This opens the Save Block modal with the following fields: 1. Select from **Header**, **Body**, **Footer**, or **Other**. 2. Enter a unique name. Allowed characters are: Letters (A–Z, a–z), Numbers (0–9), Underscore (\_), Hyphen (-), Spaces. The **Save** and **Cancel** buttons appear at the bottom of the modal. 3. Click **Save**. The block will be stored in the **Saved blocks** section and tagged by type. [block:image] { "images": [ { "image": [ "https://files.readme.io/fd02d014c9da58676467ef169c0789c998dcb79023233b4e73a755b25fe66a8e-SaveBlock.gif", "", "Save a Block" ], "align": "center", "sizing": "80% ", "border": true, "caption": "Save a Block" } ] } [/block] ### Why Use Saved Blocks? Marketers often reuse elements like headers and footers. Creating them each time is repetitive. Saved Blocks let you: - Create a block once - Use it across all campaigns - Update it in one place and apply changes everywhere ## Edit a Saved Block Drag and drop the saved block on the canvas. There are two options here: 1. Edit across all templates 2. Unlink and edit ### Edit Across All Templates This option updates the block in every campaign/ template that uses it. You can also view where it is used before confirming the change. ### Unlink and Edit This option updates apply only to the current campaign. You need to re-save it under a new name. Here, you can edit the block using **Genral** or **Style** settings. Refer here to know more about [basic elements and settings](https://cedocs.netcorecloud.com/docs/create-email-template-with-uce#basic-elements). ### Example: Seasonal Banner **Use Case**: A marketer wants to create a seasonal promo banner for Diwali sales. 1. Design the promo block with images, offers, and CTA. 2. Click **Save** and name it “Diwali Promo – 2025”. 3. Reuse across all emails for that period. Midway, update the CTA text. 4. Select **Edit Across All Templates** > **Confirm**. All your campaigns are updated instantly. *** 9.Click **SAVE & CLOSE** to save the template. # Troubleshooting & FAQs ### Q. My email template does not look the same on mobile and desktop. What should I do? A. Ensure that your template is responsive! In the UCE, you can check how your template looks on both desktop and mobile devices. If something looks odd, try adjusting the layout or checking if there is an option to hide certain elements on mobile. Look for the **Responsive** setting and ensure everything looks good on both screens. *** ### Q. How can I make my email template look more attractive? A. You can make your template more eye-catching by using features like background colors, images, and cool fonts. You can also add product images and buttons to make it easier for people to click. Use the **Style** options to add a background, shadow effects, or borders around sections to make everything stand out! *** ### Q. The button in my template does not work when I click it. What is wrong? A. It could be because the button's action is not set correctly. When editing the button, make sure you have selected what you want it to do—like opening a webpage or closing the message. Double-check the button settings to make sure everything is linked correctly. *** ### Q. My email template looks different after I save it. Why is that? A. Sometimes, changes made to the layout or elements can look different depending on where they are viewed. Make sure to preview your email on both desktop and mobile before sending it. Also, check if anything like text size or image alignment got shifted. If needed, make adjustments to fix it.