Flat_box_horizontal

×
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_horizontal” is used. It is designed to work with any kind of product. It comes with many options to customize its appearance without having to change the code.

Contents

Main features

  • General purpose template
  • Responsive design
  • Adjustable via options without programming skills
  • Flat design

Example

This first example is built with the following shortcode:

[asa2 tpl="Flat_box_horizontal" country_code="UK"]B098FKXT8L[/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.

Customization

On ASA 2’s admin page “Templates” you can customize the general options of template “Flat_box_horizontal“. 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_horizontal" button_color="green" align="center"]B098FKXT8L[/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_horizontal" savings_bg_color="red" button_color="red" align="center"]B098FKXT8L[/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_horizontal”:

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
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.
button_max_width string custom text Button max width. CSS value like "50%" or "250px".
hide_button bool "yes" / "no" Hide button
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
Details
OptionTypeValuesDescription
show_features bool "yes" / "no" Show product features (if available)
features_length int 0 between 99 Number of features. How many feature items to show before the "Show more" link. 0 = no limit.
feature_text_length int 0 between 1000 Feature text max length. Maximum number of letters for each feature before the "..." get displayed. 0 = no limit.
features_font_size int 1 between 100 Features font size (in percent)
show_description bool "yes" / "no" Show product description (if available)
description_font_size int 1 between 100 Description font size (in percent)
description_length int 0 between 1000 Description length. Number of letters before the "show more" link get displayed. 0 = no limit.
Misc
OptionTypeValuesDescription
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

Show features and description text

[asa2 tpl="Flat_box_horizontal" show_features="yes" show_description="yes" align="center"]B098FKXT8L[/asa2]
22%
  • Noise cancelling wireless headphones: the perfect balance of quiet, comfort and sound. Bose uses tiny mics to measure, compare and react to outside noise, cancelling it with opposite signals.
  • High-fidelity audio: the TriPort acoustic architecture offers depth and fullness. Volume-optimised Active EQ maintains balanced performance at any volume, so the bass stays consistent when turned down and the music remains clear when turned up.
  • Quiet and Aware Modes: choose Quiet Mode for full noise cancelling or Aware Mode to bring the outside into the around-ear headphones and hear your environment alongside your music.
  • Over-ear headphones: these comfortable wireless headphones are suitable for all-day wearing. Crafted with plush synthetic leather and impact-resistant nylon, and designed with minimal clamping force, they’re as luxurious as they are durable.
  • Up to 24 hours battery life: enjoy 24 hours of battery life from a single charge.* A quick 15-minute charge offers 3 hours when you’re on the go or plug in the included audio cable to listen for even longer in wired mode.
  • Around ear headphones charge via USB-C: Headphones charge via the included USB-C cable.
  • Bluetooth wireless noise cancelling headphones: these headphones are optimised for a strong, reliable Bluetooth connection within 9.1 metres of the paired device.
  • Bose Music app: the app walks you through guided setup of your over-ear headphones, making it easy to get started. Plus access adjustable noise cancellation settings, manage your Bluetooth connections, enable shortcuts and more.
  • Included Components: Protective Case
×
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.

Custom price font and long style savings ribbon text

[asa2 tpl="Flat_box_horizontal" savings_text_style="long" title_font_css="italic bold 18px/30px Verdana, sans-serif" align="center" country_code="UK"]B098FKXT8L[/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_horizontal" price_font_css="italic bold 18px/30px Georgia, serif" savings_bg_color="red" price_color="red" title_font_css="22px sans-serif" title_color="blue" align="center" country_code="UK"]B098FKXT8L[/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.

Custom savings font CSS

[asa2 tpl="Flat_box_horizontal" savings_font_css="italic bold 12px/30px Verdana, sans-serif" savings_text_style="long" align="center" country_code="UK" button_max_width="200px"]B098FKXT8L[/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.