Flat_box_vertical

On this page, ASA’s managed template “Flat_box_vertical” is used. It has a narrow and flat design optimized to use incolumn or grid layouts, tables or sidebars. It is customizable in general and per shortcode. It is the default template used by the Carousel template.

Main features

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

Example

This first example is built with the following shortcode:

Customization

On ASA 2’s admin page “Templates” you can customize the general options of template “Columns_layout“. These settings will effect every usage of this template.

Shortcode options

Besides the general settings, it is possible to overwrite template options per shortcode.

Example “button_color”

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

Example “savings_bg_color”

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

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%)
background_color	string	CSS compatible color value, like hex values (#ff0000) or color names (red)	Background 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)
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
show_feed_index	bool	"yes" / "no"	Show feed index (only works when used with asa2_feed shortcode)
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

More examples

Using a custom price font CSS and long style savings ribbon text:

---

Using “price_font_css” for a custom price font style and “savings_bg_color” for a custom savings ribbon background color.