Customize the category template to display subcategories in a grid


	Customize the category template to display subcategories in a grid
	Last Edited - 11/26/2013 10:37am PST
	Category Path - Shopping Cart Software Components > Administration Area > Design > FAQs & Tutorials

By default, the category page typically displays both the products in the selected category, and any subcategories in the category. The list of products usually features an option to toggle between grid view and list view, while the subcategories are only displayed in a list. However, it is possible to customize the layout of the category page, so that subcategories appear in a grid instead of in a list.

tip: back up the template package

The changes necessary to display subcategories in a grid are rather involved, and so it is recommended to back up the template package before proceeding. The following Knowledge Base article explains how to back up a template package:
Copy a template package

The layout of the category page is controlled by the category template (category.tpl), so if that template is not currently present in the template package, it will be necessary to populate the category.tpl template before proceeding. The following Knowledge Base article explains how to populate a template:
Populate Templates

Customizing the layout of the category template to display subcategories in a grid will involve first editing the category.tpl template, then adding a new stylesheet to the template package, and finally editing the category.tpl template again to link to the new stylesheet.

Edit the category.tpl template

In the Template Package Sandbox, select category.tpl from the Template Package Files list on the left.

If the Template Editor pane is not already showing the source code of the category.tpl template, then click the Switch to Plain Text Editor link in the top right of the Template Editor title bar to switch to source code view.

In the Template Editor pane, scroll through the source code to locate the code currently used to generate the subcategories on the category page. Typically, this section of code will begin with {IF-SUBCATEGORIES-BEGIN}, and end with {IF-SUBCATEGORIES-END}.

In order to display subcategories as grid, each subcategory will be displayed as a list item in an unordered list. List items will be formatted to display as "inline-block", with a width calculated to display the desired number of subcategories on each row, before wrapping to the next row of the grid.

To implement this, follow the steps below:

1) Wrap the entire subcategories section in a container. The container should have a class or ID that may be used to associate CSS style rules to the element. This may be accomplished by inserting <div class="CONTAINER-SUBCATEGORY-BLOCK"> immediately after {IF-SUBCATEGORIES-BEGIN}, and then inserting </div> immediately before {IF-SUBCATEGORIES-END}.

2) Turn the subcategory block into an unordered list. The list should also have a class or ID that may be used to associate CSS style rules to it. This may be accomplished by replacing the existing table structure or div(s) with <ul></ul> tags.

For instance:
<table border="0" cellpadding="0" cellspacing="0" class="SUBCATEGORY-TABLE">

{SUBCATEGORY-BLOCK-BEGIN}

Could be replaced by:
<ul class="SUBCATEGORY-BLOCK">

{SUBCATEGORY-BLOCK-BEGIN}

And:
{SUBCATEGORY-BLOCK-END}

</table>

Could be replaced by:
{SUBCATEGORY-BLOCK-END}

</ul>

3) Place the content for each subcategory into a list item, by wrapping it in <li></li> tags.

For instance:
<tr>

{IF-CATEGORY-IMAGE-BEGIN}

{IF-CATEGORY-IMAGE-END}

</td>

<a href="{CATEGORY-URL}" title="Visit this category page">{CATEGORY-NAME}</a>

</span><br />
This subcategory contains {CATEGORY-NUMBER-OF-PRODUCTS} products and {CATEGORY-NUMBER-OF-SUBCATEGORIES} subcategories.<br />
{CATEGORY-DESCRIPTION}

</td>

</tr>

Could be replaced by:
<li class="CONTAINER-SUBCATEGORY BORDER-LIGHT JUSTIFY-CENTER">

{IF-CATEGORY-IMAGE-BEGIN}

{IF-CATEGORY-IMAGE-END}

</div>

<strong><a href="{CATEGORY-URL}" title="Visit this category page">{CATEGORY-NAME}</a></strong>

This subcategory contains {CATEGORY-NUMBER-OF-PRODUCTS} products and {CATEGORY-NUMBER-OF-SUBCATEGORIES} subcategories.

</div>

{CATEGORY-DESCRIPTION}

</div>

</div>

</li>

4) [Optional] Add a spacer after each subcategory. This may be done by inserting another list item immediately after the list item created in step 3.

For example:
<li class="SUBCATEGORY-SPACER"></li>

5) Save the customized category.tpl template. Scroll to the File Options section at the bottom of the Template Package Sandbox page, select Save from the dropdown menu, then click the blue Save Changes button.

Add a new stylesheet to the template package

In the Template Package Sandbox, after customizing and saving the category.tpl template, create a new stylesheet. To create the stylesheet, scroll to the File Options section at the bottom of the Template Package Sandbox page. From the dropdown menu in the File Options section, select Create a new file in this Template Package...

Selecting this option will cause additional options to be displayed in the File Options section. From the new second dropdown menu, select css. Then enter a name for the new stylesheet in the text field to the right (for instance: subcategory-styles).

After selecting css from the dropdown menu, and entering a name for the new stylesheet, click the blue Save New File button.

The new stylesheet will automatically be displayed in the File Editor pane.

Click in the File Editor pane and begin entering the CSS rules necessary to format the subcategory unordered list. One approach to formatting the subcategory unordered list is described below:

1) Create a set of rules to format the container around the subcategory list. The container should be formatted as a block that takes up the entire width of its parent element.

For example:

.CONTAINER-SUBCATEGORY-BLOCK {

display: block;

float: none;

margin: 0px;

padding: 0px;

width: 100%;

border-top: 2px solid rgb(128,128,128);

}

2) Create a set of rules to format the subcategory unordered list. The list should also display as a block, but with some padding so that the borders of the subcategories are a pleasant distance from the borders of the subcategory list container. The list-style-type should be set to "none" so that a bullet is not displayed in front of each subcategory.

For example:

.SUBCATEGORY-BLOCK {

display: block;

float: none;

margin: 0;

padding: 20px 10px;

font-size: 1.2em;

line-height: 100%;

list-style-type: none;

border: none;

background: none;

}

3) Create a set of rules to format each subcategory list item. Each item needs to be displayed as an "inline-block", so that each takes up a block of space, but there can be multiple items on the same row, for a grid effect.

The width of each item needs to be calculated according to the width of the page's higher level elements, so that the desired number of list items can fit onto one row. For instance, if the page's content area is 1010 pixels wide, then the 10 pixel left and right padding in the subcategory block would leave 990 pixels of width. Then consider how many subcategories to display per row, and how much space to leave between subcategories. For instance, if there should be three subcategories per row, with 10 pixels between subcategories, subtract 10 pixels for the space between the first and second subcategory, and subtract another 10 pixels for the space between the second and third subcategories, resulting in 970 pixels. Then divide that by 3, resulting in 323.33 pixels. So the width of each subcategory should be 323 pixels, for three subcategories per row with 10 pixels between subcategories, in a 1010 pixel wide space.

For example:

.CONTAINER-SUBCATEGORY {

display: inline-block;

position: relative;

vertical-align: text-top;

box-sizing: border-box;

-moz-box-sizing: border-box;

margin: 0 0 15px 0;

padding: 10px;

width: 323px;

}

4) If a "category spacer" item was added at the optional step 4 when editing the category.tpl template, then also create a set of rules for that "category-spacer".

For example:

.SUBCATEGORY-SPACER {

display: inline-block;

box-sizing: border-box;

-moz-box-sizing: border-box;

margin: 0;

padding: 0;

}

5) Create rules for any inner containers.

For example:

.SUBCATEGORY-IMAGE-CELL {

margin-bottom: 10px;

max-width: 100%;

}

.SUBCATEGORY-DESCRIPTION-CELL {

max-width: 100%;

}

6) Save the new stylesheet. Scroll to the File Options section at the bottom of the Template Package Sandbox page, select Save from the dropdown menu, then click the blue Save Changes button.

Edit the category.tpl template again to link to the new stylesheet

After adding the link to the new stylesheet, save the category.tpl template. Scroll to the File Options section at the bottom of the Template Package Sandbox page, select Save from the dropdown menu, then click the blue Save Changes button.

Conclusion

After populating and customizing the the category.tpl template, and creating a custom stylesheet for the subcategory formatting, the subcategories on the category page should display in a grid-like format.

It may be necessary to check each category's settings, to confirm that the category is set to use the category.tpl template, and not the universal.tpl template. The following Knowledge Base article may be helpful when reviewing category settings:
Category Editor