How to add tabs in product description

Last updated

In Ecwid you can create tabs in product description to organize the text the way you need.

Tabber App

You can easily add tabs to product description with the help of Tabber app from the Ecwid App Market.

Tabber allows to easily add tabs to product description with the help of shortcodes.

Choose a tab theme and customise it in your Store Control Panel. This will be the default tab theme applied to all tabs you add to your product descriptions. Tab icons, names and colors may be changed for each product using shortcode options e.g. 

Tabs are responsive, so they adapt to the screen width.

 

 This is how tabs added by Tabber look:

 

The app is paid with free trial.

Add tabs using JavaScript

There is another, more complex way to add tabs to product description, which involves site customization as well as changing of the store CSS. Please find the instructions below.

You will need to do three changes to your site, where you have Ecwid embedded, and to Ecwid layout.

1. By default Ecwid’s product description is only one box. Dividing it into tabs can’t be done with CSS. Instead we’ll be using Javascript. 

1a. Install jQuery and jQuery libraries to your site.  Place the following code before </head> tag in the source page of your site/template:


<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>


1b. Insert the following code into the source of the page, where Ecwid is installed. This is Javascript code (based on our Javascript API). It will do the trick:

<script type="text/javascript">
Ecwid.OnPageLoaded.add(function(page){
   if (page.type == "PRODUCT") {
        $( "#tabs" ).tabs();
   }
})
</script>

NOTE: it’ll work for description boxes on the product details page only.

2. Next, add HTML with tabs in the product description.
In Ecwid control panel go to Catalog → Products, open a product to edit and append the below code to the description tab. The code should be inserted into the HTML editor: 


<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab name 1</a></li>
<li><a href="#tabs-2">Tab name 2</a></li>
<li><a href="#tabs-3">Tab name 3</a></li>
</ul>
<div id="tabs-1">
<p>Tab content 1</p>
</div>
<div id="tabs-2">
<p>Tab content 2</p>
</div>
<div id="tabs-3">
<p>Tab content 3</p>
</div>
</div> 

Where change "Tab name" to the titles of your description tabs.

3. Next, add changes to the Ecwid CSS styles. The CSS code is attached to the article. Download the file, take the code and append it to your CSS theme in Ecwid control panel, on Design page.

4. Finally, do some adjustment to the box containter so it fits your site width. This is CSS change. Add this code to your CSS theme on Design page:


#tabs {
  width: 80%; /* you can use values in pixels too. For example, 500px*/ 
}

Check out an example of the tabs: http://jqueryui.com/tabs/​

Attachments

Was this article helpful?
1 out of 2 found this helpful
Questions?
Get help
  • Presales Chat

    Need help choosing the right Ecwid plan? Our Sales team has the answer you’re looking for.

  • Forums

    Join the Ecwid community. Discuss support topics and store ideas with other Ecwid users.

  • Contact us

    Still have questions about Ecwid? Let us know! We will be glad to help you with your Ecwid store.

  • Status Monitor

    Get real time status updates on Ecwid services here, 24/7