ECommerce Insights Blog

Stay on top of it all and get ahead with useful articles, how-tos, tips and tricks on e-commerce.

How To Add Custom Ajax Tabs On Magento Go Product Details Pages

Flexible Product Detail Page

Magento Go Custom Tabs

Magento Go is a hosted platform to run Magento stores safely, quickly and reliably. Unfortunately, in the initial phase many store owners who opted for Magento Go couldn’t make the desired changes the way they use to do in self hosted Magento versions (i.e. Community or Enterprise Editions). What if you have to add some more tabs (Custom tabs) on your product detail pages to show additional information. In the following Magento Go tutorial, we will help you understand Magento Go and how to add your customizations.

How to add AJAX driven custom tabs on Magneto Go product pages

First of all, lets use jQuery which is by far the most used library available till today.

How to connect jQuery noConflict version in Magento Go

Fortunately, connecting jQuery plugin in Magento Go is very easy. You have to follow the steps given below:

  1. Go to Admin Panel -> Configuration -> Design -> Theme Customization section and select JavaScript editor.
  2. Next, download the jQuery from and upload it to Magento Go.
  3. Create a JS file called jQuerynoConflict.js file and add the following code in it

    and upload it to Magento Go.

  4. This enables you to add any jQuery plugin, to do that create a new JS file called AjaxTabs.js and place the following code in it:
    var attrItem = function (attrname, data){
        this.attrName = attrname; = data;
    var newTabs = function (items){
        var gr = '';
        //if no arguments just make tabs
        if ( items === undefined ) {
            for(var i=0;i
    "; } } else { for(var i=0;i= 0 && items[i] < attributes.length ){ gr += "
    "; } } //if item is group object make grouptab else { var tmp =''; for(var j=0;j= 0 && items[i].groupItems[j] < attributes.length ){ tmp += ""+attributes[items[i].groupItems[j]].attrName+""+attributes[items[i].groupItems[j]].data+""; } }; if ( tmp != '' ){ gr += "
    "; } } } } return gr; } jQuery(document).ready(function() { attributes = []; //first tab is description attributes[0]= new attrItem( jQuery('dl#collateral-tabs span').text(), jQuery('dl#collateral-tabs .std').html() ); //get array of attributes jQuery('#product-attribute-specs-table tr').each(function(i){ attributes[i+1] = new attrItem( jQuery(this).children('th').text(), jQuery(this).children('td').html() ); }); var tabs = newTabs(); // var descr = attributes[0].data; // jQuery('.product-collateral').prepend(descr); //replace default tabs by new jQuery('dl#collateral-tabs').html(tabs); //call default function for tabs new Enterprise.Tabs('collateral-tabs'); });

    Lets upload this file to Magento Go under JavaScript Editor.

Double check the JS script order, it should sequentially look like

  1. jquery.js or minified version jquery.min.js
  2. jQuerynoConflict.js
  3. AjaxTabs.js

Now, click “Save”.

Organize Magento Go Custom Tabs

We can create new custom tabs with newTabs() function like this.

var tabs = newTabs();

The method newTabs() can have parameters now.

Reorder custom tabs

Tabs can be reordered using [] where 0 is the description, 1, and further – product attributes i.e.

var tabs = newTabs(attributes,[0,2,1,4,9]);

Group custom tabs

You can group/combine multiple attributes as per your requirement like this:

var tabs = newTabs([
    {groupName: 'group1', groupItems: [1,3] },
    {groupName: 'group2', groupItems: [4] },

Similary, you can create any number of groups. Keep in mind to use parameters only when you are specifying all attributes as undefined attributes won’t be displayed. Wrong index are also ignored.

I hope this short tutorial will help you setup custom Tabs on product pages in your Magento Go environment. Please leave us a comment and let us know if you run into any issues.