Columns_layout

The managed template “Columns_layout” is specialized for displaying multiple products in colums. It works perfectly with ASA 2 collections or smart collections. It is customizable in general and per shortcode.

Main features

  • Specialized for rendering multiple products in columns
  • Responsive design
  • Adjustable columns count per screen width
  • Customizable without programming skills

Demo page

To see this template in action with different examples, please refer to:

Columns_layout demo page

Example

Example shortcode:

[asa2_smart_collection cat_slug="demo-products" limit="4" tpl="Columns_layout" orderby="rand" /]
Columns_layout example

Customization

On ASA 2’s admin page “Templates” you can open a customization context window for each managed template. Just hover the mouse cursor over a template row and click the link “Customize” to open it. These settings will effect the appearance of this template.

Columns_layout customization

Shortcode options

Besides the general customization settings, it is possible to overwrite these settings per shortcode.

For example, to show 6 columns on large devices instead the generally configured amount, this shortcode would make the difference:

[asa2_smart_collection cols_lg="6" cat_slug="demo-products" /]

Or to render 2 columns on extra small devices instead of the generally configured amount, use option “cols_sm”:

[asa2_smart_collection cols_xs="2" cat_slug="demo-products" /]

Following you find a list of all available shortcode options for template “Columns_layout”:

Option Type Values Description
item_tpl string custom text Name of the template to use for rendering the single items.
cols_xs int 1 between 99 Number of columns on extra small devices (Phones, <768px)
cols_sm int 1 between 99 Number of columns on small devices (Tablets, ≥768px)
cols_md int 1 between 99 Number of columns on medium devices (Desktops, ≥992px)
cols_lg int 1 between 99 Number of columns on large devices (Desktops, ≥1200px)
gap_xs int 0 between 999 Columns gap in pixels on extra small devices (Phones, <768px)
gap_sm int 0 between 999 Columns gap in pixels on small devices (Tablets, ≥768px)
gap_md int 0 between 999 Columns gap in pixels on medium devices (Desktops, ≥992px)
gap_lg int 0 between 999 Columns gap in pixels on large devices (Desktops, ≥1200px)