Flex_1

The managed template “Flex_1” specializes in displaying many products in a flexible column layout. For this purpose it uses the modern CSS3 technology “Flexbox“. It is completely responsive.

Main features

  • Many products in a flexible column layout
  • Responsive design
  • Uses CSS3 Flexbox technology
  • Customizable without programming skills

Demo page

To see this template in action with different examples, please refer to:

Flex_1 demo page

Example

Example shortcode:

[asa2_smart_collection s="blu-ray" tpl="Flex_1" limit="10" is_available_main="true" has_large_image_url="true" orderby="random" show_title="no" /]
Flex_1 example

Customization

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.

Flex_1 customization

Shortcode options

Besides the general customization settings, it is possible to overwrite these settings per shortcode.

Example “button_color”

For example, to use a custom button color, this shortcode would make the difference:

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

Example “Hiding price and title”

Options “show_title” and “show_price” can be used to hide the product’s prices and titles:

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

All available options

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

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