Custom Page Templates: Page Layout

The page layout fields that the merchant can change in the back office include alignment, page width, number of columns, and column borders. You can choose to completely ignore these fields and use a fixed layout in your template, or you can add code to accommodate the merchant's settings.

  • The alignment setting refers to how products and page links will be aligned in their respective columns. It's easy to handle left, right, and center alignment in a custom template, but it's tricky to do a staggered (alternating) alignment.
  • The [-- PAGE.Alignment --] setting is returned as one of five possible strings. However, those strings don't match exactly with what is required by the HTML align parameter, so it is best to use an IF structure to identify the setting and then set a VAR to the HTML equivalent. The example below shows this.
  • Page width applies to the entire page, and can be set in the <body> tag, or in a CSS definition.
  • Columns and column borders are best handled with a table. Your template needs to contain the <table> and </table> tag, but the <tr> and </tr> tags can be generated automatically with the [-- LOOP PRODUCTS PAGE.Columns --] tag.

Page Layout Example Page Template

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

    <body style="width:[-- PAGE.PageWidth --];">

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

    [-- IF PAGE.DisplayGraphic --]
    [-- IF PAGE.Graphic --][-- PAGE.Graphic --][-- END_IF --]
    [-- END_IF --]

    [-- IF PAGE.DisplayName --]<h1>[-- PAGE.Name --]</h1>[-- END_IF --]

    [-- PAGE.Text1 --]

    [-- IF PAGE.Layout "Left aligned" --]
       [-- VAR.align left --]
    [-- ELSE_IF PAGE.Layout "Right aligned" --]
       [-- VAR.align right --]
    [-- ELSE_IF PAGE.Layout "Centered" --]
       [-- VAR.align center --]
    [-- ELSE_IF PAGE.Layout "Staggered; Start left" --]
       [-- VAR.align left --]
    [-- ELSE_IF PAGE.Layout "Staggered; Start right" --]
       [-- VAR.align right --]
    [-- END_IF --]

    [-- IF PAGE.DisplayColumnBorders "checked" --]
       [-- VAR.border 1 --]
    [-- ELSE --]
       [-- VAR.border 0 --]
    [-- END_IF --]

    <table border="[-- VAR.border --]">
    [-- LOOP PRODUCTS PAGE.Columns --]
       <td valign="top" align="[-- VAR.align --]">[-- PRODUCT --]</td>
    [-- END_LOOP PRODUCTS --]
    </table>

    [-- PAGE.Text2 --]

    [-- IF PAGE.ProductsPerPage 0 --]
    [-- ELSE --]
    [-- PrevNext --]
    [-- END_IF --]
    [-- IF PAGE.DisplayPageFooter --][-- FOOTER --][-- END_IF --]

    [-- PAGE.Text3 --]
    </body>
    </html>
    [-- END_DEFINE PAGE --]
Return To: Page Template Home Page