Adding tabs to product descriptions

In Ecwid, you can create tabs in the product description to organize the text according to your needs. You can do it with the help of the Tabber: Product Description Tabs app from the Ecwid App Market. This app allows you to design your tabs and add them to the product descriptions using special shortcodes.

Installing the app

To install the Tabber app:

1. From your Ecwid admin, go to Apps → App Market.
2. Find the Tabber: Product Description Tabs app.
3. Click Add payment method and buy under the app name and pricing.
4. Enter your payment information.

After you do it, the app will be available in My Apps and in Settings in your Ecwid admin. It has a 14-day free trial for you to test all the features.

Designing the tabs

To design your tabs, go to Settings → Tabber and modify the elements as you like. Click on the question marks next to the elements for additional information. The resulting design will be used for all the tabs in your store.

You can choose the theme and layout for the tabs, including their style on mobile devices. Tabs are responsive, so they adapt to the screen width. You can also set colors for your text, for its background, and for the tab icons.

To set the colors for tab elements:

1. Click on the colored square next to the element in the list so that it becomes active.
2. Choose the color you need in the color chooser tool (it is situated in the upper right corner of the app) or enter an existing color code into the special field below the palette.
3. (optional) Adjust color opacity using the opacity scale.

There is a preview available to trace the changes in the design and color of your tabs:

Do not forget to click Save after you are done designing your tabs.

Adding the tabs

To add tabs, you need to manually section the descriptions of your individual products into tabs with special shortcodes. This way, you can have different tab names and different tab count for different products while the tab design remains uniform.

You can copy the shortcodes from the app:

To add tabs to the product description:

1. From your Ecwid admin, go to Catalog → Products.
2. Choose a product from the list.
3. Go to the Description field.
4. Enter [tab name='tab one'] where you want your first tab to start.
5. Change the “tab one” part into the name of the first tab for this product.
6. Enter [tab name='tab two'] where you want your second tab to start.
7. Change the “tab two” part into the name of the second tab for this product.
   

   

8. Repeat the process if you need. You can add up to 5 tabs.
9. (optional) Add [endtab] where the last of your tabs ends in case you need some text to be displayed below the tabs in the description section.
10. Save the changes.

To add tabs to other products in your store, repeat the procedure.

Read more about shortcodes and the overall app setup on the app developer website →