Columns layout

On this page, ASA’s managed template “Columns_layout” is used. It is specialized for displaying multiple products in columns. 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

Example

This first example is built with the following shortcode:

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

Customization

On ASA 2’s admin page “Templates” you can customize the general options of template “Columns_layout“. These settings will effect every usage of this template.

Shortcode options

Besides the general settings, it is possible to overwrite template options 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 tpl="Columns_layout" 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 tpl="Columns_layout" cols_xs="2" cat_slug="demo-products" /]

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

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)
custom_css	int	0 between 999	Custom CSS. Custom CSS that is applied to all occurrences of this template on a page and is only included once in the source code.

More examples

You can use any template to render the single items. Use option “item_tpl” to set a custom item template.

[asa2_smart_collection tpl="Columns_layout" orderby="rand" limit="6" item_tpl="Horizontal_box" border_width="4" image_size="medium" show_description="no" main_image_slideshow="no" /]

---