Some storefronts love the list, others just need the product grid. Here is a quick tip on how disable the dynamic view switcher and stick with the grid layout. The starter templates include a stylesheet that specifically targets Shopp content. In it, are premade styles for showing products in both a product list and a…

Forcing Grid View Styling

Forcing Grid View Styling

Some storefronts love the list, others just need the product grid. Here is a quick tip on how disable the dynamic view switcher and stick with the grid layout.

The starter templates include a stylesheet that specifically targets Shopp content. In it, are premade styles for showing products in both a product list and a product grid layout that can be switched with some Javascript wizardy. This is all made possible because of the semantic markup used in the templates and the relevant styles.

To force the grid view, all you need to do is edit your theme’s custom shopp/shopp.css stylesheet and comment out (or remove) all of the #shopp.list styles. In its default form you can find the style declarations around lines 64-69.

/* Product List View */
/* Wrap these styles with a comment block to disable them.
#shopp.list ul.products li { float: none; width: 100%; overflow: hidden; padding-bottom: 10px;}
#shopp.list ul.products li.product {  border-bottom: 1px solid #ddd; }
#shopp.list ul.products li div.frame { width: 100%; text-align: left; }
#shopp.list ul.products li img { float: left; margin-right: 10px; }
#shopp.list ul.products li .details { float: left; width: 65%; }
#shopp.list ul.products li .listview { display: block; }
*/

Finally, the shopp('catalog','views') tag should be removed from the catalog.php and category.php content templatese to remove the view toggle controls. They won’t appear to do anything anyways with your stylesheet changes.

A pretty easy five-minute adjustment thanks to the thoughtfulness in the Shopp starter templates!

Avatar of Jonathan Davis

By

Jonathan was born at an early age and began designing and developing shortly after. He is the founder of Ingenesis Limited and Project Lead on the Shopp e-commerce plugin for WordPress. He lives and works in the heart of the midwest US with his family. He fancies himself a designer of code, and is only slightly addicted to coffee.

You must be logged in to post a comment.

© Ingenesis Limited. Shopp™ is a registered trademark of Ingenesis Limited.

Skip to toolbar