Multiple Product Images on More Info Pages

[susan3]

Hi,

I am trying to use the new feature that allows multiple rollover images on the More Info pages. I have tried to add the additional images, but they do not display. I think it is due to the template I am using. In my template file there is NOT a [-- IF PRODUCT.MoreInformationGraphic --] tag but there is a [-- Product.MoreInfoImageN --] tag. I have spent so many hours trying to figure this out. Would anyone know the block of code I could add to the template to enable this feature? Thanks in advance for your help. I am including the current template code below:


[-- DEFINE PRODUCT_CROSS_SELL --]
[-- IF PRODUCT.DisplayGraphic --]
[-- IF PRODUCT.Graphic --]
[-- IF PRODUCT.DisplayMoreInformationPage --]
<a href="[-- PRODUCT.MoreInfoURL --]">[-- PRODUCT.Graphic --]</a><br>
[-- ELSE --]
[-- PRODUCT.Graphic --]<br>
[-- END_IF --]
[-- END_IF --]
[-- END_IF --]
[-- INCLUDE Product-Name PROCESS --]
[-- INCLUDE Product-Price PROCESS --]
[-- IF PRODUCT.UseMultiMenus checked --]
[-- IF PRODUCT.DisplayMoreInformationPage --]
[-- IF MOREINFOIMAGE? --]
<br><a class="add" href="[-- PRODUCT.MoreInfoURL --]"><img [-- MOREINFOIMAGE --] border="0" class="add"></a>
[-- ELSE --]
<br><a class="add nobr" href="[-- PRODUCT.MoreInfoURL --]">[-- MOREINFOTEXT --]</a>
[-- END_IF --]
[-- END_IF --]
[-- ELSE_IF VAR.MoreInfoTemplate --]
[-- IF PRODUCT.QuantityPricing --]
<div class="QPtable">
[-- PRODUCT.QuantityPricing --]
</div>
[-- END_IF --]

[Jim]

Your template says

[-- DEFINE PRODUCT_CROSS_SELL --]

That section of code is for the product CROSS_SELL not the moreinfo page. You need to add the code to the [-- DEFINE MORE_INFO_PAGE --] section.

[susan3]

Sorry...Here is the correct section.


#############################
[-- DEFINE MORE_INFO_PAGE --]
#############################
[-- VAR.MoreInfo "yes" --]

[-- IF VAR.MoreInfoTemplate --]
[-- INCLUDE VAR.MoreInfoTemplate PROCESS --]
[-- ELSE --]
[-- INCLUDE Classic-MoreInfoPage PROCESS --]
[-- END_IF --]


[-- VAR.MoreInfo "" --]
[-- END_DEFINE MORE_INFO_PAGE --]

[susan3]

I am still not sure what code would need to be added to the code I included in the previous post. The code is for the More Info Page, but I think I need to add some additional code to use the multiple product rollover images feature. Can anyone help me with this? Thanks so much.

[Jim]

The code you posted is directly from one of the ShopSite templates. Have you modified the template already? If not then it should work right out of the box. Have you configured the Moreinfo section of the product to actually create a moreinfo page? What are you seeing on the page that you don't want or that you want to change? Have you tried using the ShopSite provided templates to see if they work? (Note that some Page template override the assigned Product template so you need to check the page template to see if it is overriding the product template and if it is then any changes need to be made to that template not the one the product is using. (Look at the page template [-- LOOP PRODUCTS --] section and see if it has [-- Product --] or [-- Product some_name --] if it is like the second it will use what ever template is specified where the some_name is in the tag)


This is a very basic template that is including another file that has more of the code in it

Code: Select all

[-- IF VAR.MoreInfoTemplate --]
[-- INCLUDE VAR.MoreInfoTemplate PROCESS --]
[-- ELSE --]
[-- INCLUDE Classic-MoreInfoPage PROCESS --]
[-- END_IF --]

it checks for a variable VAR.MoreInfoTempate (which is probably defined in the page template or perhaps another include file of the page template) and if that exists then it includes a file by the name that the VAR.MoreInfoTemplate is set to. If that VAR is not set then it includes the file Classic-MoreInfoPage file.

So you need to find out which of those two file is going to be included and add your code to that file. The easiest way to find out which file will be included is to add a line just below the [-- VAR.MoreInfo "yes" --] in the template. The line would be something like "<p>THE template used is *** [--VAR.MoreInfoTemplate --] ***. <p>" . Then publish the store and look at a moreinfo page. It should contain the text "THE template used is *** ***. or there could be something between the *** ***. If there is something between the *** *** then that is the file you need to edit, otherwise it would be the Classic-MoreInfoPage include file.

[susan3]

Thanks so much for your help.

It looks like the code should be in the Classic-MoreInfoPage include file. I am pasting the code below. Where and what code should I add?




### Default More Info Page Template ###

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
[-- INCLUDE MoreInfo-Head PROCESS --]
#[-- INCLUDE Classic-MoreInfo.css PROCESS --]
<style type="text/css">
.pcs_table_content span, .pcs_table_content a, .pcs_table_content td, .pcs_table_content div {
display: block;
text-align: center;
}
div.prod_img {
float: left;
min-width: 100px;
}
img.fb_share, img.twtr_share {
padding: 6px 0px;
float: right;
border: 0px;
}
img.fb_follow, img.twtr_follow {
padding: 6px;
float: left;
border: 0px;
}
#plusone {
display: block;
float: right;
clear: none;
padding: 6px;
margin: 0px;
}
#ss_mb {
margin: 0px auto;
text-align: center;
}
[-- IF PageMenu --]
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.suckertreemenu {
background-color: #[-- STORE.SC_ShadeColor --];
width: 100%;
height: 30px;
clear: both;
padding: 0px;
margin: 0px;
}
.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
}
.suckertreemenu ul li a{
display: block;
width: 100px;
padding: 0px 8px;
border-right: 1px solid [-- MORE_INFO.LinkColor --];
color: [-- MORE_INFO.TextColor --];
text-decoration: none;
text-align: center;
line-height: 30px;
font-weight: bold;
white-space: nowrap;
}
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 1em;
display: block;
visibility: hidden;
}
.suckertreemenu ul li ul li{
display: list-item;
float: none;
}
.suckertreemenu ul li ul li ul{
left: 159px;
top: 0;
}
.suckertreemenu ul li ul li a{
display: block;
width: 160px;
text-decoration: none;
padding: 1px 5px;
border-left: 1px solid [-- MORE_INFO.LinkColor --];
border-bottom: 1px solid [-- MORE_INFO.LinkColor --];
background-color: #[-- STORE.SC_ShadeColor --];
}
.suckertreemenu ul li a:hover{
color: [-- MORE_INFO.VisitedLinkColor --];
}
* html p#iepara{
padding-top: 1em;
}
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
[-- END_IF --]
</style>
[-- IF SS_MOBILE --][-- MOBILE_JAVASCRIPT --][-- END_IF --]
[-- IF GOOGLE_PLUSONE --][-- GOOGLE_PLUSONE script --][-- END_IF --]
[-- INCLUDE Head-Browser-Required.sst PROCESS --]
</head>

[-- VAR.PageMargins "No" --]

[-- INCLUDE MoreInfo-Body PROCESS --]
[-- IF SS_MOBILE --][-- SS_MOBILE_REDIRECT --][-- END_IF --]
[-- IF MORE_INFO.DisplayPageHeader --]
<div class="header">[-- HEADER --]</div>
[-- END_IF --]

[-- IF PageMenu --][-- PageMenu --][-- END_IF --]

[-- IF PRODUCT.MoreInformationGraphic --]
[-- MoreInfoImageRow --]
[-- END_IF --]

<form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post">
[-- IF PRODUCT.DisplayName --]
[-- IF PRODUCT.Subproduct --]
<h2>[-- PRODUCT.Name --]</h2>
[-- ELSE_IF PRODUCT.VariablePrice? --]
[-- IF PRODUCT.VariableName? --]
[-- STORE.ProductName --]: <input type="text" name="[-- PRODUCT.RecordNumber --]:name" size="20" maxlength="100" value="">
[-- ELSE --]
<h2>[-- PRODUCT.Name --]</h2>
[-- END_IF --]
[-- ELSE --]
<h2>[-- PRODUCT.Name --]</h2>
[-- END_IF --]
[-- END_IF --]

[-- IF PRODUCT.QuantityPricing --]
#do nothing
[-- ELSE --]
[-- INCLUDE Product-Price PROCESS --]
[-- END_IF --]


[-- IF PRODUCT.Subproduct --]
# don't display the SKU
[-- ELSE --]
[-- INCLUDE Product-Sku PROCESS --]<br>
[-- END_IF --]

<br>[-- PRODUCT.MoreInformationText --]

<br>
[-- IF PRODUCT.Subproduct --]
# Product has subproducts
[--LOOP SUBPRODUCTS--]
[--SUBPRODUCTS--]
[--END_LOOP SUBPRODUCTS--]
[-- ELSE --]
# Product does not have subproducts

#######################
# ADD TO CART BUTTON #
#######################
<center>
[-- INCLUDE Product-AddToCartButton PROCESS --]
</center>
</form>

# end the IF PRODUCT.subproducts
[--END_IF--]

[-- IF WishList --] &nbsp;<br> <b>[-- WishList --]</b>
&nbsp;<br> <b>[-- WishListLink --]</b><br clear="all">[-- END_IF --]

[-- IF TELLAFRIEND --]
&nbsp;<br><center><b>[-- TELLAFRIEND VAR.TF_Link --]</b></center><br clear="all">
[-- END_IF --]

<br>

[-- IF MORE_INFO.DisplayPageFOOTER --]
[-- FOOTER --]
[-- END_IF --]
<div style="clear: both;"></div>
[-- IF Product.MoreInformationProductCrossSell --]
[-- IF PRODUCT.CrossSell "0" --]
[-- ELSE --]
<table class="pcs_table">
<tr><td colspan="3" id="pcs_mi">[-- STORE.CartCrossSellHeader --]</td></tr>
[-- LOOP PRODUCT_CROSS_SELL 4 --]
<td class="pcs_table_content" width="25%">[-- PRODUCT_CROSS_SELL BasicProduct.sst --]
[-- END_LOOP PRODUCT_CROSS_SELL --]
</table>
[-- END_IF --]
[-- END_IF --]

[-- IF Product.MoreInformationGlobalCrossSell --]
<table class="gcs_table">
<tr><td colspan="3" id="gcs_mi">[-- STORE.GlobalCrossSellHeader --]</td></tr>
[-- LOOP GLOBAL_Cross_Sell 4 --]
<td class="gcs_table_content" width="25%" align="center">[-- GLOBAL_CROSS_SELL --]</td>
[-- END_LOOP Global_Cross_Sell --]
</table>
[-- END_IF --]
<p>[-- IF GOOGLE_PLUSONE --]<div id="plusone">[-- GOOGLE_PLUSONE tag --]</div>[-- END_IF --]
[-- IF TWITTER_SHARE --][-- TWITTER_SHARE --][-- END_IF --]
[-- IF FACEBOOK_SHARE --][-- FACEBOOK_SHARE --][-- END_IF --]
[-- IF FACEBOOK_FOLLOW --][-- FACEBOOK_FOLLOW --][-- END_IF --]
[-- IF TWITTER_FOLLOW --][-- TWITTER_FOLLOW --][-- END_IF --]</p>
[-- IF ShopSiteSecurityImage --]
<p><center>[-- ShopSiteSecurityImage --]</center></p>
[-- END_IF --]
[-- IF SS_MOBILE_PC --][-- SS_MOBILE_PC --][-- END_IF --]
</body>
</html>

[susan3]

I reread your earlier post and realized that the page template was a custom template and the code in that may be causing the issue and overriding the product template. When I add a extra image in the more info page it does not show up. Here is the code from the page template:


#############################
[-- DEFINE MORE_INFO_PAGE --]
[-- VAR.TF_Link PRODUCT.Name --]
[-- VAR.Secure "no" --]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><title>[-- IF PRODUCT.MoreInformationTitle --][-- PRODUCT.MoreInformationTitle --]</title>[-- ELSE --][-- PRODUCT.Name REMOVE_HTML --]</title>[-- END_IF --]

[-- IF PRODUCT.Field2 --]<script type="text/javascript" language="javascript" src="[-- OUTPUT_DIRECTORY_URL --]/media/javascript/popup.js"></script>[-- END_IF --]
[-- INCLUDE Head PROCESS --]
</head>

<body>
<div id="container">
[-- INCLUDE Header PROCESS --]
<div id="content">
[-- INCLUDE LeftLinks PROCESS --]
<div id="main">
<table align="center">
<tr>
<td align="center" valign="top">
[-- IF PRODUCT.MoreInformationGraphic --]
<div>[-- IF PRODUCT.Field2 --]<a href="javascript:showPicture('[-- PRODUCT.Field2 --]')" title="[-- IF PRODUCT.MoreInformationTitle --][-- PRODUCT.MoreInformationText --][-- ELSE --][-- PRODUCT.Name REMOVE_HTML --][-- END_IF --]">[-- END_IF --]<img [-- PRODUCT.MoreInformationGraphic REMOVE_HTML --] name="prod_img">[-- IF PRODUCT.Field2 --]</a>[-- END_IF --]</div>
[-- END_IF --]
</td>
<td valign="top" align="left" style="padding-left: 10px;" width="100%">
<h1>[-- PRODUCT.Name --]</h1>
<p class="pr_prc">[-- IF PRODUCT.SaleAmount --]<strike>[-- PRODUCT.Price --]</strike> [-- PRODUCT.SaleAmount --][-- ELSE --][-- PRODUCT.Price --][-- END_IF --]</p>
[-- INCLUDE Product-Sku PROCESS --]
<p class="pr_info">[-- IF PRODUCT.MoreInformationText --][-- PRODUCT.MoreInformationText --][-- ELSE --][-- PRODUCT.ProductDescription --][-- END_IF --]</p>

<form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post">
[-- IF PRODUCT.DisplayOrderingOptions --]
<br>
[-- END_IF --]
[-- INCLUDE Product-AddToCartButton PROCESS --]
</form>
[-- IF PRODUCT.Field1 --][-- PRODUCT.Field1 --][-- END_IF --]

</td>
</tr>
</table>

[-- IF TellAFriend --]<p align="center">[-- TellAFriend VAR.TF_Link --]</p>[-- END_IF --]
</div>
</div>
[-- INCLUDE Footer PROCESS --]
</div>

[Jim]

The code is already in the template [code
[-- IF PRODUCT.MoreInformationGraphic --]
[-- MoreInfoImageRow --]
[-- END_IF --]][/code]
Those tags will display all of the More Info page images, displayed in rows, as defined in Preferences > More Info Pages.
The only reasons it might not work are: 1. You don't have a MoreInformationGraphic for the product or 2. you don't have things configured on the Preferences > More Info Pages. 3. You have a Starter store that does not have More information pages for products. 4. you have an older version of ShopSite that doesn't have the tags, 5. you have a version of ShopSite that has features disabled because you purchased a one time license and the store was upgraded to a newer version but the upgrade fee was not paid.

If you can post a link to your site and tell me what product should have the more info images I'll look at it and see if I can determine which of the above is happening.

[susan3]

The link to my site is http://contempostyle.com/store/, click on Tops, I added 2 images to the More Info Extra Image Fields in the following 2 products:
Animal Print Tie Top and Animal Print Babydoll. The images are not displaying. I am able to get extra images to display using the extra fields but it is too time consuming to add the code since I will have a large number of products and I would like to be able to use this new option.

I have a manger site, I am pretty sure I configured the Preferences correctly, I have the current version of ShopSite.

Could the page template that I posted above in my last post effect this, it is a custom template?

I really appreciate your help. I called Verio tech support and have spent close to 2 hours with them and they could not help me.

[susan3]

Still having problems, but I think I found the issue. My site uses a custom template and I think the reason the More Info Extra Images are not displaying is because of the way the code in the [-- DEFINE MORE_INFO_PAGE --] section of the page template is written. I am posting the code below. Thanks so much for any suggestions.


#############################
[-- DEFINE MORE_INFO_PAGE --]
[-- VAR.TF_Link PRODUCT.Name --]
[-- VAR.Secure "no" --]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><title>[-- IF PRODUCT.MoreInformationTitle --][-- PRODUCT.MoreInformationTitle --]</title>[-- ELSE --][-- PRODUCT.Name REMOVE_HTML --]</title>[-- END_IF --]

[-- IF PRODUCT.Field2 --]<script type="text/javascript" language="javascript" src="[-- OUTPUT_DIRECTORY_URL --]/media/javascript/popup.js"></script>[-- END_IF --]
[-- INCLUDE Head PROCESS --]
</head>

<body>
<div id="container">
[-- INCLUDE Header PROCESS --]
<div id="content">
[-- INCLUDE LeftLinks PROCESS --]
<div id="main">
<table align="center">
<tr>
<td align="center" valign="top">
[-- IF PRODUCT.MoreInformationGraphic --]
<div>[-- IF PRODUCT.Field2 --]<a href="javascript:showPicture('[-- PRODUCT.Field2 --]')" title="[-- IF PRODUCT.MoreInformationTitle --][-- PRODUCT.MoreInformationText --][-- ELSE --][-- PRODUCT.Name REMOVE_HTML --][-- END_IF --]">[-- END_IF --]<img [-- PRODUCT.MoreInformationGraphic REMOVE_HTML --] name="prod_img">[-- IF PRODUCT.Field2 --]</a>[-- END_IF --]</div>
[-- END_IF --]
</td>
<td valign="top" align="left" style="padding-left: 10px;" width="100%">
<h1>[-- PRODUCT.Name --]</h1>
<p class="pr_prc">[-- IF PRODUCT.SaleAmount --]<strike>[-- PRODUCT.Price --]</strike> [-- PRODUCT.SaleAmount --][-- ELSE --][-- PRODUCT.Price --][-- END_IF --]</p>
[-- INCLUDE Product-Sku PROCESS --]
<p class="pr_info">[-- IF PRODUCT.MoreInformationText --][-- PRODUCT.MoreInformationText --][-- ELSE --][-- PRODUCT.ProductDescription --][-- END_IF --]</p>

<form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post">
[-- IF PRODUCT.DisplayOrderingOptions --]
<br>
[-- END_IF --]
[-- INCLUDE Product-AddToCartButton PROCESS --]
</form>
[-- IF PRODUCT.Field1 --][-- PRODUCT.Field1 --][-- END_IF --]

</td>
</tr>
</table>

[-- IF TellAFriend --]<p align="center">[-- TellAFriend VAR.TF_Link --]</p>[-- END_IF --]
</div>
</div>
[-- INCLUDE Footer PROCESS --]
</div>
</body>
</html>
[-- END_DEFINE MORE_INFO_PAGE --]

[Jim]

I know the ShopSite templates can be difficult to decipher so trying to modify one can sometimes be difficult. I like to remove all the extraneous stuff and just put in the most basic things that are need to see the functionality and work up from there.
Here is my entire test template for a moreinfo page with multiple images and it works. Since I am only concerned with the moreinfo page (which is the only place the multiple images work) I removed everything from the template except the [-- DEFINE MORE_INFO_PAGE --] section and the [--DEFINE PRODUCT --] section, which just displays the product name. Since the define product section doesn't include the code to link to the moreinfo page I just go to the pagename assigned to the moreinfo page to view the results.

Code: Select all

[-- DEFINE MORE_INFO_PAGE --]
# This defines how the more information page for the products
#   that use this template will look
<html><head></head><body>
 [-- MoreInfoImageRow --]
</body><html>
[-- END_DEFINE MORE_INFO_PAGE --]

[-- DEFINE PRODUCT --]
# This define is used to control how the products will look
<p>
[-- product.name --]
<p>
[-- END_DEFINE PRODUCT --]


Here is the code that is generated for the more info page by that one template tag [-- MoreInfoImageRow --] (other than the html, head, and body tags.

Code: Select all

<html><head>
<meta name="generator" content="ShopSite Pro 11 sp2 r3 (data - basic)">
<script type="text/javascript" src="http://mydomain.com/11sp2/jimsp2/shopsite-images/en-US/javascript/jquery/jquery.js"></script>
  <script type="text/javascript" language="JavaScript">
  var ss_jQuery = jQuery.noConflict(true);
</script>
<script type="text/javascript" src="http://mydomain.com/11sp2/jimsp2/shopsite-images/en-US/javascript/validation/jquery.validate.js"></script>
<script type="text/javascript">var sb_rev_path='http://mydomain.com/cgi-bin/jim/11sp2/sc';
var min_length=10;
var max_length=1000;
var max_stars = 5;
var t_working='Working...';
var t_your_rating='Your rating';
var t_email_required = 'Please enter your email';
var t_email_wrong = 'Please enter a valid email';
var t_name_required = 'Please enter your name';
var t_title_required = 'Please enter review title';
var t_rating_required = 'Please enter product rating';
var t_review_length = 'Please write a longer review, at least ';
var t_characters = ' characters';
</script>
<script type="text/javascript">var background_star_path = "http://mydomain.com/11sp2/jimsp2/shopsite-images/en-US/css/images/star.jpg";var star_path = "http://mydomain.com/11sp2/jimsp2/shopsite-images/en-US/css/images/star-lit.jpg";</script><script type="text/javascript" src="http://mydomain.com/11sp2/jimsp2/shopsite-images/en-US/javascript/products/reviews.js"></script>
</head><body>
 <div class="prod_img" style="overflow: auto; width: 360px; height: 320px;"><img src="http://mydomain.com/11sp2/jimsp2/media/sample-122x132.gif" alt="sample-122x132.gif" name="prod_img" >
</div>
<div class="row_img"><table class="small_img"><tr><td class="small_img"><a href="http:#"  onmouseover="document.prod_img.src='http://mydomain.com/11sp2/jimsp2/media/sample-122x132.gif';"  onClick="window.open('http://mydomain.com/11sp2/jimsp2/media/sample-122x132.gif', 'image_window',  'width=600px,height=600px,resizable=yes,scrollbars=yes');  return false;">
 <img src="http://mydomain.com/11sp2/jimsp2/media/ss_size2/sample-122x132.gif" alt="sample-122x132.gif" border=0> </a>
</td>
<td class="small_img"><a href="http:#"  onmouseover="document.prod_img.src='http://mydomain.com/11sp2/jimsp2/media/sample-185x200.gif';"  onClick="window.open('http://mydomain.com/11sp2/jimsp2/media/sample-185x200.gif', 'image_window',  'width=600px,height=600px,resizable=yes,scrollbars=yes');  return false;">
 <img src="http://mydomain.com/11sp2/jimsp2/media/ss_size2/sample-185x200.gif" alt="sample-185x200.gif" border=0> </a>
</td>
<td class="small_img"><a href="http:#"  onmouseover="document.prod_img.src='http://mydomain.com/11sp2/jimsp2/media/sample-46x50.gif';"  onClick="window.open('http://mydomain.com/11sp2/jimsp2/media/sample-46x50.gif', 'image_window',  'width=600px,height=600px,resizable=yes,scrollbars=yes');  return false;">
 <img src="http://mydomain.com/11sp2/jimsp2/media/ss_size2/sample-46x50.gif" alt="sample-46x50.gif" border=0> </a>
</td>
<td class="small_img"><a href="http:#"  onmouseover="document.prod_img.src='http://mydomain.com/11sp2/jimsp2/media/poweredbySS.gif';"  onClick="window.open('http://mydomain.com/11sp2/jimsp2/media/poweredbySS.gif', 'image_window',  'width=600px,height=600px,resizable=yes,scrollbars=yes');  return false;">
 <img src="http://mydomain.com/11sp2/jimsp2/media/ss_size2/poweredbySS.gif" alt="poweredbySS.gif" border=0> </a>
</td>
</tr></table>
</div>
</body><html>

It displays the moreinfo image and 4 other smaller images that I assigned as extra moreinfo images. When I move the mouse over one of the small images, the larger version of the image displays where the original moreinfo image was. Moving the cursor accross them rapidly changes which one is displayed.

So the only thing you should need to put in your template to see the multiple moreinfo images displaying is the tag [-- MoreInfoImageRow --]. That is assuming that you have ShopSite version that includes the multiple more info images option. My test was using ShopSite 11sp2 but it should work in at lease 11sp1 and possible in 11.0.