Quick & Easy Custom Page Template
To quickly and easily create a custom page template, take the basic layout that you would like for your store, and follow the steps below, pasting the code found below, into your layout.
- Start by creating the basic layout that you want. 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 page 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 LINK_TO_PAGE --]
<a href="[-- OUTPUT_DIRECTORY_URL --]/[-- PAGE.FileName --]">
[-- IF PAGE.LinkGraphic --][-- PAGE.LinkGraphic --]
[-- END_IF --]
[-- IF PAGE.LinkName --][-- PAGE.LinkName --][-- ELSE --][-- PAGE.Name --][-- END_IF --]
[-- IF PAGE.LinkText --]
[-- PAGE.LinkText --][-- END_IF --]
[-- END_DEFINE LINK_TO_PAGE --]
[-- DEFINE 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 width="100%">
<tr>
<td align="left">
[-- IF PAGE.DisplayPageHeader --]
[-- HEADER --]
[-- END_IF --]
[-- IF PAGE.DisplayName --]
[-- IF PAGE.Name --]
<h1>[-- PAGE.Name --]</h1>
[-- END_IF --]
[-- END_IF --]
[-- IF PAGE.DisplayGraphic --]
[-- IF PAGE.Graphic --]
<img [-- PAGE.Graphic REMOVE_HTML --] align="right">
[-- END_IF --]
[-- END_IF --]
[-- IF PAGE.Text1 --]
<p>[-- PAGE.Text1 --]</p>
[-- END_IF --]
[-- INCLUDE Page-Layout PROCESS --]
[-- IF PAGE.NumLinks 0 --]
[-- ELSE --]
<table class="Products" width="100%" align="center" border="[-- VAR.border --]" cellpadding="3">
[-- LOOP LINKS PAGE.Columns --]
<td valign="top" align="[-- VAR.align --]">[-- LINK --]</td>
[-- END_LOOP LINKS --]
</table>
[-- END_IF --]
[-- IF PAGE.Text2 --]
<p>[-- PAGE.Text2 --]</p>
[-- END_IF --]
[-- IF PAGE.NumProducts 0 --]
[-- ELSE --]
<table class="Products" width="100%" align="center" border="[-- VAR.border --]" cellpadding="3">
[-- LOOP PRODUCTS PAGE.Columns --]
<td valign="top" align="[-- VAR.align --]">[-- PRODUCT --]</td>
[-- END_LOOP PRODUCTS --]
</table>
[-- END_IF --]
[-- IF PAGE.ProductsPerPage "0" --]
[-- ELSE --]
<div class="pagination">[-- PREVNEXT --]</div>
[-- END_IF --]
[-- IF PAGE.DisplayPageFooter --]
[-- FOOTER --]
[-- END_IF --]
[-- IF PAGE.Text3 --]
<p>[-- PAGE.Text3 --]</p>
[-- END_IF --]
[-- IF Page.GlobalCrossSell --]
<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 --]
</td>
</tr>
</table>
- Add [-- END_DEFINE 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 page template. You would then need to go to Pages > Edit Page Layout, and select your custom template from the template pull down menu.