Как правильно вставить код в файл шаблона

Добрый.

Народ помогите правельно вставить код в файл шаблона head.phtml и media.phtml.
По сути конечьный результат это соединить выбор цвета с фотографией товара, когда из выпадающего списка выбирается другой цвет товара,одновременно меняется и главная фотография товара.
Я нашел нужный код в сети, но вот незадача не могу разобраться в этой теме шаблона.

Вот мой файл head.phtml

<?php
/**
* Magento
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE_AFL.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.or...ses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@magentocommerce.com so we can send you a copy immediately.
*
*
*
* @category design
* @package base_default
* @copyright Copyright © 2010 template-help.com
* @license http://opensource.or...ses/afl-3.0.php Academic Free License (AFL 3.0)
*/
?>
<title><?php echo $this->getTitle() ?></title>
<meta http-equiv="Content-Type" content="<?php echo $this->getContentType() ?>" />
<meta name="description" content="<?php echo htmlspecialchars($this->getDescription()) ?>" />
<meta name="keywords" content="<?php echo htmlspecialchars($this->getKeywords()) ?>" />
<meta name="robots" content="<?php echo htmlspecialchars($this->getRobots()) ?>" />
<link rel="icon" href="<?php echo $this->getSkinUrl('favicon.ico') ?>" type="image/x-icon" />
<link rel="shortcut icon" href="<?php echo $this->getSkinUrl('favicon.ico') ?>" type="image/x-icon" />
<script src="<?php echo $this->getSkinUrl('js/jquery-1.3.2.min.js') ?>" type="text/javascript"></script>
<script src="<?php echo $this->getSkinUrl('js/jquery.featureList-1.0.0.js') ?>" type="text/javascript"></script>
<script src="<?php echo $this->getSkinUrl('js/vslider.js') ?>" type="text/javascript"></script>

<script type="text/javascript">
jQuery(window).bind('load', function(){
jQuery.featureList(
jQuery("#slider li"),
jQuery("#output li"),
{
start_item : 0
}
);
jQuery("#output li img").css('display', 'block');

jQuery().vslide();

jQuery('#slider li').hover(
function () {
jQuery(this).find('img').stop(true, false).animate({left: '-163px'}, 'slow');
},
function () {
jQuery(this).find('img').animate({left: '0'}, 'slow');
}
);

});
</script>

<script type="text/javascript">
//<![CDATA[
var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>';
var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>';
//]]>
</script>
<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
<?php echo $this->helper('core/js')->getTranslatorScript() ?>
<?php echo $this->getIncludes() ?>
<!--[if lte IE 7]>
<script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script_other.js"></script>

<![endif]-->


а вот код который нужно вставить:

<script type="text/javascript" src="http://localhost/magento116/js/jquery/jquery-1.2.3.js"></script>

<script type="text/javascript">
jQuery(document).ready(function() {

// On document ready hide all images first
jQuery("#imageShowcase img").hide();
jQuery("#productImgDefault").show();

jQuery("#select_3").change(function() {
// Hide all images on slect element change action
jQuery("#imageShowcase img").hide();

// Get the value of selected option
var optionValue = jQuery(this).attr('value');
// Just a test to see if you're getting option value
// alert(optionValue);

// Get the content (aka inner HTML) of selected option
var optionValueText = jQuery.trim(jQuery('#select_3 :selected').text());

// Just a test to see if you're getting right selected option inner text
// alert(optionValueText);
alert('Selected option has value: ' + optionValue + ' and inner text: ' + optionValueText);


// Show the image based on selected value
// Whatch out, case sensitive...
jQuery("#productImg" + optionValueText).show();
});

});
</script>



<script type="text/javascript">
//<![CDATA[
var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>';
var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>';
//]]>
</script>

<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
<?php echo $this->helper('core/js')->getTranslatorScript() ?>


Вот файл media.phtml

<?php
/**
* Magento
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE_AFL.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.or...ses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@magentocommerce.com so we can send you a copy immediately.
*
*
*
* @category design
* @package base_default
* @copyright Copyright © 2010 template-help.com
* @license http://opensource.or...ses/afl-3.0.php Academic Free License (AFL 3.0)
*/

/**
* Product media data template
*
* @see Mage_Catalog_Block_Product_View_Media
*/
?>
<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
?>
<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
<p class="product-image product-image-zoom">
<?php
$_img = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
echo $_helper->productAttribute($_product, $_img, 'image');
?>
</p>
<p class="zoom-notice" id="track_hint"><?php echo $this->__('Double click on above image to view full picture') ?></p>
<div class="zoom">
<img id="zoom_out" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_out.gif') ?>" alt="<?php echo $this->__('Zoom Out') ?>" title="<?php echo $this->__('Zoom Out') ?>" class="btn-zoom-out" />
<div id="track">
<div id="handle"></div>
</div>
<img id="zoom_in" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_in.gif') ?>" alt="<?php echo $this->__('Zoom In') ?>" title="<?php echo $this->__('Zoom In') ?>" class="btn-zoom-in" />
</div>
<script type="text/javascript">
//<![CDATA[
Event.observe(window, 'load', function() {
product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
});
//]]>
</script>
<?php else: ?>
<p class="product-image">
<?php
$_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(265).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
echo $_helper->productAttribute($_product, $_img, 'image');
?>
</p>
<?php endif; ?>
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
<h2><?php echo $this->__('More Views') ?></h2>
<ul>
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(67); ?>" width="67" height="67" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>

а вот код для вставки:

?>
<?php $_product = $this->getProduct() ?>


<div id="imageShowcase">

<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
<img id="productImgDefault" src="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
<?php else: ?>
<img id="productImgDefault" src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(265); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
<?php endif; ?>
<?php if (count($this->getGalleryImages()) > 0): ?>

<?php foreach ($this->getGalleryImages() as $_image): ?>
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" alt="no image" id="productImg<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
<?php endforeach; ?>
</div>

<?php endif; ?>


Может кто помочь с их вставкой? Не навредив функционалу magento!

За ранние благодарен.

Вам же уже сказали: не знаете как вставить — купите готовый модуль.
Сказали даже, где купить.
Данный форум не предназначен для заочного бесплатного программирования.