Flex_1

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.

First example

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

    Main features

    • Many products in a flexible column layout
    • Responsive design
    • 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


    Hiding price and title


    Custom button design