add to catalog.xml AFTER
<block type="catalog/product_view_description" name="product.description" as="description" template="catalog/product/view/description.phtml">
<action method="addToParentGroup"><group>detailed_info</group></action>
<action method="setTitle" translate="value"><value>Description</value></action>
</block>
<block type="catalog/product_view_attributes" name="product.attributes" as="ingredients" template="catalog/product/view/ingredients.phtml">
<action method="addToParentGroup"><group>detailed_info</group></action>
<action method="setTitle" translate="value"><value>Ingredients</value></action>
</block>
#### NOTE: "detailed_info" is NOT changed
You must also then create the ingredients.phtml template:
<?php $_ingredients = $this->getProduct()->getIngredients(); ?>
<?php if ($_ingredients): ?>
<h2><?php echo $this->__('Ingredients') ?></h2>
<div class="std">
<?php echo $this->helper('catalog/output')->productAttribute($this->getProduct(), $_ingredients, 'ingredients') ?>
</div>
<?php endif; ?>
// optional tab styling
.toggle-tabs {
border: 1px solid $c-divider-border;
background: none;
li {
position: relative;
width: 25%;
text-align: center;
border-right: 1px solid $c-divider-border;
cursor: pointer;
span {
padding: 0;
background: none;
font-size: $f-size;
}
}
li.current {
border-right: none;
}
li.current:after {
content: " ";
position: absolute;
background: url(../images/tab-arrow@2x.png) no-repeat;
background-size: 9px 5px;
width: 9px;
height: 5px;
display: table;
left: calc(50% - 5px); // 1/2 of background width
bottom: -5px;
}
li:last-child {
border-right: none;
}
}