Flat_box_vertical

×
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on https://www.amazon.co.uk/ at the time of purchase will apply to the purchase of this product.

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 example uses some shortcode options to change the layout on the fly:

[asa2 tpl="Flat_box_vertical" savings_text_style="long" title_color="blue" title_length="35" title_font_css="italic bold 14px/30px Verdana, sans-serif" align="center" savings_bg_color="red"]B08L5S9827[/asa2]
×
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on https://www.amazon.co.uk/ at the time of purchase will apply to the purchase of this product.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Customization

On ASA 2’s admin page “Templates” you can customize the general options of template “Flat_box_vertical“. 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::

[asa2 tpl="Flat_box_vertical" button_color="green" align="center"]B08L5S9827[/asa2]
×
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on https://www.amazon.co.uk/ at the time of purchase will apply to the purchase of this product.

Example “savings_bg_color”

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

[asa2 tpl="Flat_box_vertical" savings_bg_color="red" button_color="red" align="center"]B08L5S9827[/asa2]
×
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on https://www.amazon.co.uk/ at the time of purchase will apply to the purchase of this product.

All available options:

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

Layout
OptionTypeValuesDescription
align string
  • "none" (None)
  • "left" (Left)
  • "center" (Center)
  • "right" (Right)
Align
width string custom text Width. A CSS value like "50%" or "200px".
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.
box_hover_effect string
  • "none" (None)
  • "scale" (Scale)
Box hover effect
Image
OptionTypeValuesDescription
image_size string
  • "small" (Small)
  • "medium" (Medium)
  • "large" (Large)
Image size
image_max_width int 0 between 999 Image max width. In pixels. 0 - 999. 0 for none.
img_link_to_shop_page string
  • "shop" (Shop page)
  • "buy" (Buy page)
  • "nothing" (Nothing)
Image links to
Title
OptionTypeValuesDescription
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_link_to_shop_page string
  • "shop" (Shop page)
  • "buy" (Buy page)
  • "nothing" (Nothing)
Title links to
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.
hide_price bool "yes" / "no" Hide price(s)
price_font_css string custom text Price font style. Utilizes the CSS font property. Example: "15px arial, sans-serif;"
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
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;"
button_target string
  • "shop" (Shop page)
  • "buy" (Buy page)
Button target. Decides whether the button should link to the product page or the buy page.
hide_button bool "yes" / "no" Hide button
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_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
show_feed_index bool "yes" / "no" Show feed index. Only works when used with "asa2_feed" shortcode.
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.

More examples

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

[asa2 tpl="Flat_box_vertical" savings_text_style="long" title_font_css="italic bold 18px/30px Verdana, sans-serif" align="center"]B08L5S9827[/asa2]
×
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on https://www.amazon.co.uk/ at the time of purchase will apply to the purchase of this product.

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

[asa2 tpl="Flat_box_vertical" price_font_css="italic bold 18px/30px Georgia, serif" savings_bg_color="red" price_color="red" align="center"]B08L5S9827[/asa2]