Using the built-in text editor

You can use the built-in text editor to create your product descriptions, category descriptions, legal information, and payment or pickup instructions. This way you will be able to provide your customers with better-structured and more visually attractive information.

The text editor allows you to format paragraphs, add videos, images and links, change text color, size and font, create lists and tables, and much more. These features will help you improve your Ecwid store design and describe the products and services in a more customer-friendly manner.

Use fullscreen mode

To have more space when working with your text, you can use the fullscreen mode by clicking the Fullscreen icon in the right upper corner of the text editor.

To exit this mode, click the icon once again.

Apply formatting

Applying formatting helps structure your text and highlight important information. You can use quotations to cite product reviews and testimonials.

There are five types of formatting available in our text editor:

• Normal text (Arial, 14px)
• Header 2
• Header 3
• Header 4
• Quote (bracketed text that looks like a quotation).

To change the formatting for a paragraph, place the cursor on the corresponding paragraph, press the ¶ (“Formatting”) button in the left upper corner of the text editor and choose the option you need from the list.

Choose typefaces

The text editor supports bold, italic, underlined, and strikethrough (or crossed out) texts.

All the buttons dedicated to typefaces are situated in the left upper corner on the text editor:

• B (“Bold”) button is for making text bold
• I (“Italic”) button is for making text italic
• U (“Undeline”) button is for making text underlined
• S (“Deleted”) button is for making text crossed out

There are two ways to change the typeface for your text.

First, you can select a piece of text and press the corresponding button in the text editor menu. The typeface for this particular piece of text will change.

Second, you can press the corresponding button in the menu and start typing. The text that you type will have the typeface you chose. To stop using the selected typeface, press the button once again.

Add images

You can upload images from your computer to insert them into your text. Make sure that the images are in a format that Ecwid supports — these are JPG, BMP, PNG and GIF image file formats. The maximum upload image size is 10MB.

To insert an image, click the image icon in the text editor menu and then either drag and drop the file you need or click Choose file, select a file on your computer and click Open.

The file will be uploaded automatically and inserted into the text field. Double click the image if you want to resize it.

Add videos

To showcase your product and help customers make a well-weighted decision or to make your instructions more helpful, you can add a Youtube/Vimeo video to your text.

To add a video to your text:

1. Click the video icon in the editor menu.
2. Enter a video embed code or an external link.
3. Click Insert.

The video will be inserted automatically into the text field.

You can also simply enter the video address or an embed code right into the text field.

Add links

You can add clickable links to the external websites and/or to the pages from your Ecwid store. These links will be opened in the same tab or in the new tab (if you go for this option).

To insert a link into your text:

1. In the text editor menu, click on the link icon, then click Insert link.
   

   

2. Add URL and enter the text.
3. (optional) Tick Open link in the new tab.
4. Click Insert.

You can also select a piece of text and click the link icon in the menu to add a link to this text. To remove the link, select the text and then click Unlink.

To add a link to an image (e.g., to create a banner), follow our instruction on how to add a clickable image.

Create tables

The text editor allows you to create tables. You can additionally edit your table later by adding and deleting rows and columns and adding/deleting the table head. Table cells can contain videos, formatted text, links, images, etc.

To add a table to your text:

1. In the text editor menu, click on the table icon, then click Insert Table.
   

   

2. Choose the number of rows and columns for your table and click Insert.
3. (optional) Add a head and/or additional rows and columns via the editor menu.
4. Fill out the table as you like.

You can also edit your table later. To delete the table, click on the table icon in the text editor menu and click Delete Table or place your cursor to the right of the table and press Backspace.

Customize font settings

Using the text editor, you can set the font color and the background color, as well as change the font size and the font family so that they fit into your store design.

• Press Font Color to choose the color you want your letters to be:
  

  

• Press Back Color to choose the background color for your letters:
  

  

• Press Change Font Size to choose the size for your letters:
  Choose Remove Font Size at the end of the list to go back to the font size that is used by default (it is 14px).
• Press Change Font Family to choose the font family for your letters:
  

  

  Choose Remove Font Family at the end of the list to go back to the font family that is used by default (it is Arial).

There are two ways to apply font settings in the text editor.

First, you can select a piece of text and then press the corresponding button in the text editor menu. The font setting for this particular piece of text will change.

Second, you can press the corresponding button and start typing. The text that you type will have the font setting you chose. To stop using this font setting, just press the button once again to choose another setting.

To use the colors that are not present in the palette, edit your texts in the HTML mode.

Apply text alignment

There are four types of text alignments available in the text editor:

• Align text to the left
• Center text
• Align text to the right
• Justify text (it creates a text that has a fixed width).

To change the alignment, place the cursor on the corresponding paragraph in your text, then press the Alignment button and choose the option you need.

Insert a horizontal rule

If you want to separate paragraphs of your text from each other with a horizontal line, you can use the Insert Horizontal Rule button in the text editor menu.

You can also add several horizontal rules in a row if you want to make the division more evident. To delete a rule, place your cursor after it and click Backspace.

Create lists

The text editor allows you to create two types of lists: unordered lists and ordered list. The first option uses bullets to mark points, the second one uses digits.

• Press Unordered list in the text editor menu to create a list separated by bullet points. To create a new point, press Enter. Press Enter twice to finish the list.
  

  

• Press Ordered list in the text editor menu to create a list with numbers for each of the points. To create a new point, press Enter. Press Enter twice to finish the list.
  

  

Use indentations

You can use indentations to make some of the paragraphs stand out. Indentations allow you to move the position of the left margin of your paragraph.

Once you press the Indent button in the text editor menu, the left margin of your paragraph will move slightly to the right. You can repeat this action as many times as you want. To revert the changes, press Backspace (if your cursor is at the beginning of the paragraph) or Outdent.

Once you press the Outdent button, the left margin of your paragraph will move slightly to the left. This way you can cancel the changes made by pressing the Indent button.

Create collapsible blocks (product descriptions only)

Collapsible blocks (also known as “accordion blocks”) allow you to divide product descriptions into sections that can be expanded or collapsed with just a mouse click or a tap on a touchscreen. This way, your product descriptions will always look neat and easy to navigate while providing your customers with the most detailed item information.

You can add all types of formatted text, along with images, videos, tables, etc., to your blocks.

To add a collapsible block to a product description:

1. In the text editor menu, click on the Collapsible text block button.
   

   

2. Enter the block title. For example, “Fabric & care”.
3. In the block description section, enter the content you want to hide inside the clickable block.
4. (optional) Repeat the process to add more expendable blocks to your product page. For example, you can also have a “Size & fit” block and a “Description” block for the general product overview.

That’s it! Now product information will appear in the form of titles that customers can click on to view the details.

This is how a description with collapsible blocks can look on a product page:

Edit your texts in the HTML mode

For advanced users who want to edit the description source code, the text editor has HTML mode. Click <> in the upper right corner of the editor menu to edit your texts using HTML:

Below you will find some examples of what you can do using the HTML mode.