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. (Page colors are covered in a separate example.) 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 Resulting Page
The sample page used for this example has the width set to 90%, one column, and column borders are turned on. It does not have any products assigned, so there is no output from the [-- LOOP PRODUCTS --] tag set. However, the loop does show how the page layout settings can be used to specify the alignment and number of columns. The [-- LOOP PRODUCTS --] tag set is explained in the Custom Page Template: Product Listing page.