Flex_1 - ASA 2 Demo

On this page, ASA’s managed template “Flex_1” is used. It specializes in displaying many products in a flexible column layout. For this purpose it uses the modern CSS technology “Flexbox“. It is completely responsive.

Change the window size to see how it behaves at different resolutions:

Contents

1 Main features
2 Customization
3 Shortcode options
4 Customization Examples

Main features

Many products in a flexible column layout
Responsive design (adjusted column count)
Uses CSS3 Flexbox
Customizable without programming skills

Customization

On ASA 2’s admin page “Templates” you can customize the global customization options of the template “Flex_1“. These settings will effect every usage of this template if no dynamic shortcode options are set.

Shortcode options

In addition to the global customization option shown above, you can use the shortcode options to customize each individual usage of “Flex_1”.

This is the list of all available options for template “Flex_1”:

Option	Type	Values	Description
max_width	int	0 between 9999	Max width of the whole grid (in pixels)
max_row_items	int	1 between 99	Max items per row. Influences the width of the items. The more, the narrower the items.
background_color	string	CSS compatible color value, like hex values (#ff0000) or color names (red)	Background color
hover_color	string	CSS compatible color value, like hex values (#ff0000) or color names (red)	Hover color
border_color	string	CSS compatible color value, like hex values (#ff0000) or color names (red)	Border color
border_width	int	0 between 99	Border width (in pixels, 0 for no border)
link_target	string	"shop" (Shop page) "buy" (Buy page) "nothing" (Nothing)	Link target
show_title	bool	"yes" / "no"	Show title
title_color	string	CSS compatible color value, like hex values (#ff0000) or color names (red)	Title color
title_font_css	string	custom text	Title font style. Utilizes the CSS font property.
title_length	int	0 between 999	Title max length. Limits the title to a maximum length of characters. 0 for unlimited
show_ratings	bool	"yes" / "no"	Show rating stars
show_price	bool	"yes" / "no"	Show price
price_color	string	CSS compatible color value, like hex values (#ff0000) or color names (red)	Price color
price_font_css	string	custom text	Price font style. Utilizes the CSS font property.
show_button	bool	"yes" / "no"	Show button
button_color	string	CSS compatible color value, like hex values (#ff0000) or color names (red)	Button color
button_border_radius	int	0 between 999	Button border radius (in pixels, > 0 for rounded corners)
button_color_hover	string	CSS compatible color value, like hex values (#ff0000) or color names (red)	Button color hover
button_font_css	string	custom text	Button font style. Utilizes the CSS font property.
show_savings	bool	"yes" / "no"	Show savings ribbon
savings_color	string	CSS compatible color value, like hex values (#ff0000) or color names (red)	Savings ribbon font color
savings_shadow	bool	"yes" / "no"	Show savings shadow
savings_bg_color	string	CSS compatible color value, like hex values (#ff0000) or color names (red)	Savings ribbon background color
savings_font_css	string	custom text	Savings ribbon font style. Utilizes the CSS font property.
savings_text_style	string	"short" (Short version (percentage only)) "long" (Long version (percentage and text))	Savings text style
show_counter	bool	"yes" / "no"	Show counter
disclaimer	string	"none" (None) "asterisk_only" (Asterisk in title link and button. No disclaimer text.)	Disclaimer

Customization Examples

Changing border design and max columns to 4

[asa2_feed tpl="Flex_1" border_width="2" border_color="red" max_row_items="4"]Bestseller_Books_DE[/asa2_feed]

1	[asa2_feed tpl="Flex_1" border_width="2" border_color="red" max_row_items="4"]Bestseller_Books_DE[/asa2_feed]

Hiding price and title

[asa2_feed tpl="Flex_1" show_title="no" show_price="no"]bestseller_dvd_UK[/asa2_feed]

1	[asa2_feed tpl="Flex_1" show_title="no" show_price="no"]bestseller_dvd_UK[/asa2_feed]

Custom button design

[asa2_collection tpl="Flex_1" button_color="green" button_color_hover="lightgreen" button_border_radius="0"]my_collection[/asa2_collection]

1	[asa2_collection tpl="Flex_1" button_color="green" button_color_hover="lightgreen" button_border_radius="0"]my_collection[/asa2_collection]