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 the demo page:
Example¶
Example shortcode:
[asa2_smart_collection cat_slug="demo-products" limit="4" tpl="Columns_layout" orderby="rand" /]
Global Options¶
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.
Note
The globally applied options can be dynamically overwritten via shortcode options.
The following screenshot illustrates the options window by means of the “Book” template:
Shortcode Options¶
In addition to the global options mentioned above, it is also possible to overwrite these settings dynamically in a WordPress shortcode, like this:
// general syntax:
[asa2 option="value"]ASIN[/asa2]
Take a look at other examples.
Complete Options List¶
Complete list of all options available for the 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) |
| structured_data | string |
|
Structured Data. Include structured data at the end of the template |
| custom_css | string |
|
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. |
Shortcode Options Examples¶
// to show 6 columns on large devices instead the generally configured number
[asa2_smart_collection cols_lg="6" cat_slug="demo-products" /]
// to render 2 columns on extra small devices
[asa2_smart_collection cols_xs="2" cat_slug="demo-products" /]