Knowledgebase

Question

I want the products and/or categories to appear in 2 columns. How do I do this?

Answer

CactuShop v6

In v6, you do not control the number of columns or rows directly. Instead you control the width of 'short format' items using CSS. This effectively determines the number of columns.

The styles to look for in the cactushop.css (skin_default/templatestyles) are:

.products_shortened .box
.subcategories_shortened .box

When setting the width of these items, you can use pixels (px) or percentages (%). However consider the spacing around the items when choosing values. For example, to get two columns per page, a setting of 50% width might seem appropriate. But if the items are 50% width, once the spacing around them is taken into account you will probably end up with only one being able to fit per line. Therefore you should generally set the width less that this, perhaps 45%, and experiment from there. Also take into consideration that the 'box model' that determines the space around CSS items is slightly different on each browser, so you will need to test across each browser and try to find an ideal value that gives the desired results on all common browsers.

Categories don't have page turning code, as it's generally assumed that categories would be divided into subcategories if the number got enough to require paging. However, products can be spread across multiple pages. The number of items per page can be set with the following config settings:

shortformatpagesize
prodtypepagesize

Note that shortformatpagesize controls the number of items on pages set to use the short format layout, and prodtypepagesize controls the number of items per page in normal or extended (single column) layouts. Which display type is used can be set at the category level immediately above the products being displayed. Alternatively, you can set your store categories all to use the default setting, and then set this with the following config settings:

defaultproddisplay
defaultprodtypedisplay

The layout of the specials on the home page are determined by this config setting:

specialsdisplaytype

It should be clear that by setting the number of products per page, as well as the width of each product within the CSS, it is possible to control the number of rows and columns precisely.

CactuShop v5.x

To change this on the category display, you'll need to switch the product display over to defaultproddisplay config setting to Shortened Multi-Column format - value 's'. To further customize this display, have a look at these config settings:

shortenedformatcols
shortenedformatrows
shortenedformatshowdesc
shortenedformatshowversions

Note that the config setting defaultproddisplay can be overridden on each category.

To change this setting for front 'specials', set the specialsdisplaytype config setting.

Can't find the answer you need? Click here to open a support ticket.