Columns layout

On this page, ASA’s managed template “Columns_layout” is used. It 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

Example

This first example is built with the following shortcode:

Minions (Blu-ray + DVD + DIGITAL HD)
$4.99
Abbey Road
$9.49
10-Day Green Smoothie Cleanse
$8.81

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.

Columns_layout customization

 

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:

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

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)

More examples

[Apple MFi Zertifiziert] Anker 90cm mit Nylon umflochtenes verwicklungssicheres USB Kabel mit Lightning Stecker Ladekabel für iPhone 6s / 6 / 6 Plus / 6s Plus, iPad Pro / Air 2 und weitere (Space Grau)
Price: EUR 7,99
You save: EUR 2,00 (20 %)
1 new from EUR 7,990 used
As of: 2016/11/28 10:47 pm
(* = affiliate link / image source: Amazon partner program)
Nescafé Dolce Gusto Caffè Lungo, 3er Pack (48 Kapseln)
Price: EUR 14,31
You save: EUR 0,86 (6 %)
17 new from EUR 14,310 used
As of: 2016/11/27 8:06 pm
(* = affiliate link / image source: Amazon partner program)
Jurassic World
Price: --
7 new from $8.712 used from $8.22
As of: 2016/11/27 1:00 am
(* = affiliate link / image source: Amazon partner program)
BELLA Diamonds Collection 12-Cup Coffee Maker
Price: --
0 new0 used
As of: 2016/11/27 8:06 pm
(* = affiliate link / image source: Amazon partner program)
Steve Jobs (Litterature & Documents) (French Edition)
Price: $27.95
You save: $1.00 (3 %)
26 new from $9.8519 used from $7.41
As of: 2016/11/30 12:00 am
(* = affiliate link / image source: Amazon partner program)
Apple iPhone 4 CDMA Verizon Cellphone, 16GB, Black
Price: $119.44
You save: $380.55 (76 %)
9 new from $87.9976 used from $44.50
As of: 2016/11/27 12:31 pm
(* = affiliate link / image source: Amazon partner program)
The Lego Movie
Price: $9.99
1 new from $9.990 used
As of: 2016/12/03 10:14 am
(* = affiliate link / image source: Amazon partner program)
Native Instruments Komplete Audio 6
Price: EUR 203,60
You save: EUR 25,40 (11 %)
7 new from EUR 199,000 used
As of: 2016/11/26 6:34 am
(* = affiliate link / image source: Amazon partner program)