Flat_box_vertical

The managed template “Flat_box_vertical” has a narrow design optimized to use in column or grid layouts, tables or sidebars. It is customizable in general and per shortcode.

Main features

  • Narrow design optimized to use in column or grid layouts
  • Responsive design
  • Adjustable via options without programming skills
  • Flat design

Demo page

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

Carousel demo page

Example

Example shortcode:

[asa2 tpl="Flat_box_vertical"]B00EI7DPPI[/asa2]
Flat_box_vertical 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.

Flat_box_vetical 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:

Flat_box_vetical customization
[asa2 tpl="Flat_box_vertical" button_color="green"]B00EI7DPPI[/asa2]

Example “savings_bg_color”

To set a custom background color to the savings ribbon, use option “savings_bg_color”:

Flat_box_vetical customization
[asa2 tpl="Flat_box_vertical" savings_bg_color="red" button_color="red"]B00EI7DPPI[/asa2]

All available options

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

Option Type Values Description
width string custom text Width, like 50% or 200px (Default: 31%)
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)
border_radius int 0 between 99 Border radius (in pixels, > 0 for rounded corners)
img_link_to_shop_page bool "yes" / "no" Image links to shop page
title_link_to_shop_page bool "yes" / "no" Title links to shop page
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.
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_font_css string custom text Button font style. Utilizes the CSS font property.
button_target string
  • "shop" (Shop page)
  • "buy" (Buy page)
Button target
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_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
box_hover_effect string
  • "none" (None)
  • "scale" (Scale)
Box hover effect
disclaimer string
  • "none" (None)
  • "asterisk_only" (Asterisk in title link and button. No disclaimer text.)
Disclaimer