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 --]
<form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post">
<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.SaleAmount --] [-- STORE.OnSaleText --]
[-- ELSE --]
[-- PRODUCT.Price --]
[-- 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 ADDIMAGE? --]
<input class="add" type="image" [--ADDIMAGE--]>
[-- ELSE --]
<input class="add" type="submit" value="[-- ADDTEXT --]">
[-- END_IF --]
</form>
[-- END_DEFINE PRODUCT --]
[-- DEFINE PRODUCT_CROSS_SELL --]
[-- INCLUDE cross-sell-default.sst PROCESS --]
[-- END_DEFINE PRODUCT_CROSS_SELL --]
[-- 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">
<form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post">
[-- IF PRODUCT.MoreInformationGraphic --]
[-- PRODUCT.MoreInformationGraphic --]
[-- END_IF --]
[-- IF PRODUCT.Subproduct --]
[-- ELSE --]
[-- INCLUDE Product-Sku PROCESS --]
[-- END_IF --]
<p class="ProductDescription">[-- PRODUCT.MoreInformationText --]</p>
[-- 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 --]
[-- IF PRODUCT.QuantityPricing --]
[-- ELSE --]
[-- INCLUDE Product-Price PROCESS --]<br />
[-- END_IF --]
[-- INCLUDE Product-AddToCartButton PROCESS --]
</form></td>
</tr>
</table>
[-- IF Product.MoreInformationProductCrossSell --]
[-- IF PRODUCT.CrossSell "0" --]
[-- ELSE --]
<table class="pcs_table">
<caption>[-- STORE.CartCrossSellHeader --]</caption>
[-- LOOP Product_Cross_Sell 3 --]
<td class="gcs_table_content">[-- PRODUCT_CROSS_SELL --]</td>
[-- END_LOOP Product_Cross_Sell --]
</table>
[-- END_IF --]
[-- END_IF --]
[-- IF Product.MoreInformationGlobalCrossSell --]
<table class="gcs_table">
<caption>[-- STORE.GlobalCrossSellHeader --]</caption>
[-- LOOP GLOBAL_Cross_Sell 3 --]
<td class="gcs_table_content">[-- GLOBAL_CROSS_SELL --]</td>
[-- END_LOOP Global_Cross_Sell --]
</table>
[-- END_IF --]
- 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.