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 the product description, which involves site customization as well as changing of the store CSS. This method will work for you only if your store is added to a website where you have access to the source code. If you don't have access to the source code or use Ecwid Starter site, add tabs using the CSS, see below: https://support.ecwid.com/hc/en-us/articles/207808475#AddtabsusingCSS

If you want to use Javascript, you will need to do three changes to your site, where you have Ecwid embedded, and to Ecwid's layout.

1. By default, Ecwid’s product description is only one box. Javascript will divide it into tabs. Perform the steps below.

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 add the below code to the description field. 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> 

In this code, change "Tab name" to the names 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 that 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*/ 
}

Add tabs using CSS

The above method with the JavaScript will not work for you if you use the Starter site. The script should be added to the source code of the website and you can't do that with the Starter site. In this case, follow the instructions below and add tabs using only CSS.

1. Add the following HTML code with tabs in the product description:

<section class="tabs">
<input class="tabs__input" checked="" type="radio" name="tab" id="tab-1">
<input class="tabs__input" type="radio" name="tab" id="tab-2">
<input class="tabs__input" type="radio" name="tab" id="tab-3">
<label class="tabs__link" for="tab-1">Tab 1</label>
<label class="tabs__link" for="tab-2">Tab 2</label>
<label class="tabs__link" for="tab-3">Tab 3</label>
<article class="tabs__content">
<h3>Tab1</h3>
<p>Here goes the description of tab 1.
</p>
</article>
<article class="tabs__content">
<h3>Tab2</h3>
<p>Here goes the description of tab 2.
</p>
</article>
<article class="tabs__content">
<h3>Tab3</h3>
<p>Here goes the description of tab 3.
</p>
</article>
</section>

2. Add the CSS code below to Ecwid control panel > Settings > Design > click 'Edit theme' or 'Create Theme' button. Add it at the end of the theme and click "Save" button.

.ecwid {
  $bg-color: #eee;
  $bg-color-active: #fff;
  $border-color: #ccc;
  $tabs-count: 3;
  .tabs {
    margin-bottom: 20px;
    .tabs__input {
      display: none;
    }
    .tabs__link {
      background: $bg-color;
      border: 1px solid $border-color;
      float: left;
      font-weight: 600;
      padding: 5px 10px;
      margin-right: -1px;
      margin-bottom: -1px;
      &:hover {
        background: darken($bg-color, 10%);
      }
    }
    .tabs__content {
      border: 1px solid $border-color;
      clear: both;
      display: none;
      padding: 10px;
      transition: opacity 200ms ease-out;
    }
    @for $i from 1 through $tabs-count {
      .tabs__input:checked:nth-of-type(#{$i}) ~ .tabs__link:nth-of-type(#{$i}) {
        background: $bg-color-active;
        border-bottom-color: $bg-color-active;
      }
    }
    @for $i from 1 through $tabs-count {
      .tabs__input:checked:nth-of-type(#{$i}) ~ .tabs__content:nth-of-type(#{$i}) {
        display: block;
      }
    }
  }
.ecwid-productBrowser-details-descr .tabs__link {
   box-sizing: border-box;
   width: 100% / $tabs-count;
}
}

NOTE: $tabs-count: 3; in the beginning of this code stands for the number of tabs. Replace '3' with the number of tabs you will have.

That's it! The tabs will appear in the product description, here is an example of what it looks like:

tabs_t-shirt.png

Attachments

Was this article helpful?
1 out of 3 found this helpful
Questions?
Get help
  • 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