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 1
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.

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

Product Loop Example 2
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.
    <table>
    [-- LOOP PRODUCTS PAGE.Columns--]
    <td>
    [-- PRODUCT my_product_template --]
    </td>
    [-- END_LOOP PRODUCTS --]
    </table>
Return To: Page Template Home Page