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 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 images, videos 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.

You can also use the text editor on Ecwid mobile apps for iOS and Android.

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.

Using_text_editor_at_15.12.31.png

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.

Using_text_editor__21_.png

The formatting is applied to the whole paragraph at once, so you need to press Enter to separate the text that you don’t want to be affected.

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

Using_text_editor__24_.png

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.

Using_text_editor_at_15.13.34.png

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.

To fasten the process, you can drag and drop a picture from your computer right into the text field.

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.Using_text_editor_at_15.14.16.png
  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 or files 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.

    Using_text_editor_at_15.14.51.png

  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.

    Using_text_editorat_15.15.32.png

  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:

    Using_text_editor__13_.png

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

    Using_text_editor__6_.png

  • Press Change Font Size to choose the size for your letters:Using_text_editor__18_.png
    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:

    Using_text_editor__3_.png

    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.

You can change the font family, color and size of texts for your entire store using CSS codes or apps from the Ecwid App Market. You can also update the fonts for your Ecwid store and Instant site.

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).

Using_text_editor__23_.png

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.

The alignment is applied to the whole paragraph at once, so you need to press Enter to separate the text that you don’t want to be affected.

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.

Using_text_editor__7_.png

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.

    Using_text_editor_at_15.17.21.png

  • 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.

    Using_text_editor_at_15.16.40.png

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.

Using_text_editor_at_15.18.21.png

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.

Using_text_editor_at_15.18.44.png

You can use indentations not only for your text paragraphs, but for images and videos as well.

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:

Using_text_editorat_15.19.22.png

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

You can create clickable images with links that lead to the external pages or the pages inside your store. E.g., if you are running a sale, you can add a clickable banner to your store front page that will lead customers to the category with the discounted products.

Let’s say you want to add a link to “https://www.ecwid.com/” to an image.

To add a clickable image to your text:

  1. Click the image icon in the text editor menu and upload your image.
  2. Enter the HTML mode and find your image:

    Using_text_editor__20_.png

    What you need is the <img src=”...”> part.
  3. Enter <a href="https://www.ecwid.com/"> right before the <img scr=”...”> part and put </a> after it.

    Using_text_editor__15_.png

    Instead of https://www.ecwid.com/ you should insert into <a href=""> the webpage address that you need.
  4. Exit the HTML mode to check the changes.
Remember to click Save after you are done making changes in the text field.
Was this article helpful?

Awesome! Thanks for your feedback!

Thanks for your feedback!

Sorry about that! What went wrong?
1 out of 3 found this helpful
10
We use cookies and similar technologies to remember your preferences, measure effectiveness of our campaigns, and analyze depersonalized data to improve performance of our site. By choosing «Accept», you consent to the use of cookies.
Accept cookies Decline