ShopSite Forums

by **kiawah** » Wed Jan 02, 2008 11:15 am

We are currently using the "crosssell-sky-product" product template and the default page layout and we are using Shopsite 9

We sell products that have a hard copy and digital version and digital products that have multiple color options. I was wondering if anyone else has something like these types of products and how they handled it. I like the cross sell product layout that we are using but I would prefer the products that we are cross selling wind up below the product description like on this link:

http://www.motoworldracing.com/Answer-2007-Syncron-Sky-Blue-Jersey.html

However, if this is too difficult to do I would like to make the subproduct link background a lot less wide and not have a red background. Can anyone suggest how to change it?

Thanks for your help

by **ShopSite Lauren** » Fri Jan 04, 2008 2:49 pm

The way that the Cross-Sell template is setup displays the subproducts in the left hand column as a list. If you would like to modify this layout you would need to modify the template itself. If you have ShopSite Manager or ShopSite Pro, below is how you would modify the template to get your desired result.

1. You would want to make a copy of the CrossSell-Sky-product product template. You can copy this template by going to Merchandising > Custom Templates > Page/Product > Copy ShopSite Product Template.

2. Once you have copied this template you can highlight it and click on Edit Template. This template has 3 sections:
DEFINE SUBPRODUCT
DEFINE PRODUCT
DEFINE MORE_INFO_PAGE
you will want to copy everything within the DEFINE PRODUCT section (from below DEFINE PRODUCT to just above END_DEFINE PRODUCT) and paste that information in the DEFINE SUBPRODUCT section, replacing all the current subproduct information. What this is doing is making it so that instead of the subproducts being listed with just their name, they will now be listed with all of their product information just like regular products are listed with their product information on pages.

3. Next you will want to replace the DEFINE MORE_INFO_PAGE with the below information:

----------------------------------------------------------------------------------
##############################
[-- DEFINE MORE_INFO_PAGE--]
[-- INCLUDE CrossSell-Sky-vars.sst PROCESS --]
[-- INCLUDE CrossSell-Sky-pr-vars.sst PROCESS --]
[-- VAR.define "more_info" --]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
[-- IF PRODUCT.MoreInformationTitle --]
<title>[-- PRODUCT.MoreInformationTitle --]</title>
[-- ELSE --]
<title>[-- STORE.Name --]: [-- PRODUCT.Name --]</title>
[-- END_IF --]
[-- IF PRODUCT.MoreInformationMetaDescription --]
<meta name="description" content="[-- PRODUCT.MoreInformationMetaDescription --]">
[-- ELSE --]
<meta name="description" content="[-- STORE.Name --]: [-- PRODUCT.Name --]">
[-- END_IF --]
[-- IF PRODUCT.MoreInformationMetaKeywords --]
<meta name="keywords" content="[-- PRODUCT.MoreInformationMetaKeywords --]">
[-- ELSE_IF PRODUCT.SearchKeywords --]
<meta name="keywords" content="[-- PRODUCT.SearchKeywords --]">
[-- ELSE --]
<meta name="keywords" content="[-- PRODUCT.Name --], [-- STORE.Name --]">
[-- END_IF --]

<meta name="robots" content="index,follow">

<style type="text/css">
[-- INCLUDE VAR.ThemeCSS PROCESS --]
[-- INCLUDE VAR.MoreInfoCSS PROCESS --]
</style>

[-- INCLUDE VAR.MiniCart-JS PROCESS --]
</head>

<body>
<div id="masthead">
[-- IF MORE_INFO.DisplayPageHeader --]
<div id="univ-header">
[-- HEADER --]
</div>

[-- END_IF --]

[-- IF MiniCart --]
<div id="miniCart">
<script type="text/javascript" language="JavaScript">
DisplayMiniCart("ss_cart_[-- STORE_Serial_Number --]","ItemCount");
</script>
</div>
[-- ELSE --]
<div id="miniCart">
[-- IF ANALYTICS_MULTI_DOMAIN --]
<script type="text/javascript" language="JavaScript">
document.write('<a class="MiniCart" href="javascript:__utmLinker(\'[-- SHOPPING_CART_URL --]\');">[-- STORE.SC_YourShoppingCart --]</a>');
</script>
<noscript>
<a class="MiniCart" href="[-- SHOPPING_CART_URL --]">[-- STORE.SC_YourShoppingCart --]</a>
</noscript>
[-- ELSE --]
<a class="MiniCart" href="[-- SHOPPING_CART_URL --]">[-- STORE.SC_YourShoppingCart --]</a>
[-- END_IF --]
</div>
[-- END_IF --]
<div id="globalNav">

[-- IF ANALYTICS_MULTI_DOMAIN --]
<script type="text/javascript" language="JavaScript">
document.write('<a href="javascript:__utmLinker(\'[-- MyStoreURL --]\');">[-- STORE.Home --]</a>');
</script>
<noscript>
<a href="[-- MyStoreURL --]">[-- STORE.Home --]</a>
</noscript>
[-- ELSE --]
<a href="[-- MyStoreURL --]">[-- STORE.Home --]</a>
[-- END_IF --]

[-- IF STORE.Type "PROFESSIONAL" --]
[-- IF SC_Registration --]
 |  [-- INCLUDE VAR.CR_JS PROCESS --]
[-- END_IF --]

[-- IF GiftCert --]
 |   [-- GiftCertLink --]
[-- END_IF --]

[-- IF TELLAFRIEND --]
[-- VAR.tell_friend_link PRODUCT.Name --]
 |   [-- TELLAFRIEND VAR.tell_friend_link --]
[-- END_IF --]
[-- END_IF --]

</div> 

</div>


<div id="content2">

<h2 id="pageName">[-- PRODUCT.Name --]</h2>
<div class="mi-text1">
[-- IF ANALYTICS_MULTI_DOMAIN --]
<form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post" onSubmit="javascript:__utmLinkPost(this)">
[-- ELSE --]
<form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post">
[-- END_IF --]
<div class="mi-productBlock">
<div class="mi-productGraphic">
[-- IF PRODUCT.MoreInformationGraphic --]
[-- PRODUCT.MoreInformationGraphic --]
[-- ELSE_IF PRODUCT.DisplayGraphic --]
[-- PRODUCT.Graphic --]
[-- END_IF --]
</div>
<div class="mi-productInfowrap">
<div class="mi-productDescription">
[-- IF PRODUCT.MoreInformationText --]
[-- PRODUCT.DescriptionStyle Begin --][-- PRODUCT.DescriptionSize Begin --][-- PRODUCT.MoreInformationText --][-- PRODUCT.DescriptionSize End --][-- PRODUCT.DescriptionStyle End --]
[-- ELSE_IF PRODUCT.ProductDescription --]
[-- PRODUCT.DescriptionStyle Begin --][-- PRODUCT.DescriptionSize Begin --][-- PRODUCT.ProductDescription --][-- PRODUCT.DescriptionSize End --][-- PRODUCT.DescriptionStyle End --]

[-- END_IF --]
</div> 

<div class="mi-productName">
####################
# PRODUCT NAME #
####################

[-- IF PRODUCT.VariablePrice? --]
[-- IF PRODUCT.VariableName? --]
<span class="VariableProductName">
[-- STORE.ProductName --]: <input type=text name="[-- PRODUCT.RecordNumber --]:name" size="20" maxlength="100" value="">
</span>
[-- ELSE --]
[-- PRODUCT.NameStyle Begin --][-- PRODUCT.NameSize Begin --]
[-- PRODUCT.Name --]
[-- PRODUCT.NameSize End --][-- PRODUCT.NameStyle End --]
[-- END_IF --]
[-- ELSE --]
[-- PRODUCT.NameStyle Begin --][-- PRODUCT.NameSize Begin --]
[-- PRODUCT.Name --]
[-- PRODUCT.NameSize End --][-- PRODUCT.NameStyle End --]
[-- END_IF --]
</div>
[-- IF PRODUCT.DisplaySKU --]
<div class="productSku">
[-- PRODUCT.SKUSize Begin --][-- PRODUCT.SKUStyle Begin --]
[-- STORE.SKU --]
[-- IF PRODUCT.VariablePrice? --]
[-- IF PRODUCT.VariableSKU? --]
<input type=text name="[-- PRODUCT.RecordNumber --]:sku" size="4" maxlength="10" value="">
[-- ELSE --]
[-- PRODUCT.SKU --]
[-- END_IF --]
[-- ELSE --]
[-- PRODUCT.SKU --]
[-- END_IF --]
[-- PRODUCT.SKUStyle End --][-- PRODUCT.SKUSize End --]
</div> 
[-- END_IF --]

# ###################
# # PRODUCT PRICE #
# ###################

[-- VAR.SaleOn "no" --]
[-- IF PRODUCT.SaleOn--]
[-- IF PRODUCT.SaleAmount --]
[-- VAR.SaleOn "yes" --]
[-- Else --]
[-- VAR.SaleOn "no" --]
[-- END_IF --]
[-- END_IF --]

# if merchant wants price displayed

<div class="mi-productPrice">
[-- IF PRODUCT.DisplayPrice --]

[-- IF PRODUCT.VariablePrice? --]
<b>[--STORE.Price --]:</b> [-- STORE.CurrencySymbol --]<input type=text name="[-- PRODUCT.RecordNumber --]:price" size="4" maxlength="10" value="">
[-- ELSE --]

[-- IF VAR.SaleOn "yes" --]
<strike>[-- PRODUCT.Price --]</strike>
[-- PRODUCT.PriceSize Begin --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.SaleAmount --][-- PRODUCT.PriceStyle End --][-- PRODUCT.PriceSize End --]
[-- IF PRODUCT.AltPrice--]
<strike>[-- PRODUCT.AltPrice --]</strike>
[-- PRODUCT.PriceSize Begin --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.AltSaleAmount --][-- PRODUCT.PriceStyle End --][-- PRODUCT.PriceSize End --]
[-- END_IF --]
<span class="onsale">[-- STORE.OnSaleText --]</span>

[-- ELSE --]
# product is not on sale
[-- PRODUCT.PriceSize Begin --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.Price --][-- PRODUCT.PriceStyle End --][-- PRODUCT.PriceSize End --]
[-- IF PRODUCT.AltPrice--]
[-- PRODUCT.AltPrice --]
[-- END_IF --]
[-- END_IF --]
[-- END_IF --]
[-- ELSE --]
# merchant does not want price displayed, but is there a sale price?
[-- IF PRODUCT.VariablePrice? --]
#don't display sale price
[-- ELSE_IF VAR.SaleOn "yes" --]
# display sale price, but not regular price
[-- IF VAR.MoreInfoPage "yes" --]
# do nothing
[-- ELSE --]
<br>
[-- END_IF --]

[-- PRODUCT.PriceSize Begin --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.SaleAmount --][-- PRODUCT.PriceStyle End --][-- PRODUCT.PriceSize End --]
[-- IF PRODUCT.AltPrice--]
[-- PRODUCT.PriceSize Begin --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.AltSaleAmount --][-- PRODUCT.PriceStyle End --][-- PRODUCT.PriceSize End --]
[-- END_IF --]
<span class="onsale">[-- STORE.OnSaleText --]</span>
[-- END_IF --]

[-- END_IF --]
</div>

<div class="mi-checkout">
# ######################
# # ADD TO CART BUTTON #
# ######################
[-- IF PRODUCT.QuantityPricing --]
<div class="QPtable">
[-- PRODUCT.QuantityPricing --]
</div>
[-- END_IF --]

<input type=hidden name=storeid value=[-- store_id --]>
<input type=hidden name=dbname value=products>
<input type=hidden name=function value=add>
<input type=hidden name=itemnum value=[-- product.recordnumber --]>

[-- IF PRODUCT.DisplayOrderingOptions --]
[-- IF PRODUCT.OptionText --]
[-- PRODUCT.OptionText --]
[-- END_IF --]
[-- ORDER_OPTION_MENU LINE --]
[-- END_IF --]

[-- IF PRODUCT.DisplayOrderQuantity checked --]
[-- IF PRODUCT.DisplayOrderingOptions --]
#do nothing
[-- ELSE --]
[-- IF VAR.MoreInfoPage "yes" --]
<br>
[-- END_IF --]
[-- END_IF --]
[-- STORE.Qty --] <input type=text size=2 name="[-- PRODUCT.RecordNumber --]:qnty" value="1" >  
[-- END_IF --]

[-- IF VAR.AddButtonGraphic --]
<input type=image class="add" src="[-- OUTPUT_DIRECTORY_URL --]/[-- VAR.Media --]/[-- VAR.AddButtonGraphic --]" name="Add to Cart" alt="Add to Cart">
[-- ELSE_IF ADDIMAGE? --]
<input type=image class="add-img" [--addimage--]>
[-- ELSE --]
<input class="add" type=submit value="[-- ADDTEXT --]">
[-- END_IF --]

# ### Product View Cart Button ###
[-- IF ViewImage? --]
[-- IF ANALYTICS_MULTI_DOMAIN --]
<script type="text/javascript" language="JavaScript">
document.write('<a class="viewcart-img" href="javascript:__utmLinker(\'[-- SHOPPING_CART_URL --]\');"><img [-- viewimage--]></a>');
</script>
<noscript>
<a class="viewcart-img" href="[-- SHOPPING_CART_URL --]"><img [-- viewimage--]></a>
</noscript>
[-- ELSE --]
<a class="viewcart-img" href="[-- SHOPPING_CART_URL --]"><img [-- viewimage--]></a>
[-- END_IF --]
[-- ELSE --]
[-- IF ANALYTICS_MULTI_DOMAIN --]
<script type="text/javascript" language="JavaScript">
document.write('<a class="viewcart" href="javascript:__utmLinker(\'[-- SHOPPING_CART_URL --]\');">[-- ViewText --]</a>');
</script>
<noscript>
<a class="viewcart" href="[-- SHOPPING_CART_URL --]">[-- ViewText --]</a>
</noscript>
[-- ELSE --]
<a class="viewcart" href="[-- SHOPPING_CART_URL --]">[-- ViewText --]</a>
[-- END_IF --]
[-- END_IF --]
</div>
</div>

<div class="clear"></div>

</div> 
</form>
</div>
[-- IF PRODUCT.NumSubProducts "0" --]
[-- ELSE --]
<h3>Related Items:</h3>
<table cellpadding="0" cellspacing="0" border="0" width="98%" align="center">
[-- LOOP SUBPRODUCTS 2 --]
<td>[-- SUBPRODUCTS --]</td>
[-- END_LOOP SUBPRODUCTS --]
</table>
[-- END_IF --]

</div>

[-- IF VAR.DisplayNavMI "yes" --]
<div id="navBar">
[-- IF STORE.Type "STARTER" --]
#no search
[-- ELSE --]
[-- IF VAR.ShowSearchField "Yes" --]
<div id="search">
<h2>[-- STORE.175 --]</h2>
[-- IF ANALYTICS_MULTI_DOMAIN --]
<form action="[-- SHOPPING_CART_URL Base --]/productsearch.cgi?storeid=[-- STORE.ID --]" method="post" onSubmit="javascript:__utmLinkPost(this)">
[-- ELSE --]
<form action="[-- SHOPPING_CART_URL Base --]/productsearch.cgi?storeid=[-- STORE.ID --]" method="post">
[-- END_IF --]
<input type=text name="search_field" size=15>
<input type=hidden name="storeid" value="[-- STORE.ID --]">
<input type=submit value="[-- STORE.177 --]">
</form>
</div>
[-- END_IF --]
[-- END_IF --]

<div id="text2" class="text2-empty" style="padding: 0;"></div>

</div> 
[-- END_IF --]

<div id="footer">
<div id="footerContents">
[-- IF MORE_INFO.DisplayPageFooter --]
[-- FOOTER --]
[-- ELSE --]
 
[-- END_IF --]
</div>
</div>

</body>
</html>
[-- END_DEFINE MORE_INFO_PAGE --]
----------------------------------------------------------------------------------

4. Last you can go to Products > Edit Product Layout, and select your new product template from the template pull down menu and publish the changes.

-Lauren

by **Winterfellow** » Fri Jan 18, 2008 10:40 am

Thank you Lauren and kiawah I was going to ask the same quesiton.

ShopSite Forums

Cross Selling

Cross Selling

RE: Cross Selling

Who is online