Quick & Easy Custom Product Template

To quickly and easily create a custom product template, take the basic layout that you would like for your product more information page and follow the steps below, pasting the code found below, into your layout.

• Start by creating the basic layout that you want for your product more information page. The Quick & Easy template options work best if you have one main cell in your design where you would like ShopSite to put information, and the rest of your template, such as the header, left links, and footer remain the same. Three examples of basic product more information layouts are shown below. The gray areas are where the information is hard coded, and the white area is where the code from this tutorial will be inserted.
  
  
• Add the following code to the top of your template (above the DOCTYPE and HTML tags).

[-- DEFINE PRODUCT --] [-- IF PRODUCT.Graphic --] [-- IF PRODUCT.DisplayMoreInformationPage --] <a href="[-- PRODUCT.MoreInfoURL --]">[-- PRODUCT.Graphic --]</a> [-- ELSE --] [-- PRODUCT.Graphic --] [-- END_IF --] [-- END_IF --] [-- IF PRODUCT.DisplayMoreInformationPage --] <a href="[-- PRODUCT.MoreInfoURL --]">[-- PRODUCT.Name --]</a> [-- ELSE --] [-- PRODUCT.Name --] [-- END_IF --] [-- 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 --] <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.DisplayPrice --] <br> [-- IF PRODUCT.VariablePrice? --] <b>[--STORE.Price --]:</b> [-- STORE.CurrencySymbol --]<input type=text name="[-- PRODUCT.RecordNumber --]:price" size="4" maxlength="10" value=""> [-- ELSE --] [-- IF PRODUCT.SaleAmount --] <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 --] [-- STORE.OnSaleText --] [-- 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 --] [-- END_IF --] [-- PRODUCT.ProductDescription --] [-- IF PRODUCT.DisplayOrderQuantity checked --] <br>Quantity <input type="text" size="2" name="[-- PRODUCT.RecordNumber --]:qnty" value="1" >   [-- END_IF --] <br> [-- IF PRODUCT.DisplayOrderingOptions --] <span class="opt_hdr">[-- PRODUCT.OptionText --]</span> [-- Order_Option_Menu Column --] [-- 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 class="add" type="image" [--ADDIMAGE--]> [-- ELSE --] <input class="add" type="submit" value="[-- ADDTEXT --]"> [-- END_IF --] </form> [-- END_DEFINE PRODUCT --] [-- DEFINE MORE_INFO_PAGE --]

• Next copy the code from below and paste it into your main cell. In the examples shown above, the main cell would be the white space in the middle.

<table align="center" width="100%"> <tr> <td align="center"> [-- 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 --] [-- IF PRODUCT.MoreInformationGraphic --] [-- PRODUCT.MoreInformationGraphic --] [-- END_IF --] #################### # PRODUCT SKU # #################### [-- IF PRODUCT.Subproduct --] # don't display the SKU [-- ELSE --] [-- INCLUDE Product-Sku PROCESS --] [-- END_IF --] </td> </tr> <tr> <td align="left"> <span class="ProductDescription">[-- PRODUCT.MoreInformationText --]</span> </td> </tr> <tr> <td align="center"> #################### # 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 --] <span class="ProductName">[-- PRODUCT.Name --]</span> [-- END_IF --] [-- ELSE --] <span class="ProductName">[-- PRODUCT.Name --]</span> [-- END_IF --] #################### # PRODUCT PRICE # #################### [-- IF PRODUCT.QuantityPricing --] #do nothing [-- ELSE --] [-- INCLUDE Product-Price PROCESS --] [-- END_IF --] ####################### # ADD TO CART BUTTON # ####################### [-- IF PRODUCT.DisplayOrderingOptions --] <br> [-- END_IF --] [-- INCLUDE Product-AddToCartButton PROCESS --] </td> </tr> </table>

• Add [-- END_DEFINE MORE_INFO_PAGE --] to the bottom of your template, below the /HTML tag.
  
  
• Last, upload your template into your ShopSite store. In your ShopSite store, go to Merchandising > Custom Templates > Page/Product > Upload Template. Upload your custom product template. You would then need to go to Products > Edit Product Layout, and select your custom template from the template pull down menu.
  

Creating Your Quick & Easy Custom Search Template