Custom Page Templates: Product Placement and Layout

Page Template Examples
Page Title and Name
Page Header and Footer
Banner Graphic
Text Fields
Page Links
Product Listings
Page Layout
Complete Example

Custom Page Templates: Product Placement and Layout

Most product content and layout settings are defined in product templates, but the page template also has an important function in the product display. In a custom page template you set where products will be displayed, what product template will be used, and how many products will be displayed per row.

Putting products on your page can be quite simple, such as this loop:

[-- LOOP PRODUCTS --]
<br>[-- PRODUCT --]
[-- END_LOOP PRODUCTS --]

You will probably put some HTML tags in and around the loop tags to format the products to fit your page layout.

You don't have to know what products are assigned to the page; the [-- LOOP PRODUCTS --] tags cycle through all of them.
Every time the template parser cycles through the loop, it will replace the [-- PRODUCT --] tag with the product information for a product assigned to the current page.
Most templates display products in an HTML table. If you do the same, your page template should contain the start and end tags for the table, and the contents of each cell will come from the product template and products database. The HTML tags in the page and product templates must work together to create valid HTML.
You can display the products in columns by adding a parameter to the [-- LOOP PRODUCTS --] tag.
You can let each product use the product template assigned to it, or you can specify that they all use the same template in the [-- PRODUCT --] tag.

Product Loop Example 1Resulting Page

This example uses a very simple table to display product information. Since there is only one column, the table isn't really necessary, but the table structure is applicable to more complex layouts. All of the products in the resulting page are using the Default Product Template.

[-- DEFINE LINK_TO_PAGE --]
<a href="[-- OUTPUT_DIRECTORY_URL --]/[-- Page.FileName --]">
[-- IF PAGE.LinkName --]
  [-- PAGE.LinkName --]
[-- ELSE --]
  [-- PAGE.Name --]
[-- END_IF --]
</a>
[-- END_DEFINE LINK_TO_PAGE --]

[-- DEFINE PAGE --]
<html>
<head>
<title>[-- PAGE.Name Remove_HTML --]</title>
</head>

<body>

[-- IF PAGE.DisplayPageHeader --]
  [-- HEADER --]
[-- END_IF --]

[-- IF PAGE.DisplayGraphic --]
  [-- IF PAGE.Graphic --]
    <p style="text-align:center">[-- PAGE.Graphic --]</p>
  [-- END_IF --]
[-- END_IF --]

[-- IF PAGE.DisplayName --]
  <h1 style="text-align:center">[-- PAGE.Name --]</h1>
[-- END_IF --]

[-- PAGE.Text1 --]

<p>
[-- LOOP LINKS --]
[-- LINK --]<br>
[-- END_LOOP LINKS --]
</p>

<table>
[-- LOOP PRODUCTS --]
<tr><td>
[-- PRODUCT --]
</td></tr>
[-- END_LOOP PRODUCTS --]
</table>

[-- PAGE.Text2 --]

[-- IF PAGE.ProductsPerPage 0 --]
# do nothing
[-- ELSE --]
<p style="text-align:center">[-- PrevNext --]</p>
[-- END_IF --]
[-- IF PAGE.DisplayPageFooter --]
  [-- FOOTER --]
[-- END_IF --]

[-- PAGE.Text3 --]

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

Product Loop Example 2Resulting Page

This second example uses the same structure as the previous example, but it specifies a template to use for all the products. It also displays the products in columns based on the "Columns" value set by the merchant.

When the [-- LOOP PRODUCTS --] tag includes a parameter for columns, the <tr> and </tr> tags are put in automatically as the page is generated. Do not hard-code them as part of your template.
You would need to replace my_product_template in the [-- PRODUCT --] tag with the name of your product template.