Explore Magento

Changing Product Tabs from JavaScript to CSS

Posted on 07. Jul, 2009 by coolbluelogo in Design, Magento

About the Author:

CoolBlueLogo is a Promotional Product Ecommerce site. Helping marketing professionals achieve success with their incentive and customer loyalty campaigns. CoolBlueLogo is Jonathan Martin, he can be reached at jonathan@coolbluelogo.com.

Search engines typically only read visible page content. This poses a problem with some Magento Themes product view page. With Magento themes (built around the Modern theme) the Product Description, We Also Recommend, Additional Information, and Product Tabs are embedded using JavaScript. While some feel this is a more visually appealing look, the search engines don’t.

Amazon.com is a great example of an ecommerce site that uses visible page promotional content to its marketing advantage. Product pages on Amazon are LONG and nothing is hidden behind tabs or embedded in JavaScript product tabs. This leaves more promotional content for the search engines to index. Having the product page content indexed is a must for any ecommerce site hoping to take advantage of organic search.

First, from the admin section go to system/configuration then drill down to the store level for the Configuration Scope and select the advanced/developer menu. Turn on Template path hints under the Debug tab.

Second, from the frontend choose a product page and verify that the tabs are in frontend/default/hellopress/template/catalog/product/view/tabs.phtml.
Then open the tabs.phtml file and around lines 33-46 you should see:

<ul class="tabs">
<?php foreach ($this->getTabs() as $_index => $_tab): ?>
<?php if($this->getChildHtml($_tab['alias'])): ?>
<li id="product_tabs_<?php echo $_tab['alias'] ?>" <?php echo !$_index ? 'class="active first"' : '' ?>><a href="#"><?php echo $_tab['title']?></a></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
<div class="padder">
<?php foreach ($this->getTabs() as $_index => $_tab): ?>
<?php if($this->getChildHtml($_tab['alias'])): ?>
<div id="product_tabs_<?php echo $_tab['alias'] ?>_contents">
<?php echo $this->getChildHtml($_tab['alias']) ?></div>
<?php endif; ?>
<?php endforeach; ?>
</div>

Change it to:

<ul>
<?php foreach ($this->getTabs() as $_index => $_tab): ?>
<?php if($this->getChildHtml($_tab['alias'])): ?>
<li style="margin-bottom:10px;width:100%;"><div class="tabs_new"><?php echo $_tab['title']?></div>
<div><?php echo $this->getChildHtml($_tab['alias']) ?></div></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
<div class="padder">
<?php foreach ($this->getTabs() as $_index => $_tab): ?>
<?php if($this->getChildHtml($_tab['alias'])): ?>
<?php endif; ?>
<?php endforeach; ?>
</div>

This removes the JavaScript tabs and defines them with CSS class .tabs_new

In Boxes.css you can add .tabs_new anywhere but around line 153ish is the most relevant place.

.tabs_new {
margin-bottom:10px;
line-height:2em;
background:url(../images/tabs_bg.gif) repeat-x 0 100% #f2f2f2;
font-size:15pt;
font-weight:bold;
}

You can define the CSS product tabs anyway you see fit to match your current themes style. This will change tabs from something like this:

To something like this:

I hope you find the benefits to this as helpful as I have.
Good Luck and Happy Ecommerce!

Tags: css, Design, javascript, magento customization, magento design