Columnar Layout for Product Listing pages

Presenting products in a Grid

Note: This page refers to product listings. There’s a separate page for category listings.

Since 1.5.7, Zen Cart includes a configuration setting called Columns Per Row. This setting allows you to display multiple columns of products per row on the Product Listing page.

Note: Your template must also support this setting. Both the Responsive Classic and Bootstrap templates support this setting. Many older templates use a version of the Column Grid Layout plugin, which is deprecated by this setting.

This is what it looks like when Columns Per Row is set to 3. 3 Columns per Row

This is what it looks like when Columns Per Row is set to 1. Using this setting is called rows mode.

1 Column per Row

Version Difference

Fluid Mode in Bootstrap

In the Bootstrap template, the recommended value of Columns Per Row is 0, which allows the template to determine how many columns will fit on the screen dynamically. A smaller window will have fewer columns, and a larger window will have more.

Setting Columns Per Row to 0 is called fluid mode in the Bootstrap template. The Bootstrap template is best run in either rows mode or fluid mode. (Setting Columns Per Row to 1 is called rows mode in both Bootstrap and Responsive Classic.)

Here’s a Bootstrap listing page in fluid mode in a wide window (around 1500px):

Wide window - 4 columns

And here’s what the same page looks like when the window is narrowed to 1024px (iPad width):

Tablet window - 3 columns

And finally, here’s what the same page looks like when the window is narrowed to 500 px (mobile phone):

Phone window - 1 column

Developer Tips:

  • the number of columns shown at each window size may be adjusted customizing the $grid_classes_matrix data structure. Instructions for doing so are provided in includes/modules/bootstrap/product_listing.php.
  • If you are switching back and forth between templates, and want to use rows mode in one and fluid mode in another, consider using the template_init feature.

Still have questions? Use the Search box in the upper right, or try the full list of FAQs. If you can't find it there, head over to the Zen Cart support forum and ask there in the appropriate subforum. In your post, please include your Zen Cart and PHP versions, and a link to your site.

Is there an error or omission on this page? Please post to General Questions on the support forum. Or, if you'd like to open a pull request, just review the guidelines and get started. You can even PR right here.
Last modified May 22, 2024 by Scott Wilson (3203178).