Organizing product description with tabs and blocks

When you add a detailed product description, it's a good idea to structure content into meaningful blocks or tabs. Arranging content into sections makes it easier for customers to read the information and quickly find what they need.

There are several ways you can visually organize content for product description: with collapsible blocks in the built-in text editor, with the Tabber app from the Ecwid App Market, and with a custom solution. 

Adding collapsible blocks to product descriptions

Once you add a product description, it’s time to organize text for a better readability. The easiest way to group content by topic is by using collapsible blocks that are available in the Ecwid text editor. Sections that you create can be expanded or collapsed with just a click. This allows customers to selectively explore detailed information without overwhelming the page. 

To add collapsible blocks in product descriptions:

1. From your store admin, go to Catalog → Products.
2. Click +Add New Product, or select an existing product.
3. In the text editor, select the content that you want to group in a first block.
4. On the right side of the edit bar, click the Collapsible text block icon:
   

   

5. Enter the block title. For example, “Features”:
   

   

6. Repeat the process to add more expendable blocks to your product page. For example, you can add the “Material”, “Care”, “Size” blocks.
7. Click Save.

Adding tabs to product descriptions with the Tabber app

Instead of collapsible blocks, you can create tabs with the help of the Tabber: Product Description Tabs app from the Ecwid App Market. This app allows you to add up to 5 tabs to your product description with special shortcodes. For each tab, you can choose colors of tab background and text.

To create tabs in the product description with the Tabber app:

1. From your Ecwid admin, go to Apps → App Market.
2. Find the Tabber: Product Description Tabs app and click Install, then Open.
3. In the Shortcodes for the tab preview on the right, specify names for each tab. Instead of “tab one”, enter the title for the first tab, instead of “tab two”, enter the title for the second tab, and so on. You can add up to five tabs:
   

   

4. Delete unnecessary tabs if needed:
   

   

5. Instead of the “tab one content”, enter the description that will appear at the first tab:
   

   

6. Repeat changing “tab two/three/four content” for your custom content. 
7. Click Apply under the Shortcodes for the tab preview to see how tabs will look.
8. To change colors for description and title text, click on the colored square of the corresponding element and then select the color with the color picker in the top right corner. Let’s change the color of an active tab:
   

   

9. (optional) Adjust color opacity using the opacity scale.
10. Click Save.
11. To add tabs to the product description, copy the shortcode from the Shortcodes for the tab preview section on the right.
12. Go to Catalog → Products and choose a product from the list.
13. In the Description field, enter the code you copied where you want tabs to appear:
    

    

14. Click Save.

Note that you cannot preview your tabs in the product description editor. To view them, open the product in your storefront after you have inserted the shortcodes and saved the changes.

To add tabs to another product, repeat the steps above. You can locate the app in your admin by clicking Settings → Tabber.

Adding custom tabs to product description

When you are looking for a unique feature for your store, you can ask the Ecwid Customization team to come up with a solution tailored to your business.

For example, the Customization team can craft a tool to create tabs based on your product attributes such as Brand, Model, Color, Dimensions, Weight, and so on.

The price for development depends on your Ecwid subscription and hours of work. You can submit your request to get a quote.