Columns_layout
Table of Contents
Welcome to the showcase of ASA2’s Columns_layout template. This flexible template is designed to display multiple products in a clean, multi-column layout, making it ideal for product collections or category overviews.
With extensive customization options, you can easily adjust the number of columns and product display settings based on your preferences and screen size – all without any coding knowledge. The template is fully responsive, ensuring an optimal viewing experience across all devices.
Customize the layout globally in the ASA2 admin panel or on a per-shortcode basis for maximum flexibility. Discover how the Columns_layout template can enhance your Amazon Affiliate site powered by WordPress.
Integration
There are several ways how an ASA2 product template can be integrated into a website.
This video shows how to use ASA2's Gutenberg Block to embed a products into your website using the "Columns_layout" template.
This video shows how to use ASA2's Classic Editor Button to embed products into your website using the "Columns_layout" template.
Wherever you can work with WordPress shortcodes, you can also embed products with ASA2 shortcodes. The template to be used can be defined with the tpl option. Otherwise, the template defined as the default is used.
This shortcode uses the cat_slug option to display products from a specific category and the limit option to limit the quantity to 8.
[asa2_smart_collection cat_slug="filter-coffee-machines" limit="8" orderby="random" tpl="Columns_layout" /]If you want to render this product template directly from PHP, e.g. in an individual page template, you can do this with the function asa2_render_smart_collection.
<?php
$options = array(
'cat_slug' => 'filter-coffee-machines',
'limit' => 8,
'is_available_main' => true,
'is_prime' => true,
'rating_gt' => 4,
'orderby' => 'rand',
'tpl' => 'Columns_layout'
);
// display the smart collection
echo asa2_render_smart_collection($options);
Customization
On ASA2’s admin page Templates you can customize the general options of template Columns_layout. These settings will effect the display of this template on a global scope.
Customization Examples
[asa2_smart_collection cat_slug="filter-coffee-machines" limit="8" orderby="random" tpl="Columns_layout" cols_lg="4" /]
[asa2_smart_collection cat_slug="filter-coffee-machines" limit="8" orderby="random" tpl="Columns_layout" button_color="green" /][asa2_smart_collection cat_slug="filter-coffee-machines" limit="6" orderby="random" tpl="Columns_layout" cols_md="2" cols_lg ="3" item_tpl="Robust" /]
Options
This list contains all the options that are available for ASA2's product template Columns_layout, including examples of how they can be used in conjunction with shortcode.
| Layout | |||
|---|---|---|---|
| Option | Type | Values | Description |
| width | string | custom text | Width. A CSS value like "50%" or "200px". |
| max_width_css | string | custom text | Max width. A CSS value like "80%" or "200px". |
| Misc | |||
| 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) |
| 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. |