Flex_1

Flex_1 example

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" /]

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:

Template customization

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 “Flex_1”:

Layout
OptionTypeValuesDescription
max_width int 0 between 9999 Max width. Max width of the whole grid (in pixels).
max_row_items_xs int 1 between 99 Extra small columns. Number of items per row on extra small devices (portrait phones, less than 576px)
max_row_items_sm int 1 between 99 Small columns. Number of items per row on small devices (landscape phones, 576px and up)
max_row_items_md int 1 between 99 Medium columns. Number of items per row on medium devices (tablets, 768px and up)
max_row_items_lg int 1 between 99 Large columns. Number of items per row on large devices (desktops, 992px and up)
max_row_items int 1 between 99 Extra large columns. Number of items per row on extra large devices (large desktops, 1200px and up)
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.
Image
OptionTypeValuesDescription
image_size string
  • "small" (Small)
  • "medium" (Medium)
  • "large" (Large)
Image size
image_max_height int 0 between 9999 Image max height. Image max height in pixel
Title
OptionTypeValuesDescription
show_title bool "yes" / "no" Show title
title_color string CSS compatible color value, like hex values (#ff0000) or color names (red) Title color. No default. The title will be displayed in the default text color of your page, if none is set here.
title_font_css string custom text Title font style. Utilizes the CSS font property. Example: "15px arial, sans-serif;"
title_length int 0 between 999 Title max length. Limits the title to a maximum length of characters. 0 for unlimited.
title_auto_height bool "yes" / "no" Title auto height. Applies some CSS rules to achieve the same height for all titles.
Price
OptionTypeValuesDescription
show_price bool "yes" / "no" Show price
price_color string CSS compatible color value, like hex values (#ff0000) or color names (red) Price color. The color in which the price text is displayed.
price_font_css string custom text Price font style. Utilizes the CSS font property. Example: "15px arial, sans-serif;"
show_prime bool "yes" / "no" Show prime image
show_price_disclaimer bool "yes" / "no" Show price disclaimer. "Details" link next to date of last update.
last_update_format string custom text Last item update date format. Used in price disclaimer. Supports PHP date function format. Example: D, d M Y H:i:s
Button
OptionTypeValuesDescription
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_color_hover string CSS compatible color value, like hex values (#ff0000) or color names (red) Button color hover
button_border_radius int 0 between 999 Button border radius. In pixels, > 0 for rounded corners.
button_font_css string custom text Button font style. Utilizes the CSS font property. Example: "15px arial, sans-serif;"
Ratings
OptionTypeValuesDescription
show_ratings bool "yes" / "no" Show rating stars
Savings
OptionTypeValuesDescription
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. Example: "15px arial, sans-serif;"
savings_text_style string
  • "short" (Short version (percentage only))
  • "long" (Long version (percentage and text))
Savings text variant
Misc
OptionTypeValuesDescription
link_target string
  • "shop" (Shop page)
  • "buy" (Buy page)
  • "nothing" (Nothing)
Link target
show_counter bool "yes" / "no" Show counter
disclaimer string
  • "none" (None)
  • "asterisk_and_text" (Asterisk in title link and button. Disclaimer text in each template.)
  • "asterisk_only" (Asterisk in title link and button. No disclaimer text.)
Disclaimer. Shows a disclaimer text.
custom_css string
  • "none" (None)
  • "asterisk_and_text" (Asterisk in title link and button. Disclaimer text in each template.)
  • "asterisk_only" (Asterisk in title link and button. No disclaimer text.)
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 use a custom button color
[asa2_collection tpl="Flex_1" button_color="green" button_color_hover="lightgreen" button_border_radius="0"]my_collection[/asa2_collection]
Flex1 customization
// "show_title" and "show_price" can be used to hide the product's prices and titles
[asa2_feed tpl="Flex_1" show_title="no" show_price="no"]bestseller_dvd_UK[/asa2_feed]
Flex_1 customization