How to set product description

Last updated

Product description is usually used to add information about product, emphasize its advantages, list its characteristics or to show products features. All these things can be added to the product in the product description section, which will show on the product details page.

Actually, the description can be used not just to show the text, you can also add videos, images and animated elements that will help you show your product in a more favourable way.

To make the process of formatting product description simple, we have a text editor in the “Description” field. It allows you to add texts and format them in the convenient way like in the text editor that you use everyday. Using it you can make paragraphs, add images, change colors, sizes and fonts of the text, etc. In other words, you don't need to know HTML coding for creating descriptions with styles you want. 

Main features of Ecwid Text Editor

Our text editor offers you the following feature which you should certainly try when making product descriptions:

  • Use fullscreen mode.
    If you need more space when you work with a text, you can open the text editor in the Fullscreen mode. To do that, click "Fullscreen" icon in the right upper corner of the editor.
  • Upload images from your computer.
    If you want to add images to a product description, you don't need to care about where to store them online. You can upload images to product description straight from your computer and they will display in your storefront.
  • Add videos easily.
    Our text editor can identify what kind of link you paste and display it accordingly. To add a video, you just need to paste the link to it. Please, see more instructions in the article about products
  • Format quotes.
    You can format quotes very nicely with no efforts from your side. Just add the text and select "Quote" in the Formatting drop down in the left upper corner.

Where can I set product description for the product list page in List view?

Ecwid shows the same description on product detailed page and on the products list page in the List view. It just takes the first 300 symbols from “Description” (excluding HTML tags) and shows this text as a short description in the List view. 

This 300 symbol limitation can cause the breaking in the words or the situation when just one or two letters of the next description sentence is shown. 

The good news is that you can control this behaviour a bit. You can define which part of full description will be used as a short description with the help of  <!--CUT--> code delimiter.  This code will split your description in two parts – first (excluding HTML tags) will be used as a description of the product on the list page and second, which won’t be shown there. 

NOTE: The <!--CUT--> is the service code and should be added into the description in “HTML” mode. In other case, it will be shown in description as simple text and will not affect the description behaviour anyhow.

You can also add completely different descriptions for the products list and product detailed page with help <!--CUT--> code. Use the following construction in the "HTML" mode:

<div style="display:none">

...Place short description here... 

...Place full description here...

This feature is based on the fact that the short description always excludes all tags which means that the part of the short description <div style=”display:none”> which should hide it, will be removed, and text inside this block will be shown as usual. At the same time, full description shows all HTML tags and, therefore, text inside “<div style="display:none">” block will be hidden. 

This ability can be used for showing product summary on the list page and totally different detailed description on the product detailed page.

How to edit description in HTML mode?

  • For advanced users who know the HTML and want to edit description source code and add HTML-tags, our text editor has “HTML mode”. To switch to the advanced description editing mode, click small “HTML” button in the right top corner of “Description” text area.

    In HTML mode you see the source code of the description and you can change it as you need it. After you make any changes, remember to click “Save” button. For example, using HTML code you can split description content to several tabs.
Back to top
Was this article helpful? 2 out of 5 found this helpful